二阶贝塞尔曲线与 cc.Bezier

二阶贝塞尔曲线公式如下：

1.png

看起来有一点抽象，我们来推导一下二阶贝塞尔曲线的公式，如下图：

p1.png

二阶贝塞尔曲线的原理是，Q0 是 P0 到 P1 上的动点，Q1 是 P1 到 P2 上的动点，它们在 P0P1 和 P1P2 上是按比例移动的，也就是说，当 Q0 移动到 P0P1 的中点时，Q1 也恰好移动到 P1P2 的中点， Q0 移动到 P1 时，Q1 也恰好移动到 P2 。而 B(t) 是 Q0 到 Q1 的动点，它也是按比例移动的，B(t) 的轨迹，就是以 P0 为起始点，以 P2 为终止点，以 P1 为控制点的二阶贝塞尔曲线。有了这个原理，就可以推导公式了。

首先，Q0 和 Q1 两点的位置为：

2.png

3.png

根据二阶贝塞尔曲线原理，有：

7.png

而：

6.png

4.png

5.png

代入，得：

8.png

整理一下，就可以得到二阶贝塞尔曲线的公式了。

下面是二阶贝塞尔曲线的一个动图：

p2.gif

在 Cocos2D-JS 中，使用 cc.BezierTo 或者 cc.BezierBy 来创建贝塞尔曲线轨迹的动作，它们都接受两个参数，一个是持续时间，一个是点的数组。

在调试动作时让精灵做动作来观察效果不太直观，我们可以利用 cc.DrawNode 将轨迹画出来。代码如下：

    var drawNode = new cc.DrawNode();
    this.addChild(drawNode);
    drawNode.drawQuadBezier(cc.p(0, cc.winSize.height/2), cc.p(300, -cc.winSize.height/2), cc.p(300, 100), 1000, 1, cc.color(0, 0, 0, 255));

绘制二阶贝塞尔曲线的 API 和实现为：

/**
 * draws a cubic bezier path
 * @override
 * @param {cc.Point} origin
 * @param {cc.Point} control1
 * @param {cc.Point} control2
 * @param {cc.Point} destination
 * @param {Number} segments
 * @param {Number} lineWidth
 * @param {cc.Color} color
 */
drawCubicBezier: function (origin, control1, control2, destination, segments, lineWidth, color) {
    lineWidth = lineWidth || this._lineWidth;
    color = color || this.getDrawColor();
    if (color.a == null)
        color.a = 255;

    var vertices = [], t = 0;
    for (var i = 0; i < segments; i++) {
        var x = Math.pow(1 - t, 3) * origin.x + 3.0 * Math.pow(1 - t, 2) * t * control1.x + 3.0 * (1 - t) * t * t * control2.x + t * t * t * destination.x;
        var y = Math.pow(1 - t, 3) * origin.y + 3.0 * Math.pow(1 - t, 2) * t * control1.y + 3.0 * (1 - t) * t * t * control2.y + t * t * t * destination.y;
        vertices.push(cc.p(x, y));
        t += 1.0 / segments;
    }
    vertices.push(cc.p(destination.x, destination.y));

    var element = new cc._DrawNodeElement(cc.DrawNode.TYPE_POLY);
    element.verts = vertices;
    element.lineWidth = lineWidth;
    element.lineColor = color;
    element.isStroke = true;
    element.lineCap = "round";
    this._buffer.push(element);
},

注意 segments 参数，不要取的太小，否则会变成折线，也不要取的过大，否则会崩溃 :)

谢谢观赏，如有错误，欢迎指出～