马黑黑 发表于 2025-8-28 13:30

pencil code 之 svgdr支持版

本帖最后由 马黑黑 于 2025-8-28 13:32 编辑

马黑整站系统站点（http://mhh.52qingyin.cn/）提供了若干个版本的 HTML代码在线编辑器 pencil code，其中有一个是 svgdr 支持版。在其上创建和运行 svgdr 只需要两步：


第一步：创建 svg 标签。在编辑器确定插入svg标签的地方，点编辑器上方靠左的 +html 菜单，在弹出的子项菜单中选取 svg，svg 标签就成功创建，有宽高和 viewBox 属性，若值不是自己所需要的改一下即可；

第二步：创建导入模块JS代码。在编辑器确定好插入JS标签的地方，点编辑器上方靠左的 +js 菜单，在弹出的子菜单中选取 js标签，完整的、包含模块导入和创建画笔的JS标签就会成功创建。

然后就可以用 dr 画笔进行 svgdr 的绘图工作了，例如画一个圆：

dr.circle(200, 200, 180, 'pink', 'purple', 4);

然后点击编辑器右上方的 运行代码 按钮，就可以看到作品的效果。而编辑器中的代码，可以直接复制到其它作品中使用，当如要做一些必要的适配编辑操作（例如整合HTML代码、JS代码，可能还有CSS代码等）。

也可以将上述生成的代码复制到其它版本的 pencil code 编辑器去运行。另外，svgdr 还有一个简单易用的在线绘图工具：svgdr on line 或者 SVG DRAWER，它们更合适制作不太复杂的svg图像，并能从中拿到作品的完整 svg 代码。

以上小工具链接均可在整站系统站点首页网站公告栏中找到。

梦江南 发表于 2025-8-28 16:12

谢谢黑黑老师，学习了。

杨帆 发表于 2025-8-28 16:34

大爱无疆，功德无量，谢谢马老师经典分享{:4_191:}

马黑黑 发表于 2025-8-28 17:01

梦江南 发表于 2025-8-28 16:12
谢谢黑黑老师，学习了。

svg 不好学；svgdr 是我将svg的绘图指令大致封装了一下，使用它得先会一点点的svg，不然就是瞎子摸象。

马黑黑 发表于 2025-8-28 17:01

杨帆 发表于 2025-8-28 16:34
大爱无疆，功德无量，谢谢马老师经典分享

这个其实早有的

杨帆 发表于 2025-8-28 19:42

马黑黑 发表于 2025-8-28 17:01
这个其实早有的

厉害！我之前未注意呢{:4_173:}

红影 发表于 2025-8-28 20:34

在工具中比较着 svgdr和svg代码，才回忆起黑黑封装的内容，这个封装让svg的绘制变得代码很少{:4_199:}

红影 发表于 2025-8-28 20:36

http://mhh.52qingyin.cn/api/svgdr/
这个学习资料更好，应该没事就去看看，特别实用{:4_199:}

小辣椒 发表于 2025-8-28 21:52

这个编辑器我记得以前看过，不过现在忘记得一干二净了{:4_198:}

马黑黑 发表于 2025-8-28 22:11

小辣椒 发表于 2025-8-28 21:52
这个编辑器我记得以前看过，不过现在忘记得一干二净了

正常的

马黑黑 发表于 2025-8-28 22:12

红影 发表于 2025-8-28 20:36
http://mhh.52qingyin.cn/api/svgdr/
这个学习资料更好，应该没事就去看看，特别实用

东西太多，需要一些提示。不过懂的都懂，熟悉svg的话，用 svgdr 更容易上手

马黑黑 发表于 2025-8-28 22:13

红影 发表于 2025-8-28 20:34
在工具中比较着 svgdr和svg代码，才回忆起黑黑封装的内容，这个封装让svg的绘制变得代码很少

目的就是叫可能简化svg

雨中悄然 发表于 2025-8-28 23:35

<p>&lt;svg id="msvg" width="400" height="400" viewBox="0 0 400 400"&gt;&lt;/svg&gt;</p><p>&lt;script type="module"&gt;</p><p><span style="white-space: normal;"><span style="white-space:pre">        </span>import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';</span></p><p><span style="white-space: normal;"><span style="white-space:pre">        </span>var dr = Dr.dr(msvg);</span></p><p><span style="white-space: normal;"><span style="white-space:pre">        </span>dr.circle(200, 200, 180, 'pink', 'purple', 4);</span></p><p>&lt;/script&gt;</p><p><br></p><p>不说没用过，按提示跑一遍才发现预设很多东东。。</p><p>平时只用来编音画是浪费了{:4_173:}</p><p></p>

马黑黑 发表于 2025-8-28 23:36

雨中悄然 发表于 2025-8-28 23:35
&lt;svg id="msvg" width="400" height="400" viewBox="0 0 400 400"&gt;&lt;/svg&gt;&lt;script type="module" ...

svgdr支持版早就有了

花飞飞 发表于 2025-8-29 09:46

马黑黑 发表于 2025-8-28 23:36
svgdr支持版早就有了
还是使用习惯的问题

马黑黑 发表于 2025-8-29 12:05

花飞飞 发表于 2025-8-29 09:46
还是使用习惯的问题

各有各的习惯

红影 发表于 2025-8-29 14:35

马黑黑 发表于 2025-8-28 22:12
东西太多，需要一些提示。不过懂的都懂，熟悉svg的话，用 svgdr 更容易上手

想使用 svgdr ，必须知道里面的约定呢。

红影 发表于 2025-8-29 14:36

马黑黑 发表于 2025-8-28 22:13
目的就是叫可能简化svg

是的，这个简化还是很方便的{:4_187:}

马黑黑 发表于 2025-8-29 19:41

红影 发表于 2025-8-29 14:36
是的，这个简化还是很方便的

也方便学习svg

马黑黑 发表于 2025-8-29 19:41

红影 发表于 2025-8-29 14:35
想使用 svgdr ，必须知道里面的约定呢。

可以查询
页: [1] 2 3
查看完整版本: pencil code 之 svgdr支持版