javascript - 使用javascript将点添加到svg路径

标签 javascript bezier

我有一个 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 帮助可以从初始点绘制贝塞尔曲线,但是我没有找到任何用于逆向工程的帮助。所以我认为你有两种可能的方法,

1)

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

Reverse engineering Bezier curves

Reverse engineering a bezier curve

2)

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

Spline interpolation

关于javascript - 使用javascript将点添加到svg路径,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/14186393/

相关文章:

Android绘制动画虚线曲线

svg - 在SVG中用相对路径绘制贝塞尔曲线

javascript - ng-repeat 的 img 标签中的 data-original 属性中的转义链接

javascript - 使用 CocoonJS idtkscale 缩放 KineticJS Canvas

javascript - Inkscape 突出显示 svg 的不同部分并在 html 中操作 svg map

algorithm - 绘制地形图

ios - 从 UIBezierPath 获取点

javascript - 我可以在 ASP.NET 按钮上暂停回发并在完成某些任务后继续吗?

javascript - jQuery addClass 停止工作

javascript - SVG 动画路径 d 属性