svgdr教程·画折线

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

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

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

x

本帖最后由马黑黑于 2024-11-5 08:10 编辑

画折线

指令：polyline()

参数：points, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin

语法：polyline(points, fill, stroke, stroke-width, stroke-linecap, stroke-linejoin)

其中：

① points - 折线各转角XY坐标集合（字符型），例如：'x1 y1, x2 y2, x3 y3, ..., xn yn'
② fill - 填充色，颜色值（字符型）
③stroke - 描边色，颜色值（字符型）
④ stroke-width - 描边线厚度，数值
⑤ stroke-linecap 折线起始端点线帽样式，字符型，可选值 butt（缺省）、round（圆）、square(方块)
⑥ stroke-linejoin - 折线转角处描边形状，字符型，缺省值 bevel，可选值 miter（斜接）、round（圆）
* 数值可以不用引号，字符型需要使用引号，百分比视为字符型

参数一 points 是折线端点和各个转角基于svg画布坐标系的XY坐标值，和多边形polygon一样，也是一个点坐标值的组合，字符型；参数二、三、四好理解，分别是填充、描边、描边线厚度。关于填充，由于折线可能有交叉区域，因此填充规则即fill-rule 值得注意，尤其是当交叉区域很复杂的时候。fill-rule 属性没有纳入 svgdr 指令 polyline() 的参数，需要时可用set('fill-rule', 'nonzero | evenodd')指令或style('fill-rule: nonzero | evenodd')指令补充，其中第一个可选值 nonzero 是缺省值；参数五 stroke-linecap 是折线线头、线尾的线帽，可选值 butt（词意是烟蒂，缺省）、round（圆角）、square（方块），其中，从形态上讲，butt和square外观一致，前者不增加线段长度、后者反之；参数六 stroke-linejoin 是描边转角处的样式，常用可选值有 miter（斜接，即尖角缺省值），bevel（斜切）和 round（圆角）。需要注意的是，线帽和折角的样式设置，只有在设置了描边（stroke）前提下才会生效，描边厚度（stroke-width）值越大端点和转角样式的效果越明显。

以上图案的 svgdr 绘制代码：

dr.polyline('100 20,180 180,20 180'); //只有一个 points 参数（默认自动用黑色填充）
dr.polyline('100 220,180 380,20 380', 'none', 'teal', 16); //缺省线帽 butt 不改变线长
dr.polyline('300 20,380 180,220 180', 'none', 'teal', 16, 'square'); //线帽 square 改变线长
dr.polyline('300 220,380 380,220 380', 'none', 'teal', 16, 'round'); //线帽 round 改变线长
dr.polyline('500 20,580 180,420 180', 'none', 'teal', 16, 'round', 'round'); //圆线帽、圆转角
//画一个复杂一点的折线
let pts = '420 380,780 380,780 360, 420 360,420 340,780 340,780 320,420 320,420 300,780 300,780 280,420 280,420 260,780 260,780 240,420 240,420 220,780 220,650 20,650 200,780 20';
dr.polyline(pts, 'none', 'plum', 4);

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

最后来看一个用 svgdr 绘制组合图案的代码示范：

<svg id="polyline" width="200" height="200" viewBox="-100 -100 200 200"></svg>
 
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr(svg1);
var tt = 12;
for(var i = 0; i < tt; i ++) {
	dr.polyline('0 0,70 0,70 -10,85 0,70 10,70 0', 'lightgreen', 'green', 3).transform(`rotate(${360/tt*i}) translate(6)`);
}
</script>

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

返回目录