javascript - 多边形倾向于在旋转时收缩-6ren

javascript - 多边形倾向于在旋转时收缩

转载作者：搜寻专家更新时间：2023-10-31 23:12:04

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

结果很奇怪。由于某种原因，我的多边形往往会缩小，但我不知道为什么。

我的猜测是围绕数学运算 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>

最佳答案

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

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;

关于javascript - 多边形倾向于在旋转时收缩，我们在Stack Overflow上找到一个类似的问题： https://stackoverflow.com/questions/7405521/