如何计算贝塞尔曲线上的控制点？

Question

我确实有一条贝塞尔曲线，在某个点上，我想要第二条贝塞尔曲线以平滑的方式“分支”第一条曲线。除了计算交点（贝塞尔曲线后面的百分比）之外，我还需要控制点（切线和权重）。 交点是使用以下 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 -> 教程 -> 组和路径）。 我现在需要的是分支点的控制点或（切线和权重）（我不知道从哪里开始，我希望有人可以指出一些代码或数学方程，如果可能的话作为来自相同参数的函数如上面的 getBezier 函数）。

Answer 1

发现并实现它：de-Casteljau 算法被证明是最快的可实现解决方案。目前它位于：
iScriptDesign（教程 -> Spit Bezier）。

Answer 2

示例用法（我想，我需要@drjerry的帮助）

我有一个css3计时函数，这称为ease-in-out：cubic-bezier(.42,0,.58,1) 。从图形上看，这看起来像： http://cubic-bezier.com/#.42 ,0,.58,1

我想创建一个新的计时函数，它只是该图的下半部分，然后是上半部分。

所以下半部分是ease-in：cubic-bezier(.42,0,1,1)。以图形方式表示： http://cubic-bezier.com/#.42,0,1 ,1

上半部分是ease-out：cubic-bezier(0,0,.58,1)。以图形方式表示： http://cubic-bezier.com/#0,0,.58 ,1

所以现在让我困惑的是，根据 iScriptDesign 的脚本，它告诉我它们是不同的。

iScriptDeisgn 表示 ease-in-out 的开始部分（即 ease-in）是：cubic-bezier(.21, 0, .355, .25）。以图形方式表示： http://cubic-bezier.com/#.21,0 ,.35,.25

iScriptDeisgn 表示 ease-in-out 的结尾部分（即 ease-out）是：cubic-贝塞尔曲线（.145，.25，.29，.5）。以图形方式表示： http://cubic-bezier.com/#.14, .25,.29,.5

为什么iScriptDesign split函数返回的ease-in和ease-out与真实的ease不同-in 和真正的ease-out？我不明白。

本示例的代码。

//////////////////START FROM ISCRIPTDESIGN
var splitBezier = function(array, perc) {
    array.unshift({x:0, y:0});
    var coll = [];
    while (array.length > 0) {
    for (var i = 0;i < array.length-1; i++) {
        coll.unshift(array[i]);
        array[i] = interpolate(array[i], array[i+1], perc);
    }
    coll.unshift(array.pop());
    }
    return {b1: [{x:coll[5].x, y:coll[5].y}, {x:coll[2].x, y:coll[2].y},{x:coll[0].x, y:coll[0].y}]
        , b2: [{x:coll[1].x - coll[0].x,y:coll[1].y-coll[0].y}, {x:coll[3].x - coll[0].x,y:coll[3].y-coll[0].y}, {x:coll[6].x - coll[0].x,y:coll[6].y-coll[0].y}]};
}

var interpolate = function (p0, p1, percent) {
    if (typeof percent === 'undefined') percent = 0.5;  
    return  {x: p0.x + (p1.x - p0.x) * percent
         , y: p0.y + (p1.y - p0.y) * percent};
}
//////////////////END FROM ISCRIPTDESIGN
var coord = function (x,y) {
  if(!x) var x=0;
  if(!y) var y=0;
  return {x: x, y: y};
}
var easeInOut = [new coord(.42,0), new coord(.58,1), new coord(1,1)];
var split50percent = splitBezier(easeInOut.slice(), .5);

因此 split50percent 设置为：

({
    b1: [{
        x: 0.21,
        y: 0
    }, {
        x: 0.355,
        y: 0.25
    }, {
        x: 0.5,
        y: 0.5
    }],
    b2: [{
        x: 0.14500000000000002,
        y: 0.25
    }, {
        x: 0.29000000000000004,
        y: 0.5
    }, {
        x: 0.5,
        y: 0.5
    }]
})

---

与 easeInOutSine 相同

• easeInOutSine:.44,.05,.55,.95
• REAL
  • easeInSine：0.47, 0, 0.745, 0.715
  • easeOutSine：0.39、0.575、0.565、1
• iScriptDesign
  • easeInSine:.22,.03,.36,.26
  • easeOutSine:.14,.24,.28,.48