Polys tend to shrink on rotation_问答_开发者_运维开发者技术经验分享

So my problem lies as this. Im drawing polys in canvas using javascript. Im also trying to rotate those polys based on any given point using sin/cos. Im avoiding translate and canvas rotate. Rotation happens on mouse movement.

Thing is the results come back quite weird. My polys tend to shrink for some reason and i cant figure out why.

My guess would be somewhere around the math action sin/cos combined with how coords are set around the matrix? Maybe i should round values or ? Im not sure and too confused.

The following code is functional. If you can run the code you can get what i mean Any help or explanation on why is this happening will be highly appreciated. Cheers.

<script type="text/javascript">
    var set = 
    {
    canvas:'canvas',
    fps:1000/60
    }


var gObjects = [];
function deg2rads(deg) { return deg*Math.PI/180; }

function drawPoly(object) 
    {
    if (object.vertexPoints)
        {
        var ctx = document.getElementById(set.canvas).getContext('2d');
            ctx.beginPath();
            ctx.moveTo(object.vertexPoints[0][0],object.vertexPoints[0][1]);
            ctx.fillStyle = '#f00';
        for (i=1;i<objec开发者_开发百科t.vertexPoints.length;i++)
            {
            ctx.lineTo(object.vertexPoints[i][0],object.vertexPoints[i][1]);
            }
        ctx.closePath();
        ctx.fill();
        }
    }

function block(vertex) 
    {
    if (vertex) { this.vertexPoints = vertex; }
    }

function rotate(object,degrees) {
    vPoint = object.vertexPoints;
    for (i=0;i<vPoint.length;i++)
        {
        rads = deg2rads(degrees);
        pX= 300;
        pY= 540;
        object.vertexPoints[i][0] = Math.cos(rads) * (vPoint[i][0] - pX) - Math.sin(rads) * (vPoint[i][1]-pY) + pX;
        object.vertexPoints[i][1] = Math.sin(rads) * (vPoint[i][0] - pX) + Math.cos(rads) * (vPoint[i][1]-pY) + pY;
    }
}
function mainGameLoop () 
    {
    var ctx = document.getElementById(set.canvas).getContext('2d');
        ctx.clearRect(0,0,600,600);     

        drawPoly(gObjects[0]);

    var gameTimer = setTimeout(mainGameLoop,set.fps);
    }


function iNitCanvas() {

var test = [[100,500],[500,500],[500,580],[100,580]];

var obj = new block(test);
gObjects[0] = new block(test);

mainGameLoop();

}

function mouseCoords() {
rotate(gObjects[0],-10);
}

</script>
<body onmousemove="mouseCoords();" onLoad="iNitCanvas();">
<input type="button" id="showCube" onclick="iNit();" value="GO!"/>
<canvas id="canvas" width="600" height="600" style="border:1px solid black;"></canvas>

</div>

</body>

Your math is fine. The culprit hides in these two lines:

object.vertexPoints[i][0] = Math.cos(rads) * (vPoint[i][0] - pX) - Math.sin(rads) * (vPoint[i][1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (vPoint[i][0] - pX) + Math.cos(rads) * (vPoint[i][1]-pY) + pY;

The second line uses vPoint[i][0], which was already modified by the first line (vPoint and object.vertexPoints point to the same array.)

Replacing these two lines with the following prevents the shrinkage:

var point = [ vPoint[i][0], vPoint[i][1] ];
object.vertexPoints[i][0] = Math.cos(rads) * (point[0] - pX) - Math.sin(rads) * (point[1]-pY) + pX;
object.vertexPoints[i][1] = Math.sin(rads) * (point[0] - pX) + Math.cos(rads) * (point[1]-pY) + pY;

Thanks for your answer in first place :) I managed to figure this out yesterday, after a couple of hours of head banging. I noticed it was all happening there on my arrays. Think its a common mistake also.

Anyways i replaced my rotate function with this :

function rotate(object,degrees) {
    if (object.vertexPoints)
        {
        var rads = deg2rads(degrees);
        var Point = new Array(object.vertexPoints.length);
        for (i=0;i<Point.length;i++) { Point[i] = new Array(2); }
        for (i=0;i<object.vertexPoints.length;i++)
            {
            pX= 300;
            pY= 540;
            Point[i][0] = Math.cos(rads) * (object.vertexPoints[i][0] - pX) - Math.sin(rads) * (object.vertexPoints[i][1]-pY) + pX;
            Point[i][1] = Math.sin(rads) * (object.vertexPoints[i][0] - pX) + Math.cos(rads) * (object.vertexPoints[i][1]-pY) + pY;
            }
        return Point;
        }
}

function mouseCoords(e) {

    if ((e||event).clientY<set.cursorY)
        {
        set.cursorY=(e||event).clientY;
        gObjects[0].vertexPoints = rotate(gObjects[0],-1);
        }
}

and got it all working. though i think your code is more efficient than what i wrote. Again cheers for the valuable info pal :)