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);
// 必須用內差法從座標軸取值