如何沿多边形移动对象
How to move object along the polygons
假设(比如三角形),我想将一个对象从 A 移动到 B,然后从 B 移动到 C,然后从 C 移动到 A。我该怎么做?
我用谷歌搜索了很多,但找不到在多边形周围移动物体(比如球)的例子。我知道,我可以用贝塞尔曲线来完成,但是对于一个简单的三角形或矩形,没有它怎么办?请提供一些伪代码或任何语言的代码。(更喜欢JavaScript/Processing)。
插值
您可以使用插值来获取位置:
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。
小提琴 (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
的距离上除以步长值(预定义的固定值)。
相关文章:
- FabricJs-限制主对象内添加对象的移动区域
- 在javascript中移动对象内部的元素
- 计算从一个对象到另一个对象的路径并沿其移动
- 如何在鼠标悬停时将对象从起始位置移动到结束位置,然后在鼠标悬停后再次移动
- 如何移动PIXI显示对象
- 使用Keydown事件移动对象
- 用鼠标在threejs场景中移动对象
- 如何将嵌套对象移动到外部对象
- JQuery 可拖动 - 防止网格对象移动到同一位置
- 在使对象移动时处理多次单击
- 如何将可拖动对象移动到某个区域
- 如何将另一个 JSON 中的 JSON 对象移动到最后一个位置
- 如何将值从 JSON 对象移动到 JS 数组
- 无法使对象移动.Javascript
- FabricJS:对象:移动事件不会在用户选择多个对象时触发
- 屏幕对象移动与滚动移动/客户端 X
- 画布上的图像块画布对象移动
- 如何将一个项目从JSON对象移动到另一个JSON对象
- js将一个对象移动到另一个对象的下面
- 如何使用AngularFire将对象移动到数组的顶部