Javascript HTML5 Canvas 转换矩阵
声明：本页面是StackOverFlow热门问题的中英对照翻译，遵循CC BY-SA 4.0协议，如果您需要使用它，必须同样遵循CC BY-SA许可，注明原文地址和作者信息，同时你必须将它归于原作者（不是我）：StackOverFlow
原文地址: http://stackoverflow.com/questions/3630594/
Warning: these are provided under cc-by-sa 4.0 license. You are free to use/share it, But you must attribute it to the original authors (not me):
StackOverFlow
HTML5 Canvas Transformation Matrix
提问by Russell
I don't understand what the Transformation Matrix is and how to work with it.
我不明白转换矩阵是什么以及如何使用它。
The following will draw a circle at 0, 0 of my canvas: (generated from an svg converted with svg2canvas.jar)
以下将在我的画布的 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();
}
I would like to pass in arguments for setTransform() to draw on any part of my canvas, however I don't understand how to use it at all.
我想传入 setTransform() 的参数以在画布的任何部分进行绘制，但是我根本不明白如何使用它。
采纳答案by Eric LaForce
The transformation matrix they are referring to is the common transformation matrix found in linear algebra. Those arguments form the transformation matrix you wish to apply to your coordinates for the given shapes or paths. This pagedescribes the transformation method. Please look specifically at the matrix they define under the method signature for transformation. It shows you which parameters go where in transformation matrix. Now please also refer to the following link. If you scroll down you will see what each element in the transformation matrix means. For instance the [0,0] element (parameter a from the HTML5 transform method signature) of the transformation matrix represents how the coordinate will scale in the X direction. Hope this helps,
他们所指的变换矩阵是线性代数中常见的变换矩阵。这些参数形成了您希望应用于给定形状或路径的坐标的变换矩阵。此页面介绍了改造方法。请具体查看他们在转换方法签名下定义的矩阵。它显示了哪些参数在转换矩阵中的位置。现在也请参考以下链接。如果向下滚动，您将看到转换矩阵中的每个元素的含义。例如，变换矩阵的 [0,0] 元素（来自 HTML5 变换方法签名的参数 a）表示坐标在 X 方向上的缩放方式。希望这可以帮助，
回答by Matthew Crumley
The transformation matrix gets multiplied by each point before it's drawn on the canvas. Like @Eric said, it's an affine transformation matrixfrom linear algebra. In your example, it would work like this:
在画布上绘制之前，变换矩阵会乘以每个点。就像@Eric 所说的那样，它是来自线性代数的仿射变换矩阵。在您的示例中，它会像这样工作：
[ x'] [ 1 0 -551.23701 ] [ x ] [ x - 551.23701 ]
[ y'] = [ 0 1 -368.42499 ] [ y ] = [ y - 368.42499 ]
[ 1 ] [ 0 0 1 ] [ 1 ] [ 1 ]
So it shifts the x and y coordinates by -551.23... and -368.42... respectively.
因此，它将 x 和 y 坐标分别移动 -551.23... 和 -368.42...。
Other types of transformations involve different "slots" in the matrix. For example, here's the matrix that scales the drawing by sxand sy(x and y scaling factors):
其他类型的转换涉及矩阵中的不同“槽”。例如，这里是按sx和sy（x 和 y 缩放因子）缩放绘图的矩阵：
[ sx 0 0 ]
[ 0 sy 0 ]
[ 0 0 1 ]
and rotation (angle is in radians):
和旋转（角度以弧度为单位）：
[ cos(angle) -sin(angle) 0 ]
[ sin(angle) cos(angle) 0 ]
[ 0 0 1 ]
The advantage of using a transformation matrix over calling individual methods, like translate, scale, and rotate, is that you can perform all the transformations in one step. It gets complicated though when you start combining them in non-trivial ways because you need to multiply the matrices together to get the final result (this is what functions like scale, etc. are doing for you). It's almost always easier to call each function instead of calculating it yourself.
使用转换矩阵在调用单独的方法，像的优势translate，scale和rotate，是，你可以在一个步骤执行所有的转换。但是，当您开始以非平凡的方式组合它们时，它会变得复杂，因为您需要将矩阵相乘以获得最终结果（这就是scale等函数为您所做的）。调用每个函数几乎总是比自己计算更容易。
The links @Eric mentioned and the transformation matrix article on Wikipediago into a lot more detail about how it all works.
回答by Simon Sarris
I have implemented a very simple Transformation class to keep track of the Canvas transformation matrix.You can use it to see just how the matrix works and what it is doing. The class will also allow you to keep track of the matrix since the Canvas won't allow you to retrieve the current matrix.
我已经实现了一个非常简单的Transformation 类来跟踪 Canvas 转换矩阵。您可以使用它来查看矩阵是如何工作的以及它在做什么。该类还允许您跟踪矩阵，因为 Canvas 不允许您检索当前矩阵。
回答by james.garriss
I found the examples on Apple's page to be helpful in understanding the transformation matrix:
我发现 Apple 页面上的示例有助于理解转换矩阵：
