马黑黑 发表于 2025-9-12 20:07

太阳花SVG路径生成函数

本帖最后由 马黑黑 于 2025-9-12 21:38 编辑 <br /><br /><div class="codebox">
function createSunFlowerPath(tt,R,r) {
      if (tt % 2 === 0) tt += 1;
      var a = 360 / tt, half = Math.floor(tt / 2), points = [], path = 'M';
      Array.from({length:tt}).forEach((_,k) =&gt; {
            var x = (R + r * Math.cos(Math.PI/180 * a * k)).toFixed(2),
                y = (R + r * Math.sin(Math.PI/180 * a * k)).toFixed(2);
            points.push();
      });
      for (var i = half; i &gt;= 0; i --) {
                var j = (half + i) % tt;
                path += `${points[ i ]} ${points[ i ]},${points} ${points} `;
      }
      path += 'Z';
      return path;
}
</div>
<p>函数参数解释：</p>
<p>tt : 顶点数，应大于等于3，否则得到的结果不是太阳花路径。如果传值是偶数，函数会自动加1使其变为奇数；</p>
<p>R : 外切圆半径，取值依据是正方形宽度的一般，这样可以确保路径环绕正方形的中心点展开；</p>
<p>r : 外切圆半径，指太阳花顶点到正方形中心的距离，一般会比 R 小一点点。</p>
<p><br></p>
<p>我叫DS也做一份绘制太阳花的代码，以解决偶数顶点问题，它的思路和我的不太一样，以下是DS在我提供的代码基础上写的实现代码，它能确保奇数、偶数顶点数都可以绘制太阳花——不过它的太阳花样式和我设想的有所不同：</p>

<div class="codebox">
var total = 6; // 可以改为任意数字测试
var R = 200, r = 190, points = [], path = 'M';
var a = 360 / total;

// 生成所有顶点
Array.from({length: total}).forEach((_, k) =&gt; {
    var x = (R + r * Math.cos(Math.PI/180 * a * k)).toFixed(2),
      y = (R + r * Math.sin(Math.PI/180 * a * k)).toFixed(2);
    points.push();
});

// 新的连接逻辑
for (var i = 0; i &lt; total; i++) {
    var j = (i + Math.floor(total / 2)) % total;
    path += `${points[ i ]} ${points[ i ]} L ${points} ${points} `;
}
path += 'Z';
</div>

<p><br></p>
<p>来看看结果，都是13个顶点，前面的是用我的函数画的，后面的是用DS的代码完成的：</p>
<p><svg width="400px" height="400px">
    <path d="M15.52 245.47,368.24 111.70 57.78 325.99,307.93 43.63 132.63 377.65,222.90 11.39 222.90 388.61,132.63 22.35 307.93 356.37,57.78 74.01 368.24 288.30,15.52 154.53 390.00 200.00,15.52 245.47 Z" fill="none" stroke="tan"></path>
</svg></p>
<p><br></p>
<p><svg width="400px" height="400px">
    <path d="M390.00 200.00 L 15.52 245.47 368.24 288.30 L 15.52 154.53 307.93 356.37 L 57.78 74.01 222.90 388.61 L 132.63 22.35 132.63 377.65 L 222.90 11.39 57.78 325.99 L 307.93 43.63 15.52 245.47 L 368.24 111.70 15.52 154.53 L 390.00 200.00 57.78 74.01 L 368.24 288.30 132.63 22.35 L 307.93 356.37 222.90 11.39 L 222.90 388.61 307.93 43.63 L 132.63 377.65 368.24 111.70 L 57.78 325.99 Z" fill="none" stroke="tan"></path>
</svg></p>
<p><br></p>
<p>之前，我做过一个用 polygon 实现的太阳花绘制案例，支持奇偶数顶点数，链接：<a href="http://mhh.52qingyin.cn/art/show.php?st=5&sd=5&art=mahei_1699183527">polygon绘制太阳花</a></p>

<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script>

红影 发表于 2025-9-12 21:39

DS明显是多连了许多线，不过也是对称着连的呢{:4_173:}

红影 发表于 2025-9-12 21:40

那个链接好像打不开？

马黑黑 发表于 2025-9-12 21:40

红影 发表于 2025-9-12 21:39
DS明显是多连了许多线，不过也是对称着连的呢

它追求的是对称

马黑黑 发表于 2025-9-12 21:41

红影 发表于 2025-9-12 21:40
那个链接好像打不开？

改好了。前面又是 [ i ] 的问题弄的

杨帆 发表于 2025-9-12 22:32

真漂亮！谢谢马老师经典分享{:4_191:}

马黑黑 发表于 2025-9-12 22:33

杨帆 发表于 2025-9-12 22:32
真漂亮！谢谢马老师经典分享

{:4_190:}

红影 发表于 2025-9-12 23:00

马黑黑 发表于 2025-9-12 21:40
它追求的是对称

你原来的那种更清爽些{:4_187:}

红影 发表于 2025-9-12 23:10

马黑黑 发表于 2025-9-12 21:41
改好了。前面又是 [ i ] 的问题弄的

看到了，原来的那个还是可调的，好漂亮啊{:4_171:}

马黑黑 发表于 2025-9-12 23:44

红影 发表于 2025-9-12 23:10
看到了，原来的那个还是可调的，好漂亮啊

还行

马黑黑 发表于 2025-9-12 23:44

红影 发表于 2025-9-12 23:00
你原来的那种更清爽些

勉勉强强吧

花飞飞 发表于 2025-9-13 10:44

看到了黑氏太阳花和DS太阳花，对比一下黑氏太阳更漂亮。。。
DS的机械重复是强项，设计感就少了点。显得臃肿繁杂。。

花飞飞 发表于 2025-9-13 10:48

网站里的太阳花印象深刻，nonzero，evenodd 这两种填充模式又复习一遍了。。
{:5_162:}



红影 发表于 2025-9-13 19:17

马黑黑 发表于 2025-9-12 23:44
还行

其实当时就惊叹过，现在继续惊叹{:4_187:}

红影 发表于 2025-9-13 19:18

马黑黑 发表于 2025-9-12 23:44
勉勉强强吧

条理非常清晰，更容易看得懂。

马黑黑 发表于 2025-9-13 20:05

红影 发表于 2025-9-13 19:18
条理非常清晰，更容易看得懂。

看懂需要一点点基础

马黑黑 发表于 2025-9-13 20:05

红影 发表于 2025-9-13 19:17
其实当时就惊叹过，现在继续惊叹

不惊掉下巴就好{:4_170:}

红影 发表于 2025-9-13 21:42

马黑黑 发表于 2025-9-13 20:05
看懂需要一点点基础

那是肯定的{:4_187:}

红影 发表于 2025-9-13 21:42

马黑黑 发表于 2025-9-13 20:05
不惊掉下巴就好

还好，我检查了一下，下巴没什么问题{:4_173:}

马黑黑 发表于 2025-9-13 21:59

红影 发表于 2025-9-13 21:42
还好，我检查了一下，下巴没什么问题

不顺带牵一下须？{:4_170:}
页: [1] 2 3 4
查看完整版本: 太阳花SVG路径生成函数