svgdr教程·装饰标签

马黑黑 · 发表于 2024-11-8 08:03

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

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

x

装饰标签·pattern 和 marker

一、pattern 图案

指令：pattern()

参数：id, x, y, width, height

语法：pattern(id, x, y, width, height)

其中：

① id - <pattern> 标签id标识符，实体元素引用它的依据，字符型
② x - pattern图案 x 坐标值，缺省值0，可用长度数值表示，也可以百分比或对应浮点数表示
③ y - pattern图案 y 坐标值，缺省值0，可用长度数值表示，也可以百分比或对应浮点数表示
④ width - pattern图案宽度，可用长度数值表示，也可以百分比或对应浮点数表示
⑤ height - pattern图案高度，可用长度数值表示，也可以百分比或对应浮点数表示
* patternUnits - 用于定义x，y，宽度和高度属性，取值 objectBoundingBox（默认）时表示 pattern 的 x、y、width和height的值都是占外框（包裹 pattern 的元素）的百分比，取值 userSpaceOnUse 时表示 pattern 的 x、y、width和height表示的值都是当前用户坐标系统的值，这些值没有缩放，都是绝对值。patternUnits 属性svgdr没有纳入 pattern() 指令参数，使用时可用 set('patternUnits', 'objectBoundingBox | userSpaceOnUse') 实现。
* pattern 可以拥有自己的 viewBox，默认为 none

pattern 标签的创建，建议的做法是要加入 defs 标签以防止其自己呈现，svgdr 的 pattern() 指令会自动将其置于defs内。

下面给出一个实例：创建 pattern 图案然后将图案通过 circle 的 fill 属性应用于一个圆：

以上图案的 svgdr 绘制代码：

//创建 id="pat" 的pattern标签，宽高各设为5%(将以此尺寸呈现在目标对象，行列各20个图案)
dr.pattern('pat', 0, 0, .05, .05);
//画个矩形充当图案，作为pattern的子元素
dr.polygon('10 0,20 10,10 20,0 10', 'plum').addTo('pat');
dr.circle(400, 200, 180, 'url(#pat)'); //用 fill 填充圆

上面绘制指令生成的SVG代码如下：

二、marker 标记

指令：marker()

参数：id, width, height, refX, refY, orient, viewBox, markerUnits

语法：marker(id, width, height, refX, refY, orient, viewBox, markerUnits)

① id - <marker> 标签id标识符，字符型
② width - marker标记的宽度，数值
③ height - marker标记的高度，数值
④ refX - marker标记在线头（段）上的x坐标，数值
⑤ refY - marker标记在线头（段）上的y坐标，数值
⑥ orient - marker标记的旋转方式，关键字值有 auto、auto-start-reverse（字符值），支持角度值（字符值或数值）
⑦ viewBox - 定义maker标记视口，字符型
⑧ markerUnits - 设置marker标记坐标系，字符型，值有 userSpaceOnUse 和 strokeWidth（缺省默认）

以下实例，先创建两个marker标记，然后分别应用于路径和折线：

svgdr绘制代码：

//marker的宽高依据其内装饰物尺寸设定，以下两个marker，其内元素宽高占位均为20，故宽高=20*20
//refX 和 refY 是装饰物与目标线段衔接数据，取值建议是宽高的一半
dr1.marker('m1', 20, 20, 10, 10); //m1
dr1.circle(10, 10, 10,'red').addTo('m1'); //圆做加入m1做标记装饰物
dr1.marker('m2', 20, 20, 10, 10, 'auto'); //m2 : orient保证三角顺着路径方向转向
dr1.polygon('0 0, 0 20 20 10', 'red').addTo('m2'); //三角形加入m2做标记装饰物
//二次贝塞尔曲线线头和线尾加标记
dr1.path('M20 20 Q200 300,400 20', 'none', 'green').style('marker-start: url(#m1); marker-end: url(#m2');
//加 T 的二次贝塞尔曲线加头尾、中间标记
dr1.path('M20 320 Q100 180,200 320 T400 320', 'none', 'green').style('marker-start: url(#m1); marker-mid: url(#m2); marker-end: url(#m2');
//折线应用标记 : 标记会根据线宽缩放
var pts = '300 200,500 200,600 30,700 120,700 370,600 370,380 280',
	style = 'marker-start: url(#m1); marker-mid: url(#m1); marker-end: url(#m2);';
dr1.polyline(pts, 'none', 'green', 2).style(style);

svgdr生成的XML代码：

最后安利一个实例代码以结束本节。该实例创建一个pattern图案和一个maker标记，这两个装饰物最后都用到一个较大的多边形之上：

<svg id="mysvg" width="400" height="400"></svg>

<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';

var dr = _dr('mysvg');

dr.pattern('p1', 0, 0, 0.1, 0.1);
dr.circle(20, 20, 10,'thistle').addTo('p1');
dr.marker('m1', 10, 10, 5, 5).addTo('defs');
dr.circle(5, 5, 2.5, 'red').addTo('m1');
 
var tt = 8, r = 180, rad = 360 / tt * Math.PI / 180, dstr = '';
 
Array(tt).fill('').forEach((_, key) => {
	var x = 200 + r * Math.cos(rad * key), y = 200 + r * Math.sin(rad * key);
	dstr += key === tt - 1 ? `${x} ${y}` : `${x} ${y},`;
});
dr.polygon(dstr, 'url(#p1)', 'fuchsia', 8).style('marker-mid: url(#m1); marker-end: url(#m1); stroke-dasharray: 8');
</script>

上面代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。

返回目录