キャンバス、弧に沿ってポイントツーポイントでオブジェクトを移動

Question

私はキャンバスの仕事で初心者です。私の挑戦は、オブジェクトを1つの静的座標から別の静的座標に移動することです。私はhttps://developer.mozilla.org/en-US/docs/Web/API/Canvas_API/Tutorial/Basic_animationsからソーラーシステムのコード例を使用しましたが、ブラウザーでf5を押した後、私のオブジェクトは現在の位置に残ります。私はf5を押して出発点afetにオブジェクトを返し、最終点を取得するとオブジェクトを停止します。

function draw() { 
var ctx = document.getElementById('myCanvas').getContext('2d'); 
ctx.globalCompositeOperation = 'destination-over'; 
ctx.clearRect(0,0,220,220); // clear canvas 
ctx.save(); 
ctx.translate(110,110); //relative for canvas center; 

//element 
var time = new Date(); 
ctx.rotate(- ((2*Math.PI)/8)*time.getSeconds() - ((2*Math.PI)/8000)*time.getMilliseconds()); 
ctx.translate(65,0);//moving radius 
ctx.beginPath();//draw the arc 
ctx.arc(10, 10, 6, 0, 2 * Math.PI, false); 
//ctx.restore(); 
ctx.lineWidth = 10; 
ctx.fillStyle = '#1e88e5'; 
ctx.fill(); 
ctx.strokeStyle = '#ffffff'; 
ctx.stroke(); 

// ctx.lineWidth = 5; 


ctx.stroke(); 


ctx.restore(); 
window.requestAnimationFrame(draw);}window.requestAnimationFrame(draw); 

https://jsfiddle.net/jkm5r5uu/

Answer 1

これを行うには、多くの多くの方法があります。ここではただ一つです

固定された中心点を中心に回転するある点から別の点に一定の速度でオブジェクトを移動するにはこのメソッドは、距離を変更できるようになり、最短の弧を移動します。

var sx = ?; // poition of object 
var sy = ?; 

var ex = ?; // end postion of object 
var ey = ?; 

var cx = ?; // the center point 
var cy = ?; 

まず最初に中心からの角度を取得し、終了点

var sa = Math.atan2(sy-cy,sx-cx); // start angle 
var ea = Math.atan2(ey-cy,ex-cx); // end angle 

は次いで中心部からの距離を取得する2

var ad = ea-sa; 
// get the shortest angle 
if(Math.abs(ad) > Math.PI){ 
    var a = Math.PI * 2 - Math.abs(ad); 
    if(ad > 0){ // get the correct sign 
     a = -a; 
    } 
    // set the new angular distance 
    ad = a; 
} 

間の角距離を取得します開始および終了

var sDist = Math.hypot(cx-sx,cy-sy); // Note IE does not support hypot use sqrt 
var eDist = Math.hypot(cx-ex,cy-ey); 

は今、あなたはあなたが欲しい角度と距離のを知っていればあなたはまた、単に上記の目的を設定することができ

var moveArc = { 
    dist : sDist, // start dist 
    distChange: eDist-sDist, // change in distance 
    angle : sa, // start ang 
    angleDist : ad, // ang dist 
    x : cx, // center of rotation x,y 
    y : cy, 
} 

アニメーションで使用できるようにオブジェクトに保存し、必要なすべての情報を持っています旅行。回転中心が動いている場合でも簡単に追加できます。ただ、

function getArcPosition(amount, moveArc){ //amount is unit distance along 
           // where 0 is at start 
           // 0.5 is half way 
           // 1 is at end 
    // get the angle 
    var ang = moveArc.angle + moveArc.angleDist * amount; 
    // get the distance 
    var dist = moveArc.dist + moveArc.distChange* amount; 

    return { 
     x: moveArc.x + Math.cos(ang) * dist, 
     y: moveArc.y + Math.sin(ang) * dist 
    } 
} 

が一定時間

かけていることを適用するには、そのデータから位置を取得するに移動し、その後、

以下の角度とDISTに行われているものをそれに行うために、中心のためdisatnceのX、Yを追加

timeToMove = 5000; // 5 seconds 
startTime = ?; // time to start 
now = ?; // current time 

var pos = getArcPosition(Math.max(0,Math.min(1,(now-startTime)/timeToMove)),moveArc); 

Posは、円弧に沿って移動するオブジェクトの位置です。