Полис имеет тенденцию сокращаться при вращении - PullRequest
Новая
       6

Полис имеет тенденцию сокращаться при вращении

3 голосов
/ 13 сентября 2011

Так что моя проблема заключается в следующем.Я рисую полис на холсте, используя 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>

Ответы [ 2 ]

5 голосов
/ 14 сентября 2011

Ваша математика в порядке.Преступник скрывается в этих двух строках: 

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;
0 голосов
/ 14 сентября 2011

Спасибо за ваш ответ, во-первых :) Мне удалось выяснить это вчера, после пары часов ударов головой.Я заметил, что все это происходило в моих массивах.Думаю, это тоже распространенная ошибка.

В любом случае я заменил свою функцию поворота на: 

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

и все заработалохотя я думаю, что ваш код более эффективен, чем то, что я написал.Снова болеем за ценную информацию приятель:)

Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.

Нет похожих вопросов

...