如何沿多边形移动对象

时间:2013-09-26 20:59:42

标签: javascript language-agnostic html5-canvas processing

假设(比如三角形),我想将一个物体从A移动到B然后B移动到C然后C移动到A.我怎么能这样做?

我google了很多,但找不到在多边形周围移动物体(比如球)的例子。我知道,我可以用贝塞尔曲线完成它,但对于一个简单的三角形或矩形,如果没有它,我该怎么办呢?请用任何语言提供一些伪代码或代码。 (更喜欢JavaScript / Processing)。

1 个答案:

答案 0 :(得分:5)

插值

您可以使用插值来获取位置:

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);
}

对于恒定速度计算起始终点之间的距离,并在用于speed的距离上划分步长值(预定义的固定值)。