Question

所以我的问题就在于此。我在画布上使用javascript绘制多边形。我也尝试使用sin / cos基于任何给定点旋转那些多边形。我避免翻译和画布旋转。鼠标移动时会发生旋转。

事情的结果很奇怪。我的多元素由于某种原因倾向于缩小，我无法弄清楚原因。

我的猜测是围绕数学动作sin / cos结合如何在矩阵周围设置坐标？也许我应该围绕价值观或？我不确定也太困惑。

以下代码正常运行。如果你可以运行代码，你可以得到我的意思任何帮助或解释为什么会发生这种情况将受到高度赞赏。欢呼声。

<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<object.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>

Answer 1

你的数学很好。罪魁祸首隐藏在这两行中：

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;

第二行使用的vPoint[i][0]已被第一行修改（vPoint和object.vertexPoints指向同一个数组。）

使用以下内容替换这两行可防止收缩：

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;

Answer 2

首先感谢您的回答:) 经过几个小时的敲击，我昨天设法弄明白了。我注意到我的阵列上发生了一切。认为这也是一个常见的错误。

无论如何我用这个替换了我的旋转功能：

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);
        }
}

并完成所有工作。虽然我认为你的代码比我写的更有效。再次欢呼有价值的信息朋友：）

多边形在旋转时趋于收缩

2 个答案: