svgdr教程：插件的引用和使用
本帖最后由 马黑黑 于 2024-12-1 09:51 编辑 <br /><br /><style>.art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
</style>
<div class="art">
<p>svgdr是一款用JavaScript开发的SVG图形绘制工具，可以用来在Web页中绘制从简单到复杂、从静态到动态的SVG图形。当前还处于开发阶段，已完成的部分已经能够正常工作。现简单介绍一下如何在Web页中使用 svgdr，请看例子：</p>
<div id="d1"><pre id="p1">
//方法一 ：整体加载 svgdr 资源文档
<!-- 需要创建一个有id标识符的 svg 元素 -->
<svg id="mysvg" width="200" height="200"></svg>
<!-- 在JS中引入并使用 svgdr 插件 -->
<script>
//引入插件
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);
// 插件加载后开始工作
sc.onload = () => {
var dr = _dr('mysvg'); //声明画笔为 dr
dr.circle(100, 100, 80, 'pink'); //用dr画笔画圆
};
</script>
//方法二 ：导入 svgdr ES6模块
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr(msvg);
dr.circle(100, 100, 80, 'pink'); //用dr画笔画圆
</script>
</div></pre>
<p>效果如下：</p>
<svg id="svg1" width="200" height="200"></svg>
<p>在同一个svg元素里绘图可以继续使用 dr 画笔不停地画下去，直到绘图工作完成。如果你想在同一个Web页里另外安排一个SVG画板，没问题，创建一个不同id标识符的svg元素，比如 id="egg"，然后再声明一个新的画笔变量，比如 dr_egg，那么，像这样，紧跟在上面的 dr 画笔绘制工作完成后的代码块：</p>
<div id="d2"><pre id="p2">
//...这里是前面的JS代码
var dr_egg = _dr(egg);
dr_egg.ellipse(100, 100, 90, 60, 'tan');
</pre></div>
<p>效果就是画了一个椭圆：</p>
<svg id="svg2" width="200" height="200"></svg>
<p>本节的核心问题是插件的引入和使用，小结如下：</p>
<div id="d3"><pre id="p3">
//引入插件在自由环境还可以这样：
<script src="https://638183.freep.cn/638183/web/js/svgdr.js"></script>
<script>
//然后直接声明画笔(假设svg的id="svg3")
var dr = _dr(svg3);
dr.circle(100, 100, 80, 'pink'); //画圆
//关于画笔变量声明
//一个svg声明一个画笔变量，变量名称没有特别要求，合法、不重复就行，画笔变量的赋值格式必须
//为 _dr(svgID) ，其中 svgID 为svg标识，假设svg的 id="mysvg"，以下声明示例都是可以的——
// ① var dr = _dr(mysvg)
// ② var dr = _dr('mysvg');
// ③ var dr = _dr('#mysvg');
// ④ 操作web页中的第一个svg
// var svg = document.querySelector('svg');
// var dr = _dr(svg);
</script>;
</pre></div>
<p></br></p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);
hl.hl(d1, p1);
hl.hl(d3, p3);
sc.onload = () => {
var dr1 = _dr(svg1);
dr1.circle(100, 100, 80, 'pink');
var dr2 = _dr(svg2)
dr2.ellipse(100, 100, 90, 60, 'tan');
hl.hl(d2, p2);
};
</script>
SVG图形绘制工具的使用真方便，只要声明画笔，给它一个变量名称，就可以开始画了，还能继续画呢{:4_187:} 去试了一下，在前面的圆的代码里直接加上椭圆，出来的两个图形是并列的{:4_173:} 红影 发表于 2024-10-31 20:04
去试了一下，在前面的圆的代码里直接加上椭圆，出来的两个图形是并列的
圆心一样 红影 发表于 2024-10-31 20:00
SVG图形绘制工具的使用真方便，只要声明画笔，给它一个变量名称，就可以开始画了，还能继续画呢
画布要大一点
① var dr = _dr(mysvg)
② var dr = _dr('mysvg');
原来声明中带不带小引号在这里都是合法的。。。
刚才还想圆和椭圆为啥一个带一个不带的，{:4_170:} 这个很容易就画出一个大眼睛来了。不过就是有点太圆了~~
还可以绘制动态的SVG图形，功能强大，期待中。。。{:4_199:} 花飞飞 发表于 2024-10-31 20:51
① var dr = _dr(mysvg)
② var dr = _dr('mysvg');
原来声明中带不带小引号在这里都是合法的。。。
目前 _dr 的声明能够解析使用者传来的 svg 的几种标识 花飞飞 发表于 2024-10-31 20:53
这个很容易就画出一个大眼睛来了。不过就是有点太圆了~~
还可以绘制动态的SVG图形，功能强大，期待中。。 ...
动态早就实现了
马黑黑 发表于 2024-10-31 21:11
动态早就实现了
也是用插件实现的么，那是我后知后觉了 马黑黑 发表于 2024-10-31 21:11
目前 _dr 的声明能够解析使用者传来的 svg 的几种标识
这么说还挺包容的，好多种格式都支持 花飞飞 发表于 2024-10-31 21:14
也是用插件实现的么，那是我后知后觉了
你刚看的clipPath不就是动画的？ 花飞飞 发表于 2024-10-31 21:14
这么说还挺包容的，好多种格式都支持
也就两三种，这是常规的做法 马黑黑 发表于 2024-10-31 21:14
你刚看的clipPath不就是动画的？
好吧。。对的。。{:4_170:}我晕水了么 马黑黑 发表于 2024-10-31 21:15
也就两三种，这是常规的做法
四种，还有一种居然④ 操作web页中的第一个svg纯文字描述。。。{:4_173:} 马黑黑 发表于 2024-10-31 20:45
圆心一样
是啊，所以觉得奇怪，还以为它们会叠加呢{:4_173:} 马黑黑 发表于 2024-10-31 20:45
画布要大一点
否则会画到外面去了吧。{:4_173:} 红影 发表于 2024-10-31 23:10
否则会画到外面去了吧。
{:4_181:} 花飞飞 发表于 2024-10-31 22:41
好吧。。对的。。我晕水了么
是的 花飞飞 发表于 2024-10-31 22:42
四种，还有一种居然④ 操作web页中的第一个svg纯文字描述。。。
svgdr _dr() 声明指令对传来的数据，关切点在 svg 元素的信息，如果传来的是元素本身，那就直接用它，传来的若是字符串信息，那就对这个字符串进行检测，看它是不是指向svg元素，是就合法、进入工作状态，不是就报错了。