svgdr教程：插件的引用和使用
svgdr是一款用JavaScript开发的SVG图形绘制工具，可以用来在Web页中绘制从简单到复杂、从静态到动态的SVG图形。当前还处于开发阶段，已完成的部分已经能够正常工作。现简单介绍一下如何在Web页中使用 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>
效果如下：
在同一个svg元素里绘图可以继续使用 dr 画笔不停地画下去，直到绘图工作完成。如果你想在同一个Web页里另外安排一个SVG画板，没问题，创建一个不同id标识符的svg元素，比如 id="egg"，然后再声明一个新的画笔变量，比如 dr_egg，那么，像这样，紧跟在上面的 dr 画笔绘制工作完成后的代码块：
//...这里是前面的JS代码 var dr_egg = _dr(egg); dr_egg.ellipse(100, 100, 90, 60, 'tan');
效果就是画了一个椭圆：
本节的核心问题是插件的引入和使用，小结如下：
//引入插件在自由环境还可以这样：
<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>;
返回目录
前一篇: SVG Drawer预览版及其文档
下一篇: svgdr教程·画圆
发表评论:
评论列表 [0条]
