设为首页收藏本站
开启辅助访问 切换到宽版 登录 立即注册 QQ登录

花潮论坛

搜索
热搜: 活动 交友 discuz
123下一页
返回列表 发新帖
查看: 78|回复: 52

pencil code 之 svgdr支持版

[复制链接]
马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
    发表于 2025-8-28 13:30 | 显示全部楼层 |阅读模式

    请马上登录，朋友们都在花潮里等着你哦：）

    您需要 登录 才可以下载或查看，没有账号？立即注册

    x
    本帖最后由 马黑黑 于 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 代码。

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

    评分

    参与人数 5威望 +190 金钱 +380 经验 +190 收起 理由
    雨中悄然 + 30 + 60 + 30 很给力!
    小辣椒 + 50 + 100 + 50 赞一个!
    红影 + 50 + 100 + 50 赞一个!
    杨帆 + 30 + 60 + 30 很给力!
    梦江南 + 30 + 60 + 30 很给力!

    查看全部评分

    回复

    使用道具 举报

    梦江南
  • TA的每日心情
    开心
    2025-11-27 09:01

    • 签到天数: 591 天

    [LV.9]以坛为家II

    377

    主题

    1万

    回帖

    3万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪缤纷心情心曲飞扬花好月圆飞龙在天音画大师花潮贵宾
    发表于 2025-8-28 16:12 | 显示全部楼层
    谢谢黑黑老师，学习了。
    回复 支持 反对

    使用道具 举报

    杨帆
  • TA的每日心情
    奋斗
    2025-11-30 00:22

    • 签到天数: 380 天

    [LV.9]以坛为家II

    297

    主题

    2548

    回帖

    1万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生鹰傲苍穹飞龙在天王者至尊大将风范花潮版主
    发表于 2025-8-28 16:34 | 显示全部楼层
    大爱无疆，功德无量，谢谢马老师经典分享
    ★青春是一个人的精神生命，奋斗是一个人最大的体面，学习是一个人最美的姿态。
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-28 17:01 | 显示全部楼层
    梦江南 发表于 2025-8-28 16:12
    谢谢黑黑老师，学习了。

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

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-28 17:01 | 显示全部楼层
    杨帆 发表于 2025-8-28 16:34
    大爱无疆，功德无量，谢谢马老师经典分享

    这个其实早有的
    回复 支持 反对

    使用道具 举报

    杨帆
  • TA的每日心情
    奋斗
    2025-11-30 00:22

    • 签到天数: 380 天

    [LV.9]以坛为家II

    297

    主题

    2548

    回帖

    1万

    积分

    版主

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生鹰傲苍穹飞龙在天王者至尊大将风范花潮版主
    发表于 2025-8-28 19:42 | 显示全部楼层
    马黑黑 发表于 2025-8-28 17:01
    这个其实早有的

    厉害！我之前未注意呢
    ★青春是一个人的精神生命，奋斗是一个人最大的体面，学习是一个人最美的姿态。
    回复 支持 反对

    使用道具 举报

    红影
  • TA的每日心情
    开心
    2025-11-17 10:56

    • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析（喊冤）章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理
    发表于 2025-8-28 20:34 | 显示全部楼层
    在工具中比较着 svgdr和svg代码，才回忆起黑黑封装的内容，这个封装让svg的绘制变得代码很少
    　
    回复 支持 反对

    使用道具 举报

    红影
  • TA的每日心情
    开心
    2025-11-17 10:56

    • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析（喊冤）章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理
    发表于 2025-8-28 20:36 | 显示全部楼层
    http://mhh.52qingyin.cn/api/svgdr/
    这个学习资料更好，应该没事就去看看，特别实用
    　
    回复 支持 反对

    使用道具 举报

    小辣椒
  • TA的每日心情
    开心
    2019-11-25 21:11

    • 签到天数: 1 天

    [LV.1]初来乍到

    1420

    主题

    6万

    回帖

    12万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀青草情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀男儿情怀鹰傲苍穹心香一瓣音画大师天籁妙音风雨同行我心永远喜乐安康中秋征文指尖上的流年花潮管理
    发表于 2025-8-28 21:52 | 显示全部楼层
    这个编辑器我记得以前看过，不过现在忘记得一干二净了
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-28 22:11 | 显示全部楼层
    小辣椒 发表于 2025-8-28 21:52
    这个编辑器我记得以前看过，不过现在忘记得一干二净了

    正常的
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-28 22:12 | 显示全部楼层
    红影 发表于 2025-8-28 20:36
    http://mhh.52qingyin.cn/api/svgdr/
    这个学习资料更好，应该没事就去看看，特别实用

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

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-28 22:13 | 显示全部楼层
    红影 发表于 2025-8-28 20:34
    在工具中比较着 svgdr和svg代码，才回忆起黑黑封装的内容，这个封装让svg的绘制变得代码很少

    目的就是叫可能简化svg
    回复 支持 反对

    使用道具 举报

    雨中悄然
  • TA的每日心情
    开心
    2023-5-16 12:23

    • 签到天数: 35 天

    [LV.5]常住居民I

    65

    主题

    3377

    回帖

    1万

    积分

    论坛元老

    Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80Rank: 80

    花潮美女鼠牛虎兔龙蛇马羊猴鸡狗猪相遇之美心香一瓣金剪刀音画大师风雨同行我心永远绚丽缤纷
    发表于 2025-8-28 23:35 | 显示全部楼层

    <svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>

    <script type="module">

    import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

    var dr = Dr.dr(msvg);

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

    </script>


    不说没用过，按提示跑一遍才发现预设很多东东。。

    平时只用来编音画是浪费了

    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 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支持版早就有了
    回复 支持 反对

    使用道具 举报

    花飞飞
  • TA的每日心情
    慵懒
    2025-8-5 16:33

    • 签到天数: 44 天

    [LV.5]常住居民I

    62

    主题

    1万

    回帖

    2万

    积分

    贵宾

    Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7Rank: 7

    花潮美女流光溢彩优雅神秘花潮贵宾
    发表于 2025-8-29 09:46 | 显示全部楼层
    马黑黑 发表于 2025-8-28 23:36
    svgdr支持版早就有了

    还是使用习惯的问题
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-29 12:05 | 显示全部楼层
    花飞飞 发表于 2025-8-29 09:46
    还是使用习惯的问题

    各有各的习惯
    回复 支持 反对

    使用道具 举报

    红影
  • TA的每日心情
    开心
    2025-11-17 10:56

    • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析（喊冤）章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理
    发表于 2025-8-29 14:35 | 显示全部楼层
    马黑黑 发表于 2025-8-28 22:12
    东西太多，需要一些提示。不过懂的都懂，熟悉svg的话，用 svgdr 更容易上手

    想使用 svgdr ，必须知道里面的约定呢。
    　
    回复 支持 反对

    使用道具 举报

    红影
  • TA的每日心情
    开心
    2025-11-17 10:56

    • 签到天数: 1050 天

    [LV.10]以坛为家III

    1881

    主题

    32万

    回帖

    37万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮美女虎龙狗猪多彩人生星月交辉海样胸怀火热情怀优雅迷人神秘浪漫缤纷心情草莓情怀蝴蝶情怀心曲飞扬星星情怀七彩绚丽活泼开朗女儿情怀相遇之美一往情深花好月圆心香一瓣紫色情节飞龙在天金剪刀天籁妙音妙笔生花风雨同行我心永远天长地久幸福快乐绚丽缤纷喜乐安康中秋征文周年庆指尖上的流年舞会之星分析（喊冤）章总结章杀人王小强章最佳杀刺临屏写诗七夕诗钟活动第五届风云第六届风云情人节花潮管理
    发表于 2025-8-29 14:36 | 显示全部楼层
    马黑黑 发表于 2025-8-28 22:13
    目的就是叫可能简化svg

    是的，这个简化还是很方便的
    　
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-29 19:41 | 显示全部楼层
    红影 发表于 2025-8-29 14:36
    是的，这个简化还是很方便的

    也方便学习svg
    回复 支持 反对

    使用道具 举报

    马黑黑
  • TA的每日心情
    慵懒
    2025-11-30 07:45

    • 签到天数: 1655 天

    [LV.Master]伴坛终老

    3024

    主题

    13万

    回帖

    28万

    积分

    管理员

    Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9Rank: 9

    花潮帅哥鼠牛虎兔龙蛇马羊猴鸡狗猪多彩人生星月交辉奔放热烈海样胸怀春风拂面火热情怀优雅迷人神秘浪漫相遇之美鹰傲苍穹花好月圆紫色情节飞龙在天王者至尊大将风范音画大师天籁妙音共看流星风雨同行我心永远幸福快乐喜乐安康侠骨柔肠心想事成开朗大方花潮管理
     楼主| 发表于 2025-8-29 19:41 | 显示全部楼层
    红影 发表于 2025-8-29 14:35
    想使用 svgdr ，必须知道里面的约定呢。

    可以查询
    回复 支持 反对

    使用道具 举报

    下一页 »
    123下一页
    返回列表 发新帖
    高级模式
    B Color Image Link Quote Code Smilies
    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    小黑屋|手机版|Archiver|服务支持：DZ动力|huachaowang.com Inc. ( 蜀ICP备17032287号-1 )

    GMT+8, 2025-11-30 16:20 , Processed in 0.125590 second(s), 29 queries .

    Powered by Discuz! X3.4

    © 2001-2013 Comsenz Inc.

    快速回复 返回顶部 返回列表