svgdr新指令：circlePoints
<style>.artBox { font-size: 18px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
.artBox h5 { font-size: 18px; margin: 6px 0; }
</style>
<div id="prevBox"></div>
<div class="artBox">
<p>我经常使用svgdr设计帖子小播图案，使用过程中越来越觉得计算圆周上的顶点坐标应该封装成一个方法，因此抽空给svgdr增设了一个 circlePoints 指令。该指令的语法和参数解释如下：</p>
<div class="codebox" data-title="circlePoints指令语法：">
dr.circlePoints(points, R, r);
<txt-green>// 参数解释：</txt-green>
<txt-green>// 1. points 顶点数，比如绘制规则六边形，points 参数值就设置为 6</txt-green>
<txt-green>// 2. R 外切圆范围半径，其作用是规范了顶点所在外切圆的圆心</txt-green>
<txt-green>// 3. r 顶点外切圆半径，其值应小于等于 R</txt-green>
</div>
<p>指令将返回一个二维数组，数组结构为：<mark>[ ["值1","值2"], ["值3","值4"], ["值5","值6"], ..., ["值N","值N+1"] ]</mark>。来看看下面绘制规则六边形的例子：通过 circlePoints 指令获得顶点坐标值数组，并将结果组装成多边形的点数据——</p>
<div class="codebox" data-prev="1">
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js?v=1';
const dr = Dr.dr(msvg);
<txt-green>// 获取六边形顶点数组</txt-green>
const ar = dr.circlePoints(6, 200, 190);
<txt-green>// 将数组里的数据串接起来</txt-green>
const points = ar.join(',');
<txt-green>// 绘制实心六边形</txt-green>
dr.polygon(points, 'olive');
</script>
</div>
<p>再看一个多边形组合图案的绘制例子：</p>
<div class="codebox" data-prev="1">
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js?v=1';
const dr = Dr.dr(msvg);
const p1 = dr.circlePoints(8, 200, 190).join(',');
const p2 = dr.circlePoints(8, 200, 160).join(',');
dr.polygon(p1, 'none', 'olive', 3);
dr.polygon(p2, 'none', 'olive', 3);
</script>
</div>
<p>灵活使用 circlePoints 指令应该可以绘制出效果炫酷的图案，例如：</p>
<div class="codebox" data-prev="1">
<svg id="msvg" width="400" height="400" viewBox="0 0 400 400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/web/mod/svgdr.js?v=1';
const dr = Dr.dr(msvg);
const ar1 = dr.circlePoints(18, 200, 190);
const ar2 = dr.circlePoints(18, 200, 160);
let points = '';
for (let j = 0; j < ar1.length; j++) {
let k = (j + 1) % ar1.length;
points += j % 2 === 0 ?
`${ar1} ${ar1},${ar2} ${ar2},${ar2} ${ar2} ` :
`${ar2} ${ar2},${ar1} ${ar1},${ar1} ${ar1} `;
}
points = points.trim();
dr.polygon(points, 'none', 'tan', 3);
</script>
</div>
<p>一切取决于创造和实现能力！</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 先看 一句能看懂的。。
白老师构思能力一流，实现能力一流，效果一流。。。全是顶流。。{:4_170:}
坚决不是你想说的那个哈。。 我的天，最后一个复杂的图案居然是算出来的。。
不是画出来的。。更高级了。。。{:4_199:}
这是什么神仙指令。。 这个多边形图案跟今天的实例很相似，实例里要叠加三层或者多层的话，需要重新计算每个点。
这个就很容易就实现多层，直接加就完了{:4_173:}
颜色也可以随意更改。。
妙妙妙。。 花飞飞 发表于 2025-9-15 20:20
这个多边形图案跟今天的实例很相似，实例里要叠加三层或者多层的话，需要重新计算每个点。
这个就很容易就 ...
还好 花飞飞 发表于 2025-9-15 20:15
我的天，最后一个复杂的图案居然是算出来的。。
不是画出来的。。更高级了。。。
这是什么神仙 ...
这是去两个半径不同的外切圆顶点，然后按一定规则交错组合划线 circlePoints 指令里的参数很简单。
绘制两个图案的时候，数据串接的命令直接进入数组里了。 花飞飞 发表于 2025-9-15 20:13
先看 一句能看懂的。。
白老师构思能力一流，实现能力一流，效果一流。。。全是顶流。。
坚决不 ...
果酱果酱 最后那个最神奇，把两个多边形连起来了，得到这么奇妙的图案呢{:4_187:} 红影 发表于 2025-9-15 22:00
最后那个最神奇，把两个多边形连起来了，得到这么奇妙的图案呢
手工写也是可以的，就是得拿出计算器，还得知道一些公式 红影 发表于 2025-9-15 21:59
circlePoints 指令里的参数很简单。
绘制两个图案的时候，数据串接的命令直接进入数组里了。
这是综合应用了 中间再加一个元，很像⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️⚙️
马黑黑 发表于 2025-9-15 22:01
手工写也是可以的，就是得拿出计算器，还得知道一些公式
手工写肯定不如这个方便呢{:4_187:} 马黑黑 发表于 2025-9-15 22:01
这是综合应用了
嗯嗯，这个综合应用更简洁。 红影 发表于 2025-9-15 23:26
嗯嗯，这个综合应用更简洁。
还好 红影 发表于 2025-9-15 23:26
手工写肯定不如这个方便呢
对。比方说要绘制二三十个圆，手写的话肯定很麻烦。等下我做个帖子，里面就用到很多个圆，我就用那个新指令 circlePoints 来协助完成。 亚伦影音工作室 发表于 2025-9-15 23:19
中间再加一个元，很像⚙️⚙️⚙️⚙️⚙️Ϝ ...
你这些怎么都看不到图像 又一个很有意义的封装，马老师您辛苦了{:4_191:} 马黑黑 发表于 2025-9-16 12:29
你这些怎么都看不到图像
很想齿轮！ 亚伦影音工作室 发表于 2025-9-16 16:44
很想齿轮！
额，就是齿轮呀