svgdr教程·画多边形
画多边形
指令：polygon()
参数：points, fill, stroke, stroke-width, stroke-linejoin
语法：polygon(points, fill, stroke, stroke-width, stroke-linejoin)
其中：
① points - 多边形各顶点XY坐标集合（字符型），例如：'x1 y1, x2 y2, x3 y3, ..., xn yn'
② fill - 填充色，颜色值（字符型）
③stroke - 描边色，颜色值（字符型）
④ stroke-width - 描边线厚度，数值
⑤ stroke-linejoin - 矩形转角处描边形状（字符型，缺省值 bevel，可选值 miter、round）
* 数值可以不用引号，字符型需要使用引号，百分比视为字符型
参数一 points 是多边形各个角基于svg画布坐标系的XY坐标值，这是一个组合，最少需要三组xy坐标值，比如画三角形，'100 0, 200 200, 0 200'，最后一个点到原点可以省略，所以只需要三个角的点坐标值，当然最后也可以给出原点坐标值；参数二、三、四好理解，这里不多讲；参数五 stroke-linejoin 是描边转角处的样式，值有好几个，通常用到的有 miter（斜接，即尖角缺省值），bevel（斜切）和 round（圆角）。需要注意的是，只有设置了描边（stroke） stroke-linejoin 属性的设置才生效，且当描边厚度（stroke-width）值越大转角样式的效果越明显。
以上图案的 svgdr 绘制代码：
sc.onload = () => {
var dr = _dr(msvg); //声明画笔
//开始绘制
dr.polygon('100 20, 20 100, 100 180, 180 100'); //左上 ：一个参数
dr.polygon('100 220, 20 300, 100 380, 180 300', 'tan'); //左下 ：两个参数
dr.polygon('300 20, 220 100, 300 180, 380 100', 'none', 'purple', 20); //左二上 ：斜接转角
dr.polygon('300 220, 220 300, 300 380, 380 300', 'none', 'purple', 20, 'round'); //左二下 ：圆形转角
dr.polygon('500 20, 420 100, 500 180, 580 100', 'none', 'purple', 20, 'bevel'); //右二上 ：斜切转角
dr.polygon('500 220, 420 300, 500 380, 580 300', 'tan', 'purple', 10, 'bevel'); //右二下 ：填充+描边+斜切转角
dr.polygon('650 20, 780 100, 700 200, 780 300, 650 380', 'none', 'teal', 10, 'round'); //右 ：任意形状多边形
};
上面绘制指令生成的SVG代码如下：
最后给一个完整示例代码：使用N个同一样式的多边形通过旋转一定角度、拉开一定距离组合成一个漂亮的图案。绘制指令中用到形变 transform()，用来设定旋转与位移，以后会专门介绍。
<svg id="polygon" width="200" height="200" xmlns="http://www.w3.org/2000/svg" viewBox="-100 -100 200 200">
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr1 = draw.dr(polygon);
var total = 20;
for(var i = 0; i < total; i ++) {
var deg = 360 / total * i;
dr1.polygon('0 -80, -10 -60, 0 0, 10 -60', 'tan').transform(`rotate(${deg}) translate(0 -10)`);
}
</script>
上例图案代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 pencil code 运行。
前一篇: svgdr教程·画矩形
下一篇: svgdr教程·画折线
发表评论:
评论列表 [1条]
#1 | 飞飞 于 2024-11-4 15:10 发布: 这个多边转角是固定的，看上去比正常的柔和了一丢丢，没办法大弧度。。
