改进版svg太阳花图案在线制作

马黑黑

设置顶点数:

7

【 填充模式 : 无 nonzero evenodd 】

操作方法：① 拖动滑杆选择顶点数 ② 选择填充模式

马黑黑

采用自己的思路，全新编写连线算法，总体实现方式更干净利落。

改版后，太阳花的顶点数理论上支持 ≥ 4 的任意顶点数，突破顶点数要被4整除的局限。一楼提供最大300个顶点数，实际上太多的顶点数连线会非常密集，到一定数值时图案会是一个圆。

不知道新算法是否经得起考验，若有问题，请及时反馈，谢谢。

马黑黑

附：一楼完整代码

1. <style>
   
2. .papa { margin: auto; width: 700px; display: grid; place-items: center; }
   
3. .papa svg { margin: 10px 0; width: 400px; height: 400px; }
   
4. .papa output { margin: 10px 0; max-height: 100px; overflow-y: auto; }
   
5. .set { display: flex; align-items: center; gap: 8px; }
   
6. </style>
   
7. 
   
8. <div class="papa">
   
9.         <p class="set">
   
10.                 <svg>
    
11.                         <polygon id="poly" points="400.00 200.00, 155.50 394.99, 19.81 113.22, 324.70 43.63, 324.70 356.37, 19.81 286.78, 155.50 5.01" fill-rule="evenodd" fill="red" stroke="green" stroke-width="2" />
    
12.                 </svg>
    
13.         </p>
    
14.         <p class="set">
    
15.                 <label for="angRng">设置顶点数: </label>
    
16.                 <input id="angRng" type="range" min="4" max="300" step="1" value="7" />
    
17.                 <output id="angNum">7</output>
    
18.                 <label> 【 填充模式 : </label>
    
19.                 <input id="f1" type="radio" name="fill" value="" />
    
20.                 <label for="f1">无</label>
    
21.                 <input id="f2" type="radio" name="fill" value="nonzero" />
    
22.                 <label for="f2">nonzero</label>
    
23.                 <input id="f3" type="radio" name="fill" value="evenodd" checked />
    
24.                 <label for="f3">evenodd 】</label>
    
25.         </p>
    
26.         <output id="pointscode">操作方法：① 拖动滑杆选择顶点数 ② 选择填充模式</output>
    
27. </div>
    
28. 
    
29. <script>
    
30. let addStep = (num) => {
    
31. /*  连线偏移算法 :
    
32.     偶数中被 4 整除的无需偏移 +0
    
33.     奇数分两种情形：
    
34.         ① 减去 9 后被6整除的 -1
    
35.         ② 减去 15 后被 30 整除的 +1
    
36.         ③ 不符合上述两个条件的 +0
    
37. */
    
38.         let res = 0;
    
39.         if(num % 2 === 0) {
    
40.                 res = num % 4 != 0 ? -1 : 0;
    
41.         }else{
    
42.                 res = (num - 9) % 6 === 0 ? -1 : 0;
    
43.                 if((num - 15) % 30 === 0)  res = 1;
    
44.         }
    
45.         return res;
    
46. };
    
47. 
    
48. /* 获取圆周上均分的点坐标 */
    
49. let getCircPoints = (num) => {
    
50.         let x = 200, y = 200, r= 200, angle = 0;
    
51.         let step = 2 * Math.PI / num, start = angle / 180 * Math.PI;
    
52.         let points = [];
    
53.         for (let j = 0; j < num; j++) {
    
54.                 let a = step * j + start;
    
55.                 let px = (Math.cos(a) * r + x).toFixed(2), py = (Math.sin(a) * r + y).toFixed(2);
    
56.                 points.push(px + ' ' + py);
    
57.         }
    
58.         return points;
    
59. }
    
60. 
    
61. /* 生成 polygon 的 points 属性值 */
    
62. let mkStar = (num) => {
    
63.         let ar = getCircPoints(num), datas = [];
    
64.         let step = Math.ceil((ar.length - 3) / 2) + addStep(num);
    
65.         for(i = 0; i < ar.length; i++) {
    
66.                 let idx = (i * step) % ar.length;
    
67.                 datas.push(ar[idx]);
    
68.         }
    
69.         return datas.join(', ');
    
70. };
    
71. 
    
72. angRng.oninput = () => {
    
73.         let points = mkStar(angRng.value * 1);
    
74.         poly.setAttribute('points', points);
    
75.         pointscode.innerText = 'points="' + points + '"';
    
76.         angNum.innerText = angRng.value;
    
77. };
    
78. 
    
79. let fills = document.getElementsByName('fill');
    
80. fills.forEach((item,key) => {
    
81.         item.onclick = () => {
    
82.                 let fillcolor = key > 0 ? 'red' : 'none';
    
83.                 poly.setAttribute('fill',fillcolor);
    
84.                 poly.setAttribute('fill-rule',item.value);
    
85.         };
    
86. });
    
87. 
    
88. </script>

复制代码

千羽

黑黑老师又有创新了，俺不懂，等着看精彩作业

马黑黑

千羽 发表于 2023-11-5 14:43
黑黑老师又有创新了，俺不懂，等着看精彩作业

这个是对svg polygon标签的进一步研究，不见得一定得和做帖子有关

马黑黑

醉美水芙蓉 发表于 2023-11-5 16:56
欣赏老师新作品改进版！

这个版本，一是更换了算法，二是支持更多的顶边尖角数

红影

原来连线的方式是不同的，怪不得得到的感觉不同

红影

连线偏移算法 :
    偶数中被 4 整除的无需偏移 +0
    奇数分两种情形：
        ① 减去 9 后被6整除的 -1
        ② 减去 15 后被 30 整除的 +1
        ③ 不符合上述两个条件的 +0

这个连线方式很复杂，先看偶数，偶数就一个情况，能被4整除或不能。
能被4整除的就按规则不偏移，那不能整除的是怎么偏移的？看了看好像使用了前一个能被4整除的方式。
再看看奇数的，看起来到一定的数值之后才能完全去遵守。

红影

点的获取很简单，只是平分圆，如何连线才是关键啊

红影

能从4的整倍数点子的连线方式，研究出来适应所有点数的连线方式，这个太厉害了

虽然对为什么区分奇偶数做这样的连线排布还没懂，但是信了黑黑说的代码跟数学有密不可分的关系，这里面一定是对应着数学规律的

马黑黑

红影 发表于 2023-11-5 17:22
原来连线的方式是不同的，怪不得得到的感觉不同

先前的版本是别人的算法，有四的倍数的约束。现在是自己的算法，支持不被4整除的顶点数

马黑黑

红影 发表于 2023-11-5 17:33
连线偏移算法 :
    偶数中被 4 整除的无需偏移 +0
    奇数分两种情形：

圆周上点对点连线，当都是连接相邻点是，得到的是多边形；要想得到太阳花图案，需要按一定规则错开连接，这里面就涉及到算法的设计。

圆周上N个点如何去连接，总得有个开头，我们从最右边的点开始，它连接的下一个点算法是：

（N-3）/ 2

上式，向上取整。

然后从下一个点开始，继续按上述算式找下一个点，直到所有的点找完。

期间，还分支处理一些情况，凡不被 4 整除的，如果纯粹使用上面的式子，它们会重复找点，得到的结果就不是 N 个顶点，因为连线会重复。这需要做具体处理，需要一定的数学洞察力。

马黑黑

红影 发表于 2023-11-5 17:34
点的获取很简单，只是平分圆，如何连线才是关键啊

重点在连线

马黑黑

红影 发表于 2023-11-5 17:39
能从4的整倍数点子的连线方式，研究出来适应所有点数的连线方式，这个太厉害了

虽然对为什么区 ...

数学抽象但非常实用，它被广泛应用于各个领域。

亦是金

不懂！我就是来看个热闹！

马黑黑

亦是金 发表于 2023-11-5 20:19
不懂！我就是来看个热闹！

小辣椒

越来越精美了，黑黑脑细胞真多

红影

马黑黑 发表于 2023-11-5 17:46
先前的版本是别人的算法，有四的倍数的约束。现在是自己的算法，支持不被4整除的顶点数

是的，这是你自己的研究成果

红影

马黑黑 发表于 2023-11-5 17:59
圆周上点对点连线，当都是连接相邻点是，得到的是多边形；要想得到太阳花图案，需要按一定规则错开连接， ...

所以如何取点很有讲究