移動一個矩形對象

假設我有一個對象（比如一個球），我想移動一個矩形（或正方形，三角形）。我知道我可以使用sin/cos將該物體移動成一個圓形（或任何其他圓形），但是如何移動成一個矩形/三角形？移動一個矩形對象

下面的代碼示例：

function Ball(radius, color) { 
    this.radius = radius || 40; 
    this.color = color || "#ff0000"; 
    this.x = 0; 
    this.y = 0; 
    this.rotation = 0; 
    this.scaleX = 1; 
    this.scaleY = 1; 
    this.lineWidth = 1; 
} 

Ball.prototype.draw = function (c) { 
    // code for drawing ball 
} 

function drawRightTriangle(h, w, range) { 
    // Code for triangle 
} 


// Initialize the ball 
var ball = new Ball(); 

ball.x = cw/2, ball.y = ch/2, ball.radius = 10; 

var speed = 0.05, 
    range = 50, 
    height = 0, 
    hypo = 0, 
    base = 0; 

// Here I have use, base = 3, hypo = 5, height = 3 for limits; 
(function drawFrame() { 
    window.requestAnimationFrame(drawFrame); 
    c.clearRect(0, 0, cw, ch); 

    ball.x = cw/2 + base*range; 
    if(base > 3) { 
     base = 3; 
     ball.y = ch/2 - height*range; 
     height += speed; 
     if(height > 4) { 
      height = 4; 
      // Now what to do 
      // Also, I think this function is messy. 
     } 
    } 

    base += speed; 
    drawRightTriangle(4, 3, range); 
    ball.draw(c); 

}());

這裏是爲了什麼，我迄今所取得的演示：http://jsfiddle.net/sxy2A/1/

來源

2013-09-23 Ashish Rawat

我認爲這將是有益的，如果你還可以添加一些代碼，你已經有，使用正弦/餘弦，這樣我們就可以更好地看到它移動它。 – mavrosxristoforos

您可以沿着一條線段這樣

var dx = endX - startX; 
var dy = endY - startY; 

var x = startX + dx*percent; 
var y = startY + dy*percent;

得到XY

如果你想以平滑的速度動畫，它會變得更復雜一些。

您必須預先計算行駛距離（總和線段長度）。

然後你需要沿着路徑等距離移動你的球。

這裏的代碼和一個小提琴：http://jsfiddle.net/m1erickson/E7uDv/

<!doctype html> 
<html> 
<head> 
<link rel="stylesheet" type="text/css" media="all" href="css/reset.css" /> <!-- reset css --> 
<script type="text/javascript" src="http://code.jquery.com/jquery.min.js"></script> 

<style> 
    body{ background-color: ivory; padding:10px; } 
    #canvas{border:1px solid red;} 
</style> 

<script> 
$(function(){ 

    var canvas=document.getElementById("canvas"); 
    var ctx=canvas.getContext("2d"); 
    ctx.fillStyle="red"; 

    points = [{x:50, y:125},{x:200,y:50},{x:200,y:200},{x:50,y:125}]; 

    var totDistance=0; 

    for (var i = 0; i<points.length-1;i++){ 
     var p = points[i], 
      q = points[i+1], 
      dx = p.x - q.x,   
      dy = p.y - q.y,   
      dist = Math.sqrt(dx*dx + dy*dy); 
      totDistance+=dist; 
      points[i].dist=dist; 
      points[i].untraveled=dist; 
    } 

    var steps=150; 
    var distancePerStep=totDistance/steps; 
    var totTraveled=0; 
    var currentPoint=0; 

    // drop first ball 
    drawBall(points[0].x,points[0].y); 

    animate(); 

    function animate(){ 

     var mustTravel=distancePerStep; 

     while(mustTravel>0){ 

      // check if we're done 
      if(currentPoint >= points.length-1){console.log("done"); return;} 

      var pt0=points[currentPoint]; 
      var pt1=points[currentPoint+1]; 
      var dx=pt1.x-pt0.x; 
      var dy=pt1.y-pt0.y; 
      var lastX,lastY; 

      if(pt0.untraveled<mustTravel){ 

       // travel this whole segment 
       lastX=pt1.x; 
       lastY=pt1.y; 

       // and reduce d by length traveled 
       mustTravel -= pt0.untraveled; 
       pt0.untraveled = 0; 
       if(mustTravel<1){mustTravel=0;} 

       // go onto the next point 
       currentPoint++; 

      }else{ 

       // travel only part of this segment 
       // It has enough available length to complete travel 

       // start at the previously traveled point on the segment 
       var prevTraveled = pt0.dist - pt0.untraveled; 
       var x1 = pt0.x + dx * prevTraveled/pt0.dist; 
       var y1 = pt0.y + dy * prevTraveled/pt0.dist; 

       // travel only part of segment 
       var x2 = x1 + dx * mustTravel/pt0.dist; 
       var y2 = y1 + dy * mustTravel/pt0.dist; 

       // update segement and untraveled 
       lastX=x2; 
       lastY=y2; 
       pt0.untraveled -= mustTravel; 
       mustTravel=0;; 

      } 

     } 

     // drop a ball 
     drawBall(lastX,lastY); 

     setTimeout(animate,17); 
    } 


    function drawBall(x,y){ 
     ctx.clearRect(0,0,canvas.width,canvas.height); 
     drawPath(); 
     ctx.beginPath(); 
     ctx.arc(x,y,10,0,Math.PI*2,false); 
     ctx.closePath(); 
     ctx.fill(); 
     ctx.stroke(); 
    } 

    function drawPath(){ 
     ctx.beginPath(); 
     ctx.moveTo(points[0].x,points[0].y); 
     for(var i=1;i<points.length;i++){ 
      var point=points[i]; 
      ctx.lineTo(point.x,point.y); 
     } 
     ctx.stroke(); 
    } 



}); // end $(function(){}); 
</script> 

</head> 

<body> 
    <canvas id="canvas" width=360 height=350></canvas> 
</body> 
</html>

來源

2013-09-23 15:43:39 markE

移動一個矩形對象

回答

相關問題