javascript - 及时绘制 HTML5/Javascript Canvas 路径

Question

假设我有一条路径:

var context = canvas.getContext('2d');
context.beginPath();
context.moveTo(100, 20);
context.lineTo(200, 160);
context.quadraticCurveTo(230, 200, 250, 120);
context.bezierCurveTo(290, -40, 300, 200, 400, 150);
context.lineTo(500, 90);
context.lineWidth = 5;
context.strokeStyle = 'blue';
context.stroke();

这一次打印所有路径:

如何将路径拆分为给定长度的子路径？例如:context.splitCurrentPathIntoSubPath(0, 0.75) 应该只返回路径的前 3/4。

我想用这个来实现一个动画。如果有更简单的方法，也欢迎。

Answer 1

使用均匀间隔的点绘制复杂路径的演示:

http://jsfiddle.net/m1erickson/2fodu9pa/

均匀速度概述

“速度”定义为每单位时间的距离。

“匀速”因此每单位时间行驶一致的指定距离。

因此，以每 1/60 秒 2 个像素的速度沿路径移动就是匀速移动的示例。

要行进 2 像素，您必须沿路径计算距离最后一点 2 像素的点。

以均匀速度逐渐绘制包含直线和曲线的路径需要数百次小计算。

以下是确定沿路径均匀分布的点数组的方法:

• 将您的路径分成几段:直线、二次曲线、贝塞尔曲线、直线。

• 使用定义每个线段的数学公式(参见下面的公式)计算每个线段上的许多 (300+) 个点，并将这些点放入一个数组中。

• 依次沿着每个点走并计算点与点之间的距离(见下面的公式)。

• 总计沿这些点行进的累计距离。

• 当当前点行进到指定长度时，将该点保存在第二个数组中。

然后，要逐步为路径设置动画，您可以创建一个动画循环，在第二个数组中的每个下一个点绘制一条线。

注意:如果您将指定的距离保持得足够小(例如 1-2 像素)，则绘制的线条会在必要时出现弯曲。

以下是支持此方法的公式:

沿线计算点:

// T is an interval between 0.00 and 1.00
// To divide a Line into 300 parts you would call the function 300 times 
// with T increasing 1.00/300 each time

function getLineXYatPercent(startPt,endPt,T) {
    var dx = endPt.x-startPt.x;
    var dy = endPt.y-startPt.y;
    var X = startPt.x + dx*T;
    var Y = startPt.y + dy*T;
    return( {x:X,y:Y} );
}

沿二次曲线计算点:

// T is an interval between 0.00 and 1.00
// To divide a Quadratic Curve into 300 parts you would call the function 300 times 
// with T increasing 1.00/300 each time

function getQuadraticBezierXYatT(startPt,controlPt,endPt,T) {
    var x = Math.pow(1-T,2) * startPt.x + 2 * (1-T) * T * controlPt.x + Math.pow(T,2) * endPt.x; 
    var y = Math.pow(1-T,2) * startPt.y + 2 * (1-T) * T * controlPt.y + Math.pow(T,2) * endPt.y; 
    return( {x:x,y:y} );
}

沿贝塞尔曲线计算点:

// T is an interval between 0.00 and 1.00
// To divide a BezierCurve into 300 parts you would call the function 300 times 
// with T increasing 1.00/300 each time

function getCubicBezierXYatT(startPt,controlPt1,controlPt2,endPt,T){
    var x=CubicN(T,startPt.x,controlPt1.x,controlPt2.x,endPt.x);
    var y=CubicN(T,startPt.y,controlPt1.y,controlPt2.y,endPt.y);
    return({x:x,y:y});
}

// cubic helper formula at T distance
function CubicN(T, a,b,c,d) {
    var t2 = T * T;
    var t3 = t2 * T;
    return a + (-a * 3 + T * (3 * a - a * T)) * T
    + (3 * b + T * (-6 * b + b * 3 * T)) * T
    + (c * 3 - c * 3 * T) * t2
    + d * t3;
}

两点之间的距离:

var dx=point2.x-point1.x;
var dy=point2.y-point1.y;
var distance=Math.sqrt(dx*dx+dy*dy);

祝你的项目好运!