svgdr教程·画多边形
<style>.art > p { margin: 12px 0; font: normal 18px/24px sans-serif; }
.art mark { padding: 2px 6px; background: lightblue; }
.art svg { outline: 1px solid silver; }
.tRed { color: red; }
</style>
<h2>画多边形</h2>
<div class="art">
<p>指令：<mark>polygon()</mark></p>
<p>参数：<mark>points, fill, stroke, stroke-width, stroke-linejoin</mark></p>
<p>语法：<mark>polygon(points, fill, stroke, stroke-width, stroke-linejoin)</mark></p>
<p>其中：</p>
<blockquote>
① points - 多边形各顶点XY坐标集合（字符型），例如：'x1 y1, x2 y2, x3 y3, ..., xn yn'<br>
② fill - 填充色，颜色值（字符型）<br>
③stroke - 描边色，颜色值（字符型）<br>
④ stroke-width - 描边线厚度，数值<br>
⑤ stroke-linejoin - 矩形转角处<span class="tRed">描边</span>形状（字符型，缺省值 bevel，可选值 miter、round）<br>
* <span class="tRed">数值可以不用引号，字符型需要使用引号，百分比视为字符型</span>
</blockquote>
<p>参数一 points 是多边形各个角基于svg画布坐标系的XY坐标值，这是一个组合，最少需要三组xy坐标值，比如画三角形，<mark>'100 0, 200 200, 0 200'</mark>，最后一个点到原点可以省略，所以只需要三个角的点坐标值，当然最后也可以给出原点坐标值；参数二、三、四好理解，这里不多讲；参数五 stroke-linejoin 是描边转角处的样式，值有好几个，通常用到的有 miter（斜接，即尖角缺省值），bevel（斜切）和 round（圆角）。需要注意的是，只有设置了描边（stroke） stroke-linejoin 属性的设置才生效，且当描边厚度（stroke-width）值越大转角样式的效果越明显。</p>
<svg id="msvg" width="800" height="400"></svg>
<p>以上图案的 svgdr 绘制代码：</p>
<div id="div1"><pre id="pre1">
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'); //右 ：任意形状多边形
};
</pre></div>
<p>上面绘制指令生成的SVG代码如下：</p>
<div id="div2"><pre id="pre2"></pre></div>
<p>最后给一个完整示例代码：使用N个同一样式的多边形通过旋转一定角度、拉开一定距离组合成一个漂亮的图案。绘制指令中用到形变 transform()，用来设定旋转与位移，以后会专门介绍。</p>
<div id="div3"><pre id="pre3">
<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>
</pre></div>
<p>上例图案代码可以存为本地 .html 文档并使用浏览器打开，或将代码拿到 <a href="http://mhh.52qingyin.cn/api/pcode/">pencil code</a> 运行。</p>
<p><a href="/forum.php?mod=viewthread&tid=79137&extra=page%3D1" targete="_blank">返回目录</a></p>
</div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
var sc = document.createElement('script');
sc.src = 'https://638183.freep.cn/638183/web/js/svgdr.js';
document.body.appendChild(sc);
hl.hl(div1, pre1);
hl.hl(div3, pre3);
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); //默认转角 miter
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');
pre2.textContent = dr.code(msvg);
hl.hl(div2, pre2)
};
</script> 黑黑辛苦了，每天一个新讲解，这要花费很多功夫的{:4_187:} 这个多边形，除了前面的图案本身加填充描边线宽外，还多了个转角处描边形状，这个需要好好学习一下。
“只有设置了描边（stroke） stroke-linejoin 属性的设置才生效，且当描边厚度（stroke-width）值越大转角样式的效果越明显。”记下了{:4_187:} stroke-linejoin 转角描边形状常用的三种
miter——斜接，即尖角，这个是默认的，不设置默认就是它了，嗯，这个不用记了，让它默认就是了
bevel——斜切，即平角，黑黑给出了例子，并用不同线宽展示了效果。这个转角90，看着像两斜率平均
round——圆角，自动给出圆润的角，圆弧半径默认的。应该是线宽的一半吧。
以上形状都在线宽外侧的，线宽内侧没有影响。
<svg id="duobian" 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(duobian);
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> 这个图案好漂亮啊。多边形可以做出很多形状来，再加上图案组合，可以有无数的可能。
把黑黑案例里最后那个任意形状的图形套用到下面N个形状的组合里，做了10个，拉开20的距离，就变这样<br>
<svg id="duobian1" 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(duobian1);
var total = 10;
for(var i = 0; i < total; i ++) {
var deg = 360 / total * i;
dr1.polygon('0 -80, 20 -40, 10 0, 20 40, 0 80', 'tan').transform(`rotate(${deg}) translate(0 -20)`);
}
</script> 真好玩，多边形的组合真的有无限可能呢{:4_173:} 同样是上面的例子，再来个齿轮<br>
<svg id="duobian2" 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 dr2 = draw.dr(duobian2);
var total = 20;
for(var i = 0; i < total; i ++) {
var deg = 360 / total * i;
dr2.polygon('0 -80, 30 -40, 20 0, 30 40, 0 80', 'tan').transform(`rotate(${deg}) translate(0 -20)`);
}
</script>
红影 发表于 2024-11-4 09:55
同样是上面的例子，再来个齿轮
{:4_173:} 谢谢老师老师辛苦！{:4_187:} 马黑黑 发表于 2024-11-4 12:01
多边形的组合可能性实在是太多了{:4_199:} 红影 发表于 2024-11-4 18:08
多边形的组合可能性实在是太多了
任何形状的组合都会有很多可能性 马黑黑 发表于 2024-11-4 19:11
任何形状的组合都会有很多可能性
svg为想象力插上了翅膀{:4_173:} 红影 发表于 2024-11-4 19:15
svg为想象力插上了翅膀
HTML也在一定程度做的很好的 其实这个学学真有用的，也是好玩的 这个对我来说有点生疏了，没有连贯的学习感觉有难度了 矩形转角处描边形状（字符型，缺省值 bevel，可选值 miter、round）
这个转角样式有点少。。{:4_173:}
不过比没有好。。
至少有一个能让边角柔和一丢丢。。 关于旋转，看来这个中心点的设定十分重要，应该又要牵涉到计算。。translate(0 -10)
算术好的应该可以出更漂亮图案。。{:4_173:} points, 这个参数便能有无数可能。。。。{:4_173:}想想还是很壮观的。。 花飞飞 发表于 2024-11-4 21:35
points, 这个参数便能有无数可能。。。。想想还是很壮观的。。
其实这类东东就是描述，用数字去描述每一个点的二维位置