Question

假设我有一个对象（比如一个球），我想要移动一个矩形（或方形，三角形）。我知道我可以使用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/

Answer 1

您可以沿着这样的线段获取XY

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

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

如果你想以均匀的速度制作动画，它会变得有点复杂。

您必须预先计算要行驶的距离（总和线段长度）。

然后你需要沿着路径以相等的距离移动你的球。

这是代码和小提琴：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>

移动矩形中的对象

1 个答案: