xとyを同じ行に移動するにはどうすればいいですか？

Question

私は、問題はそれがXに到達したかで、マウスのクリックイベントに移動しますPIXIJsを使用して移動する円を、作成しようとしてその作業が、問題はどちらかであることが最初のx最初またはyの位置に到達し、

ましたまたは円に近いですが、私はターゲット（マウスclickdエリア）に向けて、同じライン上に円を移動する必要が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

Answer 1

の半径は、あなたが望む希望されていない目的地、に等しいです。また、2つの座標が正確に等しくない場合、これはジャギー効果を引き起こします。

と全体のネストされたifステートメント置き換え2つの点の間の線に沿って直接移動する円を引き起こす

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

を。

Answer 2

ですカレンTポイントは、この試してみてください。

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

20を - のx座標やy座標のいずれかまで、あなたは対角線に沿って移動する円