javascript - 如何沿多边形移动对象

Question

假设(比如三 Angular 形)，我想将一个对象从 A 移动到 B，然后从 B 移动到 C，然后从 C 移动到 A。我该怎么做？

我在谷歌上搜索了很多，但找不到围绕多边形移动对象(比如球)的示例。我知道，我可以用贝塞尔曲线来完成，但是对于一个简单的三 Angular 形或矩形，没有它我怎么办？请给出一些伪代码或任何语言的代码。 (更喜欢 JavaScript/Processing)。

Answer 1

插值

可以通过插值的方式获取位置:

x = x1 + (x2 - x1) * f;
y = y1 + (y2 - y1) * f;

x1, y1 是您的第一个点，x2, y2 是您的终点。

f 是一个介于 0.0 和 1.0 之间的值，它决定了您所在的位置(即 0 = 开始，0.5 是中间，1 = 结束)。

当您 f = 1 时，您只需转到多边形中的下一段并将 f 重置为 0。

Fiddle (JS)

伪:

//prepare first segment:

x1 = nextX1;
y1 = nextY1;
x2 = nextX2;
y2 = nextY2;

loop:
    f += speed;  /// f.ex. 0.01

    x = x1 + (x2 - x1) * f;
    y = y1 + (y2 - y1) * f;

    if f=1 then
        f = 0;
        x1 = nextX1;
        y1 = nextY1;
        x2 = nextX2;
        y2 = nextY2;

    repeat loop;

JavaScript 示例(完整工作示例请参见上面的演示链接)

function loop() {

    /// leave a trace behind for demo
    ctx.clearRect(x + 1, y + 1, 6, 6);
    
    f += speed;
    
    if (f >= 1) {
        /// initialize next line in polygon (see demo)
        getNextSegment();
    }

    /// Here: get x and y based on interpolation       
    x = x1 + (x2 - x1) * f;
    y = y1 + (y2 - y1) * f;    

    /// draw something to show position
    ctx.fillRect(x, y, 8, 8);
    
    /// loop
    requestAnimationFrame(loop);
}

对于恒定速度，计算起点和终点之间的距离，并在您用于速度的距离上除以步长值(预定义的固定值)。