svgdr在线工具候选版

马黑黑

为了测试 svgdr，svgdr 开发之初就写了svgdr在线工具：SVG DRAWER

这两天又写一个：svgdr on line

这两个现在都是候选版本，它们的实现机制有所不同，哪一个更好现在也说不准，用着再说，或许两个都可以维护下去。

使用方法：不用引入 svgdr 资源，已经集成有了，直接输入 dr.xxx() 即可。下面的代码可以拿去试试：

1. dr.setsvg({width: 400, height: 400, viewBox: '-200 -200 400 400'});
   
2. var tt = 20;
   
3. for(var i = 0; i < tt; i ++) {
   
4.         var color = '#' + Math.random().toString(16).substring(2,8);
   
5.         dr.polyline('-15 -190, 0 0, 15 -190','none',color,'8')
   
6.           .set('transform', `rotate(${360 / tt * i})`)
   
7.           .set('stroke-dasharray', '8 4');
   
8.         dr.animate('animate', {
   
9.                 attributeName: 'stroke-dashoffset',
   
10.                 to: 380,
    
11.                 dur: '6s',
    
12.                 repeatCount: 'indefinite',
    
13.         });
    
14. }

复制代码

这组代码，第一句是根据后面的绘制需求，设置一下svg的宽高属性和 viewBox 属性，没有这个需求的绘制工作可以不要这句。后面就是绘制 20 个折线，给折线上随机颜色，每根折线旋转一定角度，然后给每根折线都加一个相同的动画：利用 stroke-dasharray 和 stroke-dashoffset 来实现。

这样实现的动画其实不主张，这里只是为了测试在线工具的工作状况。相同的动画，可以使用CSS来简单实现。

马黑黑

下面这组代码是最初的百鸟归巢小播图案的设计，也可以拿去在线工具试一下：

1. dr.setsvg({width: 200, height: 200});
   
2. var all = 12;
   
3. for(var i = 0; i < all; i ++) {
   
4.     dr.path('M60 180 Q100 0,140 180', 'none', 'gray', 8, 'round').transform(`rotate(${360 / all * i} 100 100)`);
   
5. }

复制代码

两个在线工具都有记忆能力，下一回打开它们，上一次的运行内容还在。

梦江南

谢谢老师辛苦，早上好！

梦江南

马黑黑 发表于 2024-11-7 23:09
下面这组代码是最初的百鸟归巢小播图案的设计，也可以拿去在线工具试一下：
两个在线工具都有记忆能力，下 ...

测试过了非常好用。

红影

去试了一下，非常好。黑黑厉害，这么短时间就开发出这么实用的工具

红影

那个折线的特别漂亮，开始以为是直线做的呢，原来是为了动态而设计的折线，这样的折线让临近虚线的小点点一进一出，带来错落有致奇妙的效果

马黑黑

红影 发表于 2024-11-8 12:48
那个折线的特别漂亮，开始以为是直线做的呢，原来是为了动态而设计的折线，这样的折线让临近虚线的小点点一 ...

直线也可以，折线给虚线的变化带来更丰富的效果

花飞飞

候选一是等待奇迹，候选二是奇迹出现

花飞飞

一代又一代的研发，真是太赞了。。
试了一下一楼的图案，动态的，漂亮的耀眼，最近的颜色都没那么暗沉，是经过美颜了吧。
不过看了半天不知道动画里那个 to: 380,是啥意思。。对接是哪一个。。

马黑黑

花飞飞 发表于 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
直线也可以，折线给虚线的变化带来更丰富的效果

直线就一个方向运动了啊，这样相邻的折线，就有相反运动的奇妙感受

马黑黑

红影 发表于 2024-11-8 23:55
直线就一个方向运动了啊，这样相邻的折线，就有相反运动的奇妙感受

对的

马黑黑

花飞飞 发表于 2024-11-8 22:42
就是总长度变化然后虚线长度和间隔也会跟着变化的意思。。有点明白了，但不知对不对。

如果只是需要一个虚线在动的效果，随便是一个数然后修正一下就行，效果都会出来。如果需要用线段来表达进度什么的，那就得计算线段的总长度

花飞飞

马黑黑 发表于 2024-11-9 07:09
如果只是需要一个虚线在动的效果，随便是一个数然后修正一下就行，效果都会出来。如果需要用线段来表达进 ...

虚线随意动动就好了~~
表达进度线段长度跟时间长度又要匹配。。。那个计算么更复杂。。。

马黑黑

花飞飞 发表于 2024-11-9 10:56
虚线随意动动就好了~~
表达进度线段长度跟时间长度又要匹配。。。那个计算么更复杂。。。

是数学问题而已

花飞飞

马黑黑 发表于 2024-11-9 11:01
是数学问题而已

数学抽象又美丽的世界

马黑黑

花飞飞 发表于 2024-11-9 18:39
数学抽象又美丽的世界