在线绘制多叶草——基于svg三次贝塞尔曲线路径

马黑黑

叶片总数 ：

3

控点半径 ：

300

间隔角度 ：

20

当前路径：

马黑黑

控点半径 ：指三次贝塞尔曲线控制点离画布中心点的距离，画布尺寸为 400 * 400。控点半径会影响到多叶草叶片的高度。

间隔角度 ：指三次贝塞尔曲线两个控制点间间隔的角度。角为第一控制点到画布中心点再到第二个控制点的连线。间隔角度作用于多叶草叶片的厚度。

不同的设置组合会得到不同的绘制效果，除了生成多叶草，还可以是奇离古怪的多肉乃至云朵、蘑菇等。

马黑黑

初始页面所绘制的估计与玫瑰线相吻合，至少肉眼看去很接近

马黑黑

得到 d 属性值后，可以将该路径用做自己设计的图案

花飞飞

马黑黑 发表于 2024-10-5 11:37
初始页面所绘制的估计与玫瑰线相吻合，至少肉眼看去很接近

又听到一个美术新名词儿。。三秒一下，原来玫瑰线是一种花瓣曲线。。怪好听的

花飞飞

马黑黑 发表于 2024-10-5 11:38
得到 d 属性值后，可以将该路径用做自己设计的图案

这个简直是万能了，把花瓣形曲线一网打尽，几乎所有的形状都可以用这个小工具得到。。

花飞飞

马黑黑 发表于 2024-10-5 11:36
控点半径 ：指三次贝塞尔曲线控制点离画布中心点的距离，画布尺寸为 400 * 400。控点半径会影响到多叶草叶 ...

数量和角度相结合，能得到各种意想不到的形状，惊奇。。
超实用工具。。
以前的canvas画布可以绘制多叶草，这个更牛，样式更多。。

马黑黑

花飞飞 发表于 2024-10-5 12:20
数量和角度相结合，能得到各种意想不到的形状，惊奇。。
超实用工具。。
以前的canvas画布可以绘制多叶 ...

实现机制不同

马黑黑

花飞飞 发表于 2024-10-5 12:15
又听到一个美术新名词儿。。三秒一下，原来玫瑰线是一种花瓣曲线。。怪好听的

玫瑰线又叫风玫瑰，最初与航海有关

马黑黑

花飞飞 发表于 2024-10-5 12:16
这个简直是万能了，把花瓣形曲线一网打尽，几乎所有的形状都可以用这个小工具得到。。

不会吧？一切基于多叶草

红影

间隔角度 ：指三次贝塞尔曲线两个控制点间间隔的角度。角为第一控制点到画布中心点再到第二个控制点的连线。间隔角度作用于多叶草叶片的厚度。

这个很神奇，只要相差1度，形状就大相径庭。还可以这样设置啊，还以为两个控制点只能用坐标表示，这个是用角度反算上去的么？

红影

这里的取值尾数保留这么多位啊，真够精确的

红影

上面的三个数字依次取了 10 400 41  得到的图形好奇妙

红影

三个数字只调其中一个，发现很多图形是交替出现的，应该是里面有内在规律的。

红影

这个在线工具太牛了，可以使用计算机强大的计算能力，得到很多意想不到的效果呢

梦江南

老师辛苦了！

马黑黑

红影 发表于 2024-10-5 12:44
间隔角度 ：指三次贝塞尔曲线两个控制点间间隔的角度。角为第一控制点到画布中心点再到第二个控制点的连线 ...

角度的变化会改变控制点的位置

马黑黑

红影 发表于 2024-10-5 12:45
这里的取值尾数保留这么多位啊，真够精确的

不做处理，保留计算出来的原始数值

马黑黑

红影 发表于 2024-10-5 12:50
三个数字只调其中一个，发现很多图形是交替出现的，应该是里面有内在规律的。

是的

马黑黑

梦江南 发表于 2024-10-5 15:14
老师辛苦了！