在 javascript 中旋转矢量

Question

抱歉，我知道这个问题之前已经提出来了，但我正在努力让这个程序在 canvas 上画一个星。该矢量不仅指向错误的方向，而且尺寸也缩小了。

我意识到数组可能比对象更快（？），但这是为了尽可能保持程序的可读性。恕我直言 vector.x 比 vector[0] 更清晰。可能是个人喜好问题，但我尽量让代码对学习者来说尽可能清晰。

提前致谢。

    <canvas id="canvas" height="600px" width="1000px">

    </canvas>

    <script>

        draw();

        function draw() {
                var ctx = document.getElementById('canvas').getContext('2d');

                var currentPoint={x: 500, y: 300}; //start point
                var moveDist = 300;
                var turnAngle = 144;
                var repetitions = 5;
                var turnAngleRadians = turnAngle * (Math.PI/180)
                var moveVector = {x:moveDist, y:0}; //start facing right

                ctx.beginPath();
                ctx.moveTo(currentPoint.x, currentPoint.y);
                for(i=0;i<repetitions;i++){
                    moveVector = updateMV(moveVector, turnAngleRadians);
                    currentPoint.x = currentPoint.x + moveVector.x;
                    currentPoint.y = currentPoint.y + moveVector.y;
                    ctx.lineTo(currentPoint.x, currentPoint.y);
                }
                ctx.stroke();
            }

        function updateMV(moveVector, turnAngleRadians){
            var x2, y2
            x2 =    Math.cos(turnAngleRadians) * moveVector.x - Math.sin(turnAngleRadians) * moveVector.y;
            y2 =    Math.sin(turnAngleRadians) * moveVector.x - Math.cos(turnAngleRadians) * moveVector.y;
            moveVector.x = x2;
            moveVector.y = y2;
            return moveVector
        }

    </script>

Answer 1

让我们简化一下。

假设我们有一颗星星，我们将五个点（星星的点，不一定是 10 个几何点）从顶部开始顺时针命名为 A、B、C、D、E。我们想从 BE

行开始

我们现在将制作一个简单的直立星形，其中每条线的长度为 200。它将是一个矢量，角度为 72°，大小为 200，从点 (50,500) 开始。

但首先我们必须学习绘制矢量。我们做一个函数drawVector，然后做星星，每个角都是36°，然后递归应用它。

var canvas = document.getElementById("canvas"),
    ctx = canvas.getContext("2d"),
    vector = {x: 50, y: 500, deg: 0},
    length = 200;
function drawVector(degrees, magnitude) {
    var rad = degrees * (Math.PI / 180);
    var nextX = vector.x + Math.cos(rad) * magnitude;
    var nextY = vector.y - Math.sin(rad) * magnitude;
    currentAngle = degrees
    ctx.beginPath();
    ctx.moveTo(vector.x, vector.y);
    ctx.lineTo(nextX, nextY);
    ctx.stroke();
    vector.x = nextX;
    vector.y = nextY;
    vector.deg = degrees;
}
drawVector(72, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);
drawVector(180 + vector.deg + 36, 200);

注意：180 + vector.deg只是让下一点的起点与第一点相同。您可以尝试删除每个 drawVector(180... 以查看此内容。

Answer 2

y2 的公式是错误的，应该是 +

y2 = Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;

       draw();

        function draw() {
                var ctx = document.getElementById('canvas').getContext('2d');

                var currentPoint={x: 500, y: 300}; //start point
                var moveDist = 300;
                var turnAngle = 144;
                var repetitions = 5;
                var turnAngleRadians = turnAngle * (Math.PI/180)
                var moveVector = {x:moveDist, y:0}; //start facing right

                ctx.beginPath();
                ctx.moveTo(currentPoint.x, currentPoint.y);
                for(i=0;i<repetitions;i++){
                    moveVector = updateMV(moveVector, turnAngleRadians);
                    currentPoint.x = currentPoint.x + moveVector.x;
                    currentPoint.y = currentPoint.y + moveVector.y;
                    ctx.lineTo(currentPoint.x, currentPoint.y);
                }
                ctx.stroke();
            }

        function updateMV(moveVector, turnAngleRadians){
            var x2, y2
            x2 =    Math.cos(turnAngleRadians) * moveVector.x - Math.sin(turnAngleRadians) * moveVector.y;
            y2 =    Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;
            moveVector.x = x2;
            moveVector.y = y2;
            return moveVector
        }

    <canvas id="canvas" height="600px" width="1000px">

    </canvas>

Answer 3

多么愚蠢的错误。感谢您的帮助 hmpphep.

通过将 y2 的转换计算更改为：

解决了这个问题

y2 =    Math.sin(turnAngleRadians) * moveVector.x + Math.cos(turnAngleRadians) * moveVector.y;

在 javascript 中旋转矢量

Rotate Vector in javascript

javascript

canvas

vector

rotation