如何讓x和y在同一行上移動？

我試圖創建一個使用PIXIJs和移動圓，這將在鼠標單擊事件移動，它的工作，但問題是要麼第一或初始y位置到達X，如何讓x和y在同一行上移動？

的問題是，它達到x或或y位置更接近圓形，但我需要將同一行上的圓移向目標（鼠標點擊區域）...

我做了一些計算，但是這不起作用...任何關於移動到直線的想法？

這裏是我的小提琴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(){ 
 
\t if(rect.pivot.x !== xDestination && rect.pivot.y !== yDestination){ 
 
\t if(rect.x > xDestination) { 
 
\t \t rect.x -= 5; 
 
\t } else { 
 
\t \t rect.x += 5; 
 
\t } 
 
\t if(rect.y > yDestination) { 
 
\t \t rect.y -= 5; 
 
\t } else { 
 
\t \t rect.y += 5; 
 
\t } 
 
\t } 
 
}) 
 
bodyy.click = function(mouseData){ 
 
\t xDestination = Math.round(mouseData.data.global.x -20); 
 
\t 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

來源

2017-08-14 Gopinath

問題在於你的代碼存在於這個名爲_app.ticker.add（_ - 你總是增加/減少5個單位。你需要做的是（a）獲取當前（b）得到新的位置（c）計算兩者之間的差異（d）將該向量（x和y）除以要爲其設置動畫的幀的數量。然後，將有兩個不同的值用於增量X和Y值;;） – enhzflep

您沿對角線移動，直到半徑要麼x座標或y座標等於目標，你要的是不想要的。如果兩個座標不完全相等，則會導致鋸齒效應。

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

這引起圓直接沿兩個點之間的線移動：

與更換整個嵌套if語句。

來源

2017-08-15 03:02:21

哇其工作感謝... @JonMark佩裏 – Gopinath

很高興你得到它的工作:) –

你提出它簡單:)，快樂的編碼 – Gopinath

如果要移動圓心，以CURREN點t那就試試這個：

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

20 - 一個圓圈

來源

2017-08-14 12:28:33

不錯的主意，但需要移動在同一行的圓圈@ivan – Gopinath

如何讓x和y在同一行上移動？

回答

相關問題