5

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 点？

4

2 回答 2

11

您的 x 和 y 点仍将是 0 和 -70，因为它们与平移（旋转）相关。这基本上意味着您需要对矩阵进行“逆向工程”以获得您在画布上看到的结果位置。

如果你想计算一条在 -10 度下 70 像素的线，你可以使用简单的三角函数来自己计算（这比在矩阵中倒退更容易）。

您可以使用这样的函数来获取您的上下文、线的起始位置 (x, y)、要绘制的线的长度（以像素为单位）和角度（以度为单位）。它绘制线并返回一个对象，该对象带有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

或者您可以通过执行以下操作来扩展画布的上下文：

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 度将指向右侧）。

于 2013-06-11T21:10:28.310 回答
0

所以你问“在我设置一个变换后，我怎样才能通过那个变换运行点”？

在这种情况下，请参阅HTML5 Canvas 获取变换矩阵？. 问题和答案有些陈旧，但似乎是最新的。我在当前的 HTML5 规范中找不到任何可以让您访问和使用转换矩阵的东西。（我看到它在理论上可以通过 访问context.currentTransform，但我没有看到任何让您使用矩阵的功能 - 您必须自己通过矩阵乘以您的点，或者通过为您的点向量创建一个完整的 SVGMatrix 来伪造它。 )

最佳答案显示了您可以使用的转换类。通过它跟踪您的更改，并使用它们的transformPoint功能来获取您想要转换到其端点的点。

于 2013-06-11T15:44:51.713 回答