繁体   English   中英

使用javascript将点添加到svg路径

[英]Add points to svg path using javascript

我有一个SVG路径:

M352.793,422 C323.175,422 299.164,397.99 299.164,368.371 C299.164,338.753 323.175,314.742 352.793,314.742 C382.411,314.742 406.422,338.753 406.422,368.371 C406.422,397.99 382.411,422 352.793,422 z

我希望在不改变形状的情况下向其添加任意数量的点,均匀分布,最终得到如下结果:

M352.793,422 C337.895,422 324.416,415.925 314.698,406.118 C305.095,396.427 299.164,383.092 299.164,368.371 C299.164,352.91 305.707,338.978 316.174,329.191 C325.759,320.228 338.635,314.742 352.793,314.742 C366.299,314.742 378.639,319.735 388.068,327.975 C399.316,337.806 406.422,352.259 406.422,368.371 C406.422,383.21 400.395,396.641 390.656,406.351 C380.956,416.021 367.572,422 352.793,422 z

我知道它在数学上是可能的,因为它是由贝塞尔曲线定义的,它们本身可以在任意点分割而不改变曲线,但是如何计算出如何进行数学运算并生成新路径似乎是一项艰巨的任务。串。

有没有可以提供帮助的图书馆?

从我能找到的东西有很多javascript帮助从初始点绘制bezier曲线,但是我找不到逆向工程。 所以我认为你有两种可能的方法,

1)

对曲线进行逆向工程以获得原始点,然后使用较低的t_step重新创建曲线。 下面的链接显示了它是如何完成的基本。

逆向工程Bezier曲线

逆向工程贝塞尔曲线

2)

虽然你可能会失去一些精度,但我觉得应该可以使用三次样条插值来估计每个点之间的曲线。

样条插值

暂无
暂无

声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM