svgdr教程：插件的引用和使用

马黑黑 · 发表于 2024-10-31 19:24

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

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

x

本帖最后由马黑黑于 2024-12-1 09:51 编辑

svgdr是一款用JavaScript开发的SVG图形绘制工具，可以用来在Web页中绘制从简单到复杂、从静态到动态的SVG图形。当前还处于开发阶段，已完成的部分已经能够正常工作。现简单介绍一下如何在Web页中使用 svgdr，请看例子：

//方法一 ：整体加载 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>

效果如下：

在同一个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>;

返回目录