- android - RelativeLayout 背景可绘制重叠内容
- android - 如何链接 cpufeatures lib 以获取 native android 库?
- java - OnItemClickListener 不起作用,但 OnLongItemClickListener 在自定义 ListView 中起作用
- java - Android 文件转字符串
我想仅使用带有 svg/canvas 和 js maximum 的 css 为线条的渐进式绘图设置动画。可以找到我想画的线的想法 here
<svg width="640" height="480" xmlns="http://www.w3.org/2000/svg">
<!-- Created with SVG-edit - http://svg-edit.googlecode.com/ -->
<g>
<title>Layer 1</title>
<path d="m33,104c1,0 2.1306,-0.8037 23,3c9.07012,1.65314 10,2 24,2c7,0 29,0 33,0c8,0 9,0 11,0c2,0 8,0 11,0c9,0 17,0 18,0c10,0 12,0 20,0c1,0 6,0 7,0c2,0 3.07613,0.38268 4,0c2.61313,-1.08239 2,-3 2,-6c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3c0,-1 0,-2 0,-3c0,-1 0.30745,-3.186 -1,-5c-0.8269,-1.14727 -0.09789,-2.82443 -2,-4c-0.85065,-0.52573 -2.82443,-0.09789 -4,-2c-0.52573,-0.85065 -2.58578,-0.58578 -4,-2c-0.70711,-0.70711 -1.81265,-1.20681 -4,-3c-2.78833,-2.28588 -3.64749,-2.97251 -8,-4c-2.91975,-0.68926 -4.82375,-2.48626 -7,-3c-2.91975,-0.68926 -5.15224,-0.23463 -7,-1c-1.30656,-0.5412 -4.38687,-1.91761 -7,-3c-1.84776,-0.76537 -5.03609,0.37821 -7,0c-5.28799,-1.01837 -8,-3 -9,-3c-2,0 -5.0535,-0.54049 -7,-1c-2.17625,-0.51374 -4.15224,-0.23463 -6,-1c-1.30656,-0.54119 -3,-1 -4,-1c-2,0 -5,-1 -6,-1c-1,0 -3,-2 -6,-2c-2,0 -5,-2 -6,-2c-2,0 -2.02583,-0.67963 -4,-1c-3.12144,-0.50654 -4.15224,-0.23463 -6,-1c-1.30656,-0.54119 -2,-1 -3,-1c-2,0 -3,0 -5,0c-1,0 -2,0 -3,0c-1,0 -2,0 -3,0c-1,0 -2,0 -3,0c-2,0 -3.85273,0.1731 -5,1c-1.81399,1.30745 -5.18601,1.69255 -7,3c-1.14727,0.8269 -1.82375,2.48626 -4,3c-0.97325,0.22975 -1.69344,1.45881 -3,2c-0.92388,0.38268 -1.45951,1.0535 -1,3c0.51374,2.17625 3.07844,2.78985 6,4c2.06586,0.85571 3.38688,1.91761 6,3c1.84776,0.76537 5.2987,-1.05146 7,0c1.90211,1.17557 3.82375,2.48626 6,3c0.97325,0.22975 3.29289,0.29289 4,1c0.70711,0.70711 4,2 9,4c5,2 8,4 11,4c2,0 5,0 7,0c3,0 5,0 7,0c2,0 4,0 7,0c2,0 4,0 8,0c3,0 7,0 10,0c4,0 7,0 12,0c3,0 5,0 6,0c2,0 3,0 5,0c1,0 1.09789,-0.82443 3,-2c0.85065,-0.52573 3.07613,0.38268 4,0c1.30656,-0.5412 0.71022,-2.04291 1,-3c1.04483,-3.45084 2.84723,-5.04132 4,-9c0.88414,-3.03616 1.85194,-5.22836 3,-8c0.5412,-1.30656 1.5405,-2.0535 2,-4c0.51375,-2.17625 2.71413,-4.21167 5,-7c2.68979,-3.28101 4,-6 5,-7c1,-1 2,-2 2,-4c0,-1 0.70711,-2.29289 0,-3c-0.70711,-0.70711 -2.07613,0.38268 -3,0c-1.30656,-0.54119 -2,-1 -4,-1c-3,0 -6.87856,-2.49346 -10,-3c-2.96126,-0.48055 -6.71201,-0.98162 -12,-2c-2.94586,-0.56732 -5,-1 -9,-1c-3,0 -6,-1 -8,-1c-2,0 -5,-3 -7,-3c-2,0 -5.38687,-0.91761 -8,-2c-0.92388,-0.38268 -3.0535,-0.54049 -5,-1c-2.17625,-0.51374 -4.58578,0.41421 -6,-1c-0.70711,-0.70711 -1,-1 -2,-1c-1,0 -2,0 -3,0c-1,0 -2,0 -4,0c-1,0 -2,0 -3,0c-1,0 -2,0 -4,0c-1,0 -2,0 -3,0c-2,0 -3,0 -5,0c-1,0 -2,0 -3,0c-1,0 -3,0 -4,0c-3,0 -5,0 -7,0c-2,0 -4,0 -6,0c-2,0 -3,0 -5,0c-1,0 -2,0 -3,0c-2,0 -4,0 -5,0c-1,0 -2,0 -4,0c-1,0 -2,0 -3,1l-1,0" id="svg_1" stroke-width="5" stroke="#000000" fill="none"/>
</g>
</svg>
最佳答案
此答案中列出了三种技术:
有一个全 SVG 解决方案,涉及逐步修改形状的 stroke-dasharray
以绘制越来越长的“破折号”,然后是一个巨大的间隙。
相关代码:
var distancePerPoint = 1;
var drawFPS = 60;
var orig = document.querySelector('path'), length, timer;
orig.addEventListener('mouseover',startDrawingPath,false);
orig.addEventListener('mouseout', stopDrawingPath, false);
function startDrawingPath(){
length = 0;
orig.style.stroke = '#f60';
timer = setInterval(increaseLength,1000/drawFPS);
}
function increaseLength(){
var pathLength = orig.getTotalLength();
length += distancePerPoint;
orig.style.strokeDasharray = [length,pathLength].join(' ');
if (length >= pathLength) clearInterval(timer);
}
function stopDrawingPath(){
clearInterval(timer);
orig.style.stroke = '';
orig.style.strokeDasharray = '';
}
或者,您仍然可以使用所有 SVG 并选择一次一个命令构建 SVG 路径:
相关代码:
// Assumes 'orig' and dup' are SVG paths
function addNextPathSegment(){
var nextIndex = dup.pathSegList.numberOfItems;
if (nextIndex<orig.pathSegList.numberOfItems){
var nextSegment = orig.pathSegList.getItem(nextIndex);
var segmentDup = cloneSVGPathSeg( dup, nextSegment );
dup.pathSegList.appendItem( segmentDup );
}
}
function cloneSVGPathSeg( path, seg ){
switch(seg.pathSegTypeAsLetter){
case 'M': return path.createSVGPathSegMovetoAbs(seg.x,seg.y); break;
case 'm': return path.createSVGPathSegMovetoRel(seg.x,seg.y); break;
case 'L': return path.createSVGPathSegLinetoAbs(seg.x,seg.y); break;
case 'l': return path.createSVGPathSegLinetoRel(seg.x,seg.y); break;
case 'H': return path.createSVGPathSegLinetoHorizontalAbs(seg.x); break;
case 'h': return path.createSVGPathSegLinetoHorizontalRel(seg.x); break;
case 'V': return path.createSVGPathSegLinetoVerticalAbs(seg.y); break;
case 'v': return path.createSVGPathSegLinetoVerticalRel(seg.y); break;
case 'C': return path.createSVGPathSegCurvetoCubicAbs(seg.x,seg.y,seg.x1,seg.y1,seg.x2,seg.y2); break;
case 'c': return path.createSVGPathSegCurvetoCubicRel(seg.x,seg.y,seg.x1,seg.y1,seg.x2,seg.y2); break;
case 'S': return path.createSVGPathSegCurvetoCubicSmoothAbs(seg.x,seg.y,seg.x2,seg.y2); break;
case 's': return path.createSVGPathSegCurvetoCubicSmoothRel(seg.x,seg.y,seg.x2,seg.y2); break;
case 'Q': return path.createSVGPathSegCurvetoQuadraticAbs(seg.x,seg.y,seg.x1,seg.y1); break;
case 'q': return path.createSVGPathSegCurvetoQuadraticRel(seg.x,seg.y,seg.x1,seg.y1); break;
case 'T': return path.createSVGPathSegCurvetoQuadraticSmoothAbs(seg.x,seg.y); break;
case 't': return path.createSVGPathSegCurvetoQuadraticSmoothRel(seg.x,seg.y); break;
case 'A': return path.createSVGPathSegArcAbs(seg.x,seg.y,seg.r1,seg.r2,seg.angle,seg.largeArcFlag,seg.sweepFlag); break;
case 'a': return path.createSVGPathSegArcRel(seg.x,seg.y,seg.r1,seg.r2,seg.angle,seg.largeArcFlag,seg.sweepFlag); break;
case 'z':
case 'Z': return path.createSVGPathSegClosePath(); break;
}
}
最后,您可以选择通过定期采样 SVG 路径并绘制到 Canvas 来将路径绘制到 HTML5 Canvas 。 (请注意,不需要显示 SVG 路径即可发生这种情况;您可以完全在 JavaScript 中构建 SVG 路径元素并对其进行采样):
相关代码:
function startDrawingPath(){
points = [];
timer = setInterval(buildPath,1000/drawFPS);
}
// Assumes that 'orig' is an SVG path
function buildPath(){
var nextPoint = points.length * distancePerPoint;
var pathLength = orig.getTotalLength();
if (nextPoint <= pathLength){
points.push(orig.getPointAtLength(nextPoint));
redrawCanvas();
} else stopDrawingPath();
}
function redrawCanvas(){
clearCanvas();
ctx.beginPath();
ctx.moveTo(points[0].x,points[0].y);
for (var i=1;i<points.length;i++) ctx.lineTo(points[i].x,points[i].y);
ctx.stroke();
}
关于javascript - 如何为 svg 路径的渐进式绘图设置动画?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14275249/
BufferedImage image = ImageIO.read(SpriteSheet.class.getResource(path)); BufferedImage image = Image
希望有人能够帮助我解决将我的 React 应用程序推送到 Heroku 时遇到的问题。 heroku 日志反复显示以下错误。 at=error code=H10 desc="App crashed"
我是 Kotlin 的新手,我正在经历这样的例子。 . . package com.example.lambda1 import spark.Spark.get fun main(args: Arra
如果您已经安装了 32 位 JDK,请在中定义一个 JAVA_HOME 变量 Computer>System Properties>System Setting>Enviorment VAriable
我正在开发一个独立于平台的应用程序。我收到一个文件 URL*。在 Windows 上,这些是: file:///Z:/folder%20to%20file/file.txt file://host/f
我在 OSX、Objective-C 上。 我有一个像 这样的路径/NSURL /Users/xxx/Desktop/image2.png 但我将它传递给第三方应用程序,该应用程序会像 excpect
我已经安装了 Android studio 和插件的 DART,FLUTTER 来启动 flutter,但是因为我在创建我的第一个 flutter 项目时无法提供 sdk 路径。 最佳答案 我试图找出
127.0.0.1:8000/api/仅包含来自第二个应用程序的 url,但我将两个 url 模块链接到相同的模式。甚至有可能做到这一点吗? 第一个应用程序: from django.urls imp
对于大量图像(大约 1k,加上相同数量的拇指,在大约 500 个文件夹中),我们要求网站上使用的所有图像 URI 都必须具有 SEO 优化路径。它们已经准备好并提供完整的路径结构(每个文件夹包含一个具
为什么 f 不是一个文件?什么可能导致这种情况? String currentPhotoPath = "file:/storage/sdcard0/Pictures/someFileName.
Gradle 中的项目名称或路径中允许使用哪些字符? 它是否与特定操作系统的目录名称中允许的字符相同(例如: http://en.wikipedia.org/wiki/Filename#Reserve
我有一个包含文件夹路径的表格。我需要找到层次结构中这些文件夹之间的所有“差距”。我的意思是,如果表格包含这 3 个文件夹: 'A' 'A\B\C' 'A\B\C\D\E\F\G' 我需要在层次结构中找
我在 Linux 服务器上的/home/subversion 中安装了 svn - 那里有一个 ROOT 文件夹,其中包含 db 和 conf 等文件夹。没有映射到项目名称的文件夹,请有人告诉我如何列
对于我的图像位置:/src/assets/bitmap/sample.jpg 给出了关键配置: context: resolve('src') output: { path: resolve('b
我需要创建带有圆角的 SVG 路径,以将它们导出到 DXF 进行切割。我的问题是角应该是圆弧,而不是贝塞尔曲线。 使用 arc 命令相对容易处理直角,因为半径也是从拐角到圆弧起点的距离。对于其他角度,
大家好,我正在玩 Airflow,我正在阅读这篇很有帮助的 tutorial .我正在寻求帮助以更好地了解 Admin->Connection 如何在 Conn Type: File (path) 方
我的目标是定义R将用于安装和搜索库的单个路径。我read可以通过更改Rprofile.site安装路径中的R文件来完成。我在那里尝试了两个命令: .libPaths("D:/RLibrary") .L
我有一个问题:当我在一个页面中时,我想返回到上一页。我使用 $routeProvider。如何读取之前的 url? 我尝试在我的 Controller 中使用此代码但不起作用... angular.m
我正在尝试将一个文件从我的主干合并到一个分支(wc),并且对于看起来位于当前合并操作中不涉及的分支上的路径出现奇怪的未找到路径错误。 例如,在我们的 svn 项目中,我们有: 分行 分支 0 分支 1
我有一个树数据序列化如下: 关系:P到C是“一对多”,C到P是“一对一”。所以列 P 可能有重复的值,但列 C 有唯一的值。 P, C 1, 2 1, 3 3, 4 2, 5 4, 6 # in da
我是一名优秀的程序员,十分优秀!