svgdr获取太阳花points数据指令-sun

马黑黑

太阳花是迷人的图案，它在SVG或canvas中的实现原理无非就是将指定半径的外切圆圆周上的N多个顶点用线条按一定次序连接起来。现有资料提供的太阳花绘制方案和使用玫瑰线绘制的多叶草实现方式大同小异，它们都在花瓣数、叶片数上存在一个传参奇偶数问题，例如画八叶草、八个顶点的太阳花，传递的参数是 4，并且，你无法通过该方案绘制六叶草、六个顶点的太阳花图案。svgdr 绘制多叶草 clover 指令和刚刚完成的绘制太阳花指令 sun() 则突破了偶数传参困局，想画多少个花瓣、叶片就按实际数量传参，不受奇偶数限制。

太阳花 sun() 指令解释：

☀ 语法 ：sun(num, R, r);

☀ 参数 ：num - 必须参数，正整数，≥ 3，建议 ≥ 7；R - 可选参数，正浮点数，用以确定太阳花外切圆圆心，缺省时值取SVG宽度的一半。支持数组传参，[200,150] 的参数设置意味着太阳花的圆心坐标是 x=200、y=150；r - 可选参数，正浮点数，用以确定太阳花的绘制范围，缺省时取值为 R-10，也支持数组传参，[180,120] 的参数设置将得到椭圆形的太阳花（据说古时候普遍存在这样形状的太阳花）

☀ 返回 ：SVG多边形标签 polygon 所需的 points 属性值数据

【附】sun() 指令取点利用内部的 circlePoints() 指令实现，这意味着 circlePoints() 取点指令同样支持 R、r 的数组传参，数组元素为两个，分别代表 cx、cy 圆心坐标，记作 [cx, cy]

举个实例——

<svg id="svg" width="800" height="600" style="border: 1px solid gray; margin: 10px;"></svg> <script type="module"> import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js'; var dr = Dr.dr(svg); // 16花瓣、R在SVG中心、r(绘制范围)290 const points = dr.sun(16, [400,300], 290); // 绘制太阳花并设置填充、填充规则、描边 dr.polygon(points, 'tan', 'red', 2).set('fill-rule', 'evenodd'); </script>

再给一个缺省 R、r 参数的例子——

<svg id="svg" width="600" height="600" style="border: 1px solid gray; margin: 10px;"></svg> <script type="module"> import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js'; var dr = Dr.dr(svg); dr.polygon(dr.sun(21), 'tan', 'red', 2).set('fill-rule', 'evenodd'); </script>

需要注意的是，缺省 R、r 参数时，svgdr 以SVG的宽度的一般为依据确定圆心 cx、cy，因此应该设置SVG或SVG的viewBox属性宽高一致。

红影

还能缺省 R、r 参数啊，被黑黑设计得越来越好了

马黑黑

红影 发表于 2025-10-6 00:11
还能缺省 R、r 参数啊，被黑黑设计得越来越好了

理想绘制环境下可以使用缺省配置