什么花
本帖最后由 马黑黑 于 2024-11-11 20:31 编辑 <br /><br /><p>效果：</p><svg id="mysvg" width="300" height="300"></svg>
<p>svg绘制代码：</p>
<div id="div1"><pre id="pre1">
<script type="module">
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr(mydiv);
var tt = 9, /* 花瓣总数 */
r1 = 150, /* 范围半径，即宽高一致的svg的中心坐标 */
r2 = 145, /* 内围小半径，即图案在范围内的半径 */
deg = 360 / tt, /* 平均角度 */
rad = Math.PI / 180 * deg, /* 平均弧度 */
pstr = `M${r1} ${r1}`; /* 路径字串 ：开始时移动到中心 */
//stop结点代码
var stop = `
<stop offset="0" stop-color="magenta" />
<stop offset="1" stop-color="teal" />
`;
//生成路径字串
for(var i = 0; i < tt; i ++) {
var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}
//创建渐变
dr.gradient('radialGradient', {id: 'rg', r: .8}, stop);
//绘制路径 ：fill使用渐变并设置填充规则
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd');
</script>
</pre></div>
<p>svgdr生成的SVG代码：</p>
<div id="div2"><pre id="pre2"></pre></div>
<script type="module">
import hl from 'https://638183.freep.cn/638183/web/mod/helight.js';
import draw from 'https://638183.freep.cn/638183/web/mod/svgdr.js';
var dr = draw.dr(mysvg);
var tt = 9,
r1 = 150,
r2 = 145,
deg = 360 / tt,
rad = Math.PI / 180 * deg,
pstr = `M${r1} ${r1}`;
var stop = `
<stop offset="0" stop-color="magenta" />
<stop offset="1" stop-color="teal" />
`;
for(var i = 0; i < tt; i ++) {
var x = r1 + r2 * Math.cos(rad * i), y = r1 + r2 * Math.sin(rad * i);
pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
}
dr.gradient('radialGradient', {id: 'rg', r: .8}, stop);
dr.path(pstr, 'url(#rg)').set('fill-rule', 'evenodd');
pre2.textContent = dr.code(mysvg);
hl.hl(div1, pre1);
hl.hl(div2, pre2);
</script>
本帖最后由 马黑黑 于 2024-11-11 20:41 编辑
svgdr 渐变的创建，自动放入 <defs> 标签，无需事先创建 defs，当然创建也无妨。
然后，路径的 fill 属性，通过 url(#渐变id) 取代颜色值即可大功告成。
本例的难点不在于渐变的创建和应用，虽然意图如此。路径是个难点：使用弧形指令 A 绘制，每一次循环的弧形指令应用，都从svg中心点出发，画到指定点x、y，再运行一次A指令，从 x、y 回到中心点；每一次循环都变换角度，从而绕成一圈。用到三角函数正弦和余弦，还用到了角度转弧度的计算公式。 关于填充规则：fill-rule
缺省默认值是 nonzero，本例使用 evenodd，就这两个可选值 这花图案太漂亮啦。。
这么复杂的图案，白大神你设计一句代码就可以绘制，必须封神了。。{:4_170:}
pstr += `A60 30 ${deg * i} 0 0 ${x.toFixed(2)} ${y.toFixed(2)}A60 30 ${deg * i} 1 0 ${r1} ${r1}`;
马黑黑 发表于 2024-11-11 20:38
svgdr 渐变的创建，自动放入标签，无需事先创建 defs，当然创建也无妨。
然后，路径的 fill 属性，通 ...
这么难的东东是怎么算出来的。。
最强大脑堪比电脑。。帅就一个字{:4_170:} 马黑黑 发表于 2024-11-11 20:42
关于填充规则：fill-rule
缺省默认值是 nonzero，本例使用 evenodd，就这两个可选值
evenodd刚才还盯着这个单词看了半天，原来这一楼有说明。目前还不太明确作用在哪里{:4_173:} 渐变的引用也一层一层的好明白，设置颜色，创建渐变，引用渐变。。{:4_173:}
就是这么层次分明。。结构清晰
相比较那个路径绘制的各种公式，艾玛，算友好了。。 醉美水芙蓉 发表于 2024-11-11 21:51
等着欣赏老师的新播放器！这个太漂亮了！
这个做小播已经很容易了吧 泡沫 发表于 2024-11-11 21:30
这花图案太漂亮啦。。
这么复杂的图案，白大神你设计一句代码就可以绘制，必须封神了。。
pstr...
找到绘制规律，一切就简单了 泡沫 发表于 2024-11-11 21:44
渐变的引用也一层一层的好明白，设置颜色，创建渐变，引用渐变。。
就是这么层次分明。。结构清 ...
数学很重要 fill-rule属性提供了如何确定形状内部的两个选项：
nonzero——这个值通过在任何方向上绘制一条从该点到无穷远的光线，然后检查形状的一部分穿过光线的位置来确定形状中某点的“内部”。从0开始计数，每当路径段从左到右穿过光线时加1，每当路径段从右到左穿过光线时减1。计算交叉点后，如果结果为零，则该点位于路径之外。否则，它在里面。
evenodd——该值通过从任意方向绘制该点到无穷远的光线，并根据光线穿过的给定形状计算路径段的数量来确定形状中某点的“内部”。如果这个数字是奇数，那么这个点在里面; 如果连，那个点在外面。
记得学过一次，再复习一下{:4_173:} 红影 发表于 2024-11-11 23:00
fill-rule属性提供了如何确定形状内部的两个选项：
nonzero——这个值通过在任何方向上绘制一条从该点到 ...
这类东东是有的抽象的。总而言之，nonzero 和 evenodd 就是确定复杂交叉区域的“内”和“外”，从而决定路径包裹着的区域哪些部分填充颜色、哪些部分不填充颜色，就酱；然后去理解内外的规则就行。 这个花形漂亮，算式很奇妙，用三角函数取得xy值，再加个常数作为xy，在用角度和xy去画弧形，居然能得到这么漂亮的图形。渐变也漂亮，黑黑选得的颜色，让花儿看着那么闪亮，好像有光透出来一样{:4_199:} 问：什么花，答：神奇之花{:4_199:} 红影 发表于 2024-11-11 23:11
问：什么花，答：神奇之花
{:4_203:} 这么漂亮的花就当小播了。{:4_173:} 梦江南 发表于 2024-11-12 08:22
这么漂亮的花就当小播了。
很合适的 马黑黑 发表于 2024-11-11 22:58
找到绘制规律，一切就简单了
看着是简单的重复，可是效果一点也不简单。。
会者不难{:4_173:} 马黑黑 发表于 2024-11-11 22:59
数学很重要
主要是数学颜值高，整出来的效果有强烈的美感