如何使x和y在同一条直线上移动？

Question

我试图使用PIXIJs创建一个移动的圆，它会在鼠标单击事件下移动。虽然它能够工作，但问题是它要么先到达x位置，要么先到达y位置。

问题在于它到达离圆更近的x或y位置，但我需要将圆沿着同一直线向目标（鼠标单击区域）移动...

我进行了一些计算，但并没有起作用...有什么关于将圆移动到直线上的想法吗？

这是我的fiddle链接：moving Circle

let xDestination = 100;
let yDestination = 100;

let app = new PIXI.Application(window.width,window.height);
document.body.appendChild(app.view);

let Graphics = new PIXI.Graphics();
Graphics.beginFill(0x00FFFF);
let rect = Graphics.drawCircle(20, 20, 20, 20);
let NewStage = new PIXI.Graphics();


NewStage.beginFill(0xFC7F5F);
let bodyy = NewStage.drawRect(0, 0, 500, 500);
bodyy.interactive = true;
rect.interactive = true;

app.stage.addChild(bodyy);
app.stage.addChild(rect);

let isMovingForward = true;

app.ticker.add(function(){
 if(rect.pivot.x !== xDestination && rect.pivot.y !== yDestination){
    if(rect.x > xDestination) {
    rect.x -= 5;
    } else {
    rect.x += 5;
    }
    if(rect.y > yDestination) {
    rect.y -= 5;
    } else {
    rect.y += 5;
    }
 }
})
bodyy.click = function(mouseData){
 xDestination = Math.round(mouseData.data.global.x -20);
 yDestination =  Math.round(mouseData.data.global.y -20);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/pixi.js/4.5.1/pixi.min.js"></script>

这里是我的JSfiddle

- Gopinath Kaliappan

---

问题出在你的代码中，它位于由此调用的匿名函数中：app.ticker.add( - 你总是添加/减去5个单位。相反，你需要做的是（a）获取当前位置（b）获取新位置（c）计算两者之间的差异（d）将此向量（x和y）除以你想要在其中进行动画处理的帧数。然后，你将有两个不同的值可用于delta X和Y值。 ;) - enhzflep

Answer 1

如果您想将圆形中心移动到当前点，则可以尝试这样做：

bodyy.click = function(mouseData){
       xDestination = Math.round(mouseData.data.global.x - 20);
       yDestination =  Math.round(mouseData.data.global.y - 20);
    }    

20 - 圆的半径

- Ivan Minakov

---

好主意，但需要将圆移动到同一条直线上 @ivan - Gopinath Kaliappan

Answer 2

你需要沿着对角线移动，直到x坐标或y坐标等于目的地，这不是你想要的。此外，如果两个坐标不完全相等，则会导致抖动效果。

用以下内容替换整个嵌套的if语句：

rect.x -= (rect.x-xDestination)/10;
rect.y -= (rect.y-yDestination)/10;

导致圆形沿着两点之间的直线直接移动。

- JMP

---

你让它变得简单了 :) ，愉快编码 - Gopinath Kaliappan