svgdr教程·draw + addTo

马黑黑 · 发表于 2024-11-14 07:41

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

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

x

draw & addTo

一、万能绘制指令 draw

指令：draw()

参数：name, option

语法：draw(name, option)

参数解释：

① name - 必须，要绘制的图形名称，例如 circle、path
② option - 必须，格式为一系列键值对的JS对象，例如 { cx: 120, y: 120, r: 100, fill: 'gray' }
* 健名若有连接符 - ，需要用引号包裹，例如 stroke-width: 4 应写成 'stroke-width': 4，否则JS报错

二、添加到指令 addTo

指令：addTo()

参数：id

语法：addTo(id)

参数解释：

id为添加到的目标元素id标识符，例如将当前绘制的对象添加到id="g1"的分组标签：addTo('g1')

以下效果使用 draw() 指令绘制而成，过程中使用 addTo() 指令给元素添加animate动画。动画可通过点击圆暂停/继续：

svgdr绘制指令（不包含JS部分）：

dr.draw('circle', {cx: 150, cy: 150, r: 130, fill: 'peru', cursor: 'pointer'}); //画圆
//画矩形
dr.draw('rect', {
	id: 'rt1',
	x: 5,
	y: 5,
	width: 290,
	height: 290,
	fill: 'none',
	stroke: 'peru',
	'stroke-width': 5,
	'stroke-dasharray': 5,
});
//绘制动画并将动画授予矩形
dr.draw('animate', {
	attributeName: 'stroke-dashoffset',
	values: `0;${rt1.getTotalLength()}`,
	dur: '20s',
	repeatCount: 'indefinite'
}).addTo('rt1');

生成的SVG代码（不包含JS部分）：

理论上 draw() 指令可以创建所有的svg标签，但它不是真的万能，比如目前它无法创建嵌套的标签，只是单纯地完成指定标签的创建。addTo() 指令不能绘制元素，但可以配合其他绘制或创建元素指令将当前的元素移动到指定id的元素，从而达成标签嵌套的目的，在这个意义上来说，作为功能性的 svgdr 指令，它也是十分强大的。

返回目录