在JavaScript Canvas中沿着一条线移动一个点

Question

假设我有一条线的坐标(25,35 45,65,30,85 - 它将是两部分线).我需要每帧以恒定的距离沿着那条线移动一个点(汽车).我怎样才能做到这一点？

Answer 1

嘿,所以你的2行有坐标(25,35)(45,65)(30,85),你要移动的点将被放置在这些坐标的第一个(25,35)和你希望它移向第二个坐标(45,65)(第一个线段的末尾).

第一步是获得点移动的方向,方向是点位置和目标位置之间的角度.要找到这个角度,你可以使用Math.atan2(),作为第一个参数传入target position Y - the point position Y,并作为第二个参数target position X - the point position X.

var Point = {X: 25, Y: 35};
var Target = {X:45, Y:65};

var Angle = Math.atan2(Target.Y - Point.Y, Target.X - Point.X);

现在获得该角度的正弦和余弦,正弦是沿Y轴移动的值,余弦是在X轴上移动多少.将正弦和余弦乘以您想要移动每帧的距离.

var Per_Frame_Distance = 2;
var Sin = Math.sin(Angle) * Per_Frame_Distance;
var Cos = Math.cos(Angle) * Per_Frame_Distance;

好的,现在要做的就是设置重绘方法,在该方法中,将正弦值添加到点的Y位置,将余弦值添加到每次调用时点的X位置.检查点是否已到达目的地,然后执行相同的过程以移向第二个线段的末尾.

Answer 2

考虑一下这条线(25,35 45,65).从开始到结束的向量是(20,30).要在该方向上移动一个点(x,y),我们可以添加该向量:

V =(20,30)(x,y)=>(x + 20,y + 30).

如果我们从行的开头开始,我们将在结束时到达.但这太重要了.我们想要一些更小但方向相同的东西,所以我们将矢量乘以比如0.1:

V =(2,3)(x,y)=>(x + 2,y + 3)=>(x + 4,y + 6)=> ...

规范化很方便,即使其长度为1,我们通过除以它的长度来做:

V => V/| V | =(2,3)/ sqrt(2 ² + 3 ²)=(7.21,10.82)

然后你可以将它乘以你想要的任何步长.

Answer 3

8 年太晚了，但有人可能会发现这很有用。这种方法要快得多，因为它不使用 atan、cos、sin 和平方根之类的东西，这些东西都很慢。

function getPositionAlongTheLine(x1, y1, x2, y2, percentage) {
    return {x : x1 * (1.0 - percentage) + x2 * percentage, y : y1 * (1.0 - percentage) + y2 * percentage};
}

将百分比作为 0 和 1 之间的值传递，其中 0 是行的开头，1 是行的结尾。

var xy = getPositionAlongTheLine(100, 200, 500, 666, 0.5);
console.log(xy.x, xy.y);