SVG Drawer预览版及其文档

马黑黑

SVG Drawer 是最近写的一个 SVG 插件，相比大咖级别的 SVGJS 等专业产品，我这个根本不值一提。这可能仅仅是出于对 SVG 的兴趣，觉得SVG代码的书写过于繁琐，在编写SVG代码时经常使用 JS 完成部分工作，久而久之就萌生封装一个相对全面的东东的念头，为的是自己写SVG代码时可以更省事一些。

由于时间、精力、水平等关系，写的比较慢，有很多JS问题以及SVG的相关知识点需要梳理。尽然如此，半成品也可以分享一下。

文档的编写和开发不太可能同步进行，所以当下的文档有些滞后，目前已经整理了一部分，随后会逐渐更新。地址如下：

SVG Drawer 文档

文档的左上角有一个在线工具链接，链接指向就是 SVG Drawer 在线工具，该工具已经声明了 SVG画笔 dr，直接使用 dr 指令就可以在SVG画布上绘制图像，例如要画一个圆，直接输入如下代码，然后点击“运行代码”按钮就成，就这么简单：

dr.circle(100, 100, 50, 'red');

可以通过文档慢慢熟悉 SVG Drawer 指令顺带学习 SVG 相关知识：各种指令都有相应说明，在线绘制工具还提供当前绘制元素的代码和完整SVG代码。

SVG的知识点还是十分琐碎繁杂的，通过 SVG Drawer 文档的帮助可能有助于学习 SVG，但这远远不够，还需要通过查阅资料慢慢熟悉 SVG；对 SVG 的熟悉程度越高，使用 SVG Drawer 就会越顺手。

红影

这个用来学习真好。
先去看了一下各种指令的参数，以及所有指令参数，不论是否用完参数均需要按次序排列。

马黑黑

红影 发表于 2024-10-16 23:15
这个用来学习真好。
先去看了一下各种指令的参数，以及所有指令参数，不论是否用完参数均需要按次序排列。

对。比如有 123456789 个参数，如果不想用完但要用一部分，比如前三个：

    dr.指令(1,2,3);

不能跳跃。又想用第八个，可以用 set 指令追加，假设——仅仅是假设第八个是属性 mygod ：

    dr.指令(1,2,3).set('mygod', '100%');

马黑黑

醉美水芙蓉 发表于 2024-10-16 23:11
黑黑老师大工程呀！老师辛苦了！

红影

左上角的在线工具链接，还能直接看到代码运行效果，在效果里还能继续修改，感受各种修改带来的变化，更好地理解各个参数的内容。

红影

line 指令最多可以拥有 x1, y1, x2, y2, stroke, stroke-width, stroke-linecap 等7个参数。
对stroke-linecap不熟悉，原来它是线帽，有三个选项：butt 、round 、 square，顶头圆头和方头

红影

马黑黑 发表于 2024-10-16 23:19
对。比如有 123456789 个参数，如果不想用完但要用一部分，比如前三个：

    dr.指令(1,2,3);

这个添加好，可以跳浜使用参数了

红影

polyline 预设有 points, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin 共6个参数

同样的对stroke-linejoin不熟，原来是线条交叉点的外观，同样三个选项：miter、 round 、 bevel 箭头圆头平头。这个居然分得这么细致呢。有线帽端头还有交叉点端头。都去试了一下演示效果，还挺明显的。

梦江南

SVG Drawer是当前最高技术了，老师太厉害了！

红影

文本的内容比较多，虽然没全部封装，但还有那么多可以用 style、set 等指令添加的。
那个偏移没看懂，去试了一下，怎么第一个字没动 ，剩下的文字偏移了？

红影

set()属性设置厉害，可以设置不同内容。旋转是每个字的自身转呢。
还能连着用多个 set()

红影

tspan 子文本还是第一次看到。它只对text对象有效。这个封装得比较多了。
在tspan 子文本里的偏移倒是整体文本一起偏移的。

马黑黑

红影 发表于 2024-10-17 11:13
tspan 子文本还是第一次看到。它只对text对象有效。这个封装得比较多了。
在tspan 子文本里的偏移倒是整体 ...

tspan独立控制文本，它的 x、y 属性不是text设置的x、y属性的影响

马黑黑

红影 发表于 2024-10-17 11:06
set()属性设置厉害，可以设置不同内容。旋转是每个字的自身转呢。
还能连着用多个 set()

还有一个万能绘制指令 dr.draw()，已经更新，在指令汇总那里

马黑黑

醉美水芙蓉 发表于 2024-10-16 23:11
黑黑老师大工程呀！老师辛苦了！

玩玩

马黑黑

红影 发表于 2024-10-17 11:00
文本的内容比较多，虽然没全部封装，但还有那么多可以用 style、set 等指令添加的。
那个偏移没看懂，去试 ...

text 的 dx 或 dy 可以是单值或多值，例如：

设置 dy = 10 ，这将对整体进行偏移，例如，y=10 时，那么，现在的 text 基线垂直方向是 10 + 10 = 20 了。


设置 dy = 0 5 5 -5 ，这时 0对应第一个字，第一个字不偏移因为是 0，5对应第二个字，第二个字偏移　０＋５＝５，第三个数 ５ 对应第三个字，偏移 0+5+5=10，其余依次类推，用完了值后，后面的字保持最后的总偏移量

马黑黑

梦江南 发表于 2024-10-17 10:17
SVG Drawer是当前最高技术了，老师太厉害了！

果酱了，玩玩而已

红影

马黑黑 发表于 2024-10-18 18:17
tspan独立控制文本，它的 x、y 属性不是text设置的x、y属性的影响

这个子文本还挺特立独行的呢

红影

马黑黑 发表于 2024-10-18 18:18
还有一个万能绘制指令 dr.draw()，已经更新，在指令汇总那里

哦，已经更新了啊，前面去看这块还是空的。嗯，我去看看