svgdr在线工具候选版
为了测试 svgdr，svgdr 开发之初就写了svgdr在线工具：SVG DRAWER这两天又写一个：svgdr on line
这两个现在都是候选版本，它们的实现机制有所不同，哪一个更好现在也说不准，用着再说，或许两个都可以维护下去。
使用方法：不用引入 svgdr 资源，已经集成有了，直接输入 dr.xxx() 即可。下面的代码可以拿去试试：
dr.setsvg({width: 400, height: 400, viewBox: '-200 -200 400 400'});
var tt = 20;
for(var i = 0; i < tt; i ++) {
var color = '#' + Math.random().toString(16).substring(2,8);
dr.polyline('-15 -190, 0 0, 15 -190','none',color,'8')
.set('transform', `rotate(${360 / tt * i})`)
.set('stroke-dasharray', '8 4');
dr.animate('animate', {
attributeName: 'stroke-dashoffset',
to: 380,
dur: '6s',
repeatCount: 'indefinite',
});
}这组代码，第一句是根据后面的绘制需求，设置一下svg的宽高属性和 viewBox 属性，没有这个需求的绘制工作可以不要这句。后面就是绘制 20 个折线，给折线上随机颜色，每根折线旋转一定角度，然后给每根折线都加一个相同的动画：利用 stroke-dasharray 和 stroke-dashoffset 来实现。
这样实现的动画其实不主张，这里只是为了测试在线工具的工作状况。相同的动画，可以使用CSS来简单实现。
本帖最后由 马黑黑 于 2024-11-7 23:46 编辑
下面这组代码是最初的百鸟归巢小播图案的设计，也可以拿去在线工具试一下：
dr.setsvg({width: 200, height: 200});
var all = 12;
for(var i = 0; i < all; i ++) {
dr.path('M60 180 Q100 0,140 180', 'none', 'gray', 8, 'round').transform(`rotate(${360 / all * i} 100 100)`);
}两个在线工具都有记忆能力，下一回打开它们，上一次的运行内容还在。
谢谢老师辛苦，早上好！{:4_190:} 马黑黑 发表于 2024-11-7 23:09
下面这组代码是最初的百鸟归巢小播图案的设计，也可以拿去在线工具试一下：
两个在线工具都有记忆能力，下 ...
测试过了非常好用。{:4_199:} 去试了一下，非常好。黑黑厉害，这么短时间就开发出这么实用的工具{:4_199:} 那个折线的特别漂亮，开始以为是直线做的呢，原来是为了动态而设计的折线，这样的折线让临近虚线的小点点一进一出，带来错落有致奇妙的效果{:4_199:} 红影 发表于 2024-11-8 12:48
那个折线的特别漂亮，开始以为是直线做的呢，原来是为了动态而设计的折线，这样的折线让临近虚线的小点点一 ...
直线也可以，折线给虚线的变化带来更丰富的效果 候选一是等待奇迹，候选二是奇迹出现{:4_173:} 一代又一代的研发，真是太赞了。。
试了一下一楼的图案，动态的，漂亮的耀眼，最近的颜色都没那么暗沉，是经过美颜了吧。
不过看了半天不知道动画里那个 to: 380,是啥意思。。对接是哪一个。。{:4_173:} 花飞飞 发表于 2024-11-8 20:26
一代又一代的研发，真是太赞了。。
试了一下一楼的图案，动态的，漂亮的耀眼，最近的颜色都没那么暗沉，是 ...
stroke-dasharray ：虚线长度、间隔数组设置
stroke-dashoffset ：虚线离路径起点距离
stroke-dashoffset 如果设定对象的是路径，最好获得路径总长度，如果是其他形态（折线、矩形、文本等），给个靠谱一点的值也行 花飞飞 发表于 2024-11-8 20:16
候选一是等待奇迹，候选二是奇迹出现
二者有很多相似处，但不尽相同，后者在渲染 svgdr 的稳定性层面是比较强的 马黑黑 发表于 2024-11-8 21:10
stroke-dasharray ：虚线长度、间隔数组设置
stroke-dashoffset ：虚线离路径起点距离
就是总长度变化然后虚线长度和间隔也会跟着变化的意思。。有点明白了，但不知对不对。 马黑黑 发表于 2024-11-8 21:11
二者有很多相似处，但不尽相同，后者在渲染 svgdr 的稳定性层面是比较强的
既然有了一的情况下，还让你整出个二来，必然有它的不可代替之处。。
目前它们的关系是并列的吧。。。谁也不可能完全代替谁。 马黑黑 发表于 2024-11-8 18:15
直线也可以，折线给虚线的变化带来更丰富的效果
直线就一个方向运动了啊，这样相邻的折线，就有相反运动的奇妙感受{:4_187:} 红影 发表于 2024-11-8 23:55
直线就一个方向运动了啊，这样相邻的折线，就有相反运动的奇妙感受
对的 花飞飞 发表于 2024-11-8 22:42
就是总长度变化然后虚线长度和间隔也会跟着变化的意思。。有点明白了，但不知对不对。
如果只是需要一个虚线在动的效果，随便是一个数然后修正一下就行，效果都会出来。如果需要用线段来表达进度什么的，那就得计算线段的总长度
马黑黑 发表于 2024-11-9 07:09
如果只是需要一个虚线在动的效果，随便是一个数然后修正一下就行，效果都会出来。如果需要用线段来表达进 ...
虚线随意动动就好了~~
表达进度线段长度跟时间长度又要匹配。。。那个计算么更复杂。。。{:4_173:} 花飞飞 发表于 2024-11-9 10:56
虚线随意动动就好了~~
表达进度线段长度跟时间长度又要匹配。。。那个计算么更复杂。。。
是数学问题而已 马黑黑 发表于 2024-11-9 11:01
是数学问题而已
数学抽象又美丽的世界 花飞飞 发表于 2024-11-9 18:39
数学抽象又美丽的世界
{:4_181:}
页:
[1]
2