javascript - 如何计算贝塞尔曲线上的控制点?

标签 javascript svg bezier curve-fitting

我确实有一条贝塞尔曲线,在某个点,我想要第二条贝塞尔曲线以平滑的方式“分支”第一条曲线。除了计算交点(按照贝塞尔曲线的百分比),我还需要控制点(切线和权重)。 使用以下 javascript 计算交点:

getBezier = function getBez(percent,p1,cp1,cp2,p2) {
    function b1(t) { return t*t*t }
    function b2(t) { return 3*t*t*(1-t) }
    function b3(t) { return 3*t*(1-t)*(1-t) }
    function b4(t) { return (1-t)*(1-t)*(1-t) }
    var pos = {x:0,y:0};
    pos.x = p1.x*b1(percent) + cp1.x*b2(percent) + cp2.x*b3(percent) + p2.x*b4(percent);
    pos.y = p1.y*b1(percent) + cp1.y*b2(percent) + cp2.y*b3(percent) + p2.y*b4(percent);
    return pos;
}

(非 IE 浏览器可以在 http://www.iscriptdesign.com -> Tutorial -> Groups & Paths 看到它的运行)。 我现在需要的是分支点的控制点或(切线和权重)(我不知道从哪里开始,我希望有人可以指出一些代码或数学方程式,如果可能的话作为来自相同参数的函数如上面的 getBezier 函数)。

最佳答案

发现并实现了它:de-Casteljau 算法被证明是最快的可实现解决方案。它目前存在于: iScriptDesign (教程 -> Spit Bezier)。

关于javascript - 如何计算贝塞尔曲线上的控制点?,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/3958257/

相关文章:

java - 如何使用 java awt.Graphics2D 绘制锥度轮廓

geometry - 求两个整数二次贝塞尔曲线相交的快速方法?

javascript - 使用 Knockout Observable 数组的数据绑定(bind)复选框

javascript - 如何使用 jQuery 在当前选定行下方添加一行(基于下拉输入)?

javascript - jQuery 在滚动时添加和删除类

html - 有没有办法让 svg 元素可以在 html 页面上突出显示?

javascript - Angular 中选择框的默认值 "placeholder"?

javascript - 在 Nuxt JS 中导入 SVG 时,Jest 中的 "[Vue warn]: Invalid Component definition"

html - 将 FontAwesome 图标包含到 SVG 中

c++ - 在角线上拟合曲线?