javascript - Canvas 旋转后查找坐标

0至0，-70，按此:

ctx.strokeStyle = "red";
ctx.lineWidth = 2;
ctx.rotate(Math.PI/-10;);
ctx.beginPath();
ctx.moveTo(0,0);
ctx.lineTo(0,-70);
ctx.stroke();

我可以将其旋转为“PI / -10”，并且可行。

使用旋转后，如何获得该点的x，y点？

最佳答案

您的x和y点仍然相对于平移(旋转)为0和-70。基本上，这意味着您需要对矩阵进行“逆向工程”，才能获得在 Canvas 上看到的最终位置。

如果要计算一条线，该线在-10度时达到70像素，则可以使用简单的三角函数自己计算(这比在矩阵中向后移动要容易得多)。

您可以使用类似这样的函数来获取您的上下文，线条的开始位置(x，y)，要绘制的线条的长度(以像素为单位)和 Angular (以度为单位)。它绘制直线，并返回一个对象，该对象带有x和y作为该行的终点:

function lineToAngle(ctx, x1, y1, length, angle) {

    angle *= Math.PI / 180;

    var x2 = x1 + length * Math.cos(angle),
        y2 = y1 + length * Math.sin(angle);

    ctx.moveTo(x1, y1);
    ctx.lineTo(x2, y2);
    ctx.stroke();

    return {x: x2, y: y2};
}

然后将其称为:

var pos = lineToAngle(ctx, 0, 0, 70, -10);

//show result of end point
console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2));

结果:

x: 68.94 y: -12.16

或者您可以通过执行以下操作来扩展 Canvas 的上下文:

if (typeof CanvasRenderingContext2D !== 'undefined') {

    CanvasRenderingContext2D.prototype.lineToAngle =
        function(x1, y1, length, angle) {

            angle *= Math.PI / 180;

            var x2 = x1 + length * Math.cos(angle),
                y2 = y1 + length * Math.sin(angle);

            this.moveTo(x1, y1);
            this.lineTo(x2, y2);

            return {x: x2, y: y2};
        }
}

然后直接在您的上下文中使用它，如下所示:

var pos = ctx.lineToAngle(100, 100, 70, -10);
ctx.stroke(); //we stroke separately to allow this being used in a path

console.log('x:', pos.x.toFixed(2), 'y:', pos.y.toFixed(2));

(0度将指向右侧)。

关于javascript - Canvas 旋转后查找坐标，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/17047378/