HTML5画布转换矩阵

Question

我不明白转换矩阵是什么以及如何使用它。

以下将在我的画布的0,0处绘制一个圆圈:(从使用svg2canvas.jar转换的svg生成）

drawPoints: function(ctx, max_points)
        {
            ctx.save();

            ctx.setTransform(1, 0, 0, 1, -551.23701, -368.42499);

            ctx.fillStyle="#0066ab";
            ctx.globalAlpha="0.7";
            ctx.beginPath();
            ctx.moveTo(584.50,387.96);
            ctx.bezierCurveTo(584.50,397.14,577.05,404.59,567.87,404.59);
            ctx.bezierCurveTo(558.68,404.59,551.24,397.14,551.24,387.96);
            ctx.bezierCurveTo(551.24,378.77,558.68,371.33,567.87,371.33);
            ctx.bezierCurveTo(577.05,371.33,584.50,378.77,584.50,387.96);
            ctx.closePath();
            ctx.fill();

            ctx.restore();
        }

我想传递setTransform（）的参数来绘制我的画布的任何部分，但是我根本不明白如何使用它。

Answer 1

他们所指的变换矩阵是线性代数中的常见变换矩阵。这些参数构成了您希望应用于给定形状或路径的坐标的变换矩阵。这个page描述了转换方法。请具体查看他们在方法签名下定义的矩阵以进行转换。它显示哪些参数在转换矩阵中的位置。现在请参考以下link。如果向下滚动，您将看到转换矩阵中每个元素的含义。例如，变换矩阵的[0,0]元素（来自HTML5变换方法签名的参数a）表示坐标将如何在X方向上缩放。希望这可以帮助，

Answer 2

在画布上绘制之前，变换矩阵将乘以每个点。就像@Eric所说，这是来自线性代数的affine transformation matrix。在您的示例中，它将像这样工作：

[ x']   [ 1 0 -551.23701 ] [ x ]   [ x - 551.23701 ]
[ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ]
[ 1 ]   [ 0 0    1       ] [ 1 ]   [       1       ]

因此它将x和y坐标分别移动-551.23 ...和-368.42 ....

其他类型的变换涉及矩阵中的不同“槽”。例如，这是通过sx和sy（x和y缩放因子）缩放绘图的矩阵：

[ sx  0 0 ]
[  0 sy 0 ]
[  0  0 1 ]

和旋转（角度以弧度表示）：

[ cos(angle) -sin(angle) 0 ]
[ sin(angle)  cos(angle) 0 ]
[     0           0      1 ]

使用转换矩阵而不是调用单个方法（如translate，scale和rotate）的优点是，您可以一步完成所有转换。虽然当你开始以非平凡的方式组合它们时会变得复杂，因为你需要将矩阵相乘以得到最终结果（这就像scale等函数正在为你做的那样）。调用每个函数而不是自己计算它几乎总是更容易。

@Eric提到的链接和transformation matrix article on Wikipedia详细介绍了它是如何工作的。

Answer 3

我已经实现了一个非常简单的Transformation class to keep track of the Canvas transformation matrix.您可以使用它来查看矩阵如何工作以及它在做什么。该类还允许您跟踪矩阵，因为Canvas不允许您检索当前矩阵。

Answer 4

我发现Apple页面上的示例有助于理解转换矩阵：

https://developer.apple.com/library/archive/documentation/AudioVideo/Conceptual/HTML-canvas-guide/MatrixTransforms/MatrixTransforms.html