svgdr 获取多叶草指令 : clover
<style>.artBox { font-size: 18px; margin: 20px auto; max-width: 1200px; }
.artBox > p { margin: 10px 0; line-height: 30px; }
.artBox mark { padding: 4px 6px; background: lightblue; }
</style>
<div class="artBox">
<p>绘制多叶草的路径有很多方法，svgdr 采用三次贝赛尔曲线实现，具体是从规定的中心点出发又回到原点，所有曲线依次均无缝衔接构成最终路径并返回给调用者。试看采用默认方式的绘制代码和效果——</p>
<div class="codebox" data-prev="1">
<svg id="mysvg" width="400" height="400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const dr = Dr.dr('mysvg');
const d = dr.clover(); <txt-green>// 获取三叶草路径</txt-green>
dr.path(d, 'green'); <txt-green>// 绘制三叶草</txt-green>
</script>
</div>
<p>这里，clover 指令以默认配置的方式拿到的是三叶草的路径。可以绘制四叶草、五叶草、N叶草，要做的事情是给 clover 指令设定一个配置对象，例如——</p>
<div class="codebox" data-prev="1">
<svg id="mysvg" width="400" height="400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const dr = Dr.dr('mysvg');
const setting = {num: 4, R: 200, r: 280, gap: 1.25};
const d = dr.clover(setting); <txt-green>// 获取多叶草路径</txt-green>
dr.path(d, 'green'); <txt-green>// 绘制多叶草</txt-green>
</script>
</div>
<p>代码中的变量 setting 存储了自定义多叶草路径的配置，花括号 <mark>{}</mark> 里各个参数可以不按顺序设置，也可以不用全部设置。各键值对参数的含义如下：</p>
<blockquote>① num，多叶草叶片数，要求大于等于 3 的正整数，缺省默认是 3；<br><br>② R，水平方向多叶草圆心X坐标值，例如希望多叶草画在svg水平方向的中心，则为svg宽度的一半；<br><br>③ r，多叶草在外切圆控制点1的半径，控制点2依据第下一个参数 gap 确定，多叶草的顶点则根据控制点决定其位置，r 的缺省值为 R+60；<br><br>④ gap，两个控制点的间隔系数，浮点数值，默认值是 2.0，支持正、负数。</blockquote>
<p>clover 指令不考虑纵向方向的圆心位置，因此要绘制多个多叶草，可以使用相同的 R 值，然后平移到指定的位置，例如下例绘制不同样式的多叶草，其中有一个往右腾挪——</p>
<div class="codebox" data-prev="1">
<svg id="mysvg" width="800" height="400"></svg>
<script type="module">
import Dr from 'https://638183.freep.cn/638183/svgdr/svgdr.mod.min.js';
const dr = Dr.dr('mysvg');
const d1 = dr.clover({num: 5, R: 200, r: 240, gap: 0.75}); <txt-green>// 路径1</txt-green>
const d2 = dr.clover({num: 6, R: 200, r: 240, gap: 1.2}); <txt-green>// 路径2</txt-green>
dr.path(d1, 'green'); <txt-green>// 绘制第一个多叶草</txt-green>
dr.path(d2, 'teal').transform('translate(400)'); <txt-green>// 绘制第二个多叶草</txt-green>
</script>
</div>
<p>或者使用其它任意可行的方式安排多叶草的位置，其中最常见的方法是将路径或图形放入分组然后用 use 标签将其实例化—— use 标签可以灵活设置位置。</p>
<p>需要注意的是，clover 的计算将SVG的 viewBox 属性值考虑在内，配置和使用 clover 指令应顾及 viewBox 因素。</p>
</div>
<script type="module">
import linenumber from 'https://638183.freep.cn/638183/web/js/linenumber.js';
linenumber();
</script> 这个绘制多叶草的封装真方便。默认的就是三叶草，然后还可以设置任意叶数呢，还能设置其他细节。{:4_187:} 学习了，不知道学会了没有{:4_189:} 墙裂推荐给005、006，，，，等航母制造厂，这螺旋桨的型线至少提高推进效率35%，今年度科学技术奖提名人{:4_203:} 樵歌 发表于 2025-10-4 21:13
墙裂推荐给005、006，，，，等航母制造厂，这螺旋桨的型线至少提高推进效率35%，今年度科学技术奖提名人{:4 ...
感谢支持，到时候奖金分你一半 小辣椒 发表于 2025-10-4 21:05
学习了，不知道学会了没有
指令简单，会一点点JS，再看下参数配置要求，没有不会的 红影 发表于 2025-10-4 21:01
这个绘制多叶草的封装真方便。默认的就是三叶草，然后还可以设置任意叶数呢，还能设置其他细节。
有空试试就知道有多好玩 马黑黑 发表于 2025-10-4 22:56
感谢支持，到时候奖金分你一半
这个大大滴可以有{:4_189:} 樵歌 发表于 2025-10-5 20:24
这个大大滴可以有
必须有
页:
[1]