2017年10月12日 星期四

用4點產生 cubicBezier 的座標


/**
 * 給予所有的控制點(只負責一維)
 *
 * @param {*} points: 控制曲線的點數
 * @param {*} t: 0-1
 */
function cubicBezier(points, t) {

    var tmpPoints;

    while (points.length > 1) {

        tmpPoints = [];
        for (var i = 0; typeof points[i + 1] !== 'undefined'; i++) {

            var value = (points[i + 1] - points[i]) * t + points[i];
            tmpPoints.push(value);
        }
        points = tmpPoints.slice();
    }

    return points[0];
}


// 形成座標軸
function genCoordinate(data, sample) {
    var sample = sample || 10;

    var coordinate = [];

    var x = [];
    var y = [];

    data.forEach(function (v, i) {
        x.push(v.x);
        y.push(v.y);
    });

    var loop = true;
    var _sample = (1 / sample);
    for (var i = 0; loop; i += _sample) {

        if (i >= 1) {
            i = 1;
            loop = false;
        }
        var _x = cubicBezier(x, i);
        var _y = cubicBezier(y, i);

        coordinate.push({x: _x, y: _y});
    }

    return coordinate;
}

// 4個控制點
var points = [{x: 0, y: 0}, {x: 1, y: 0}, {x: 1, y: 0}, {x: 1, y: 1}];

// 產生座標
var res = genCoordinate(points);

console.dir(res);

// 必須用內差法從座標軸取值