javascript - HTML5 Canvas 转换矩阵

Question

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

以下将在我的 Canvas 的 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() 传递参数以在我的 Canvas 的任何部分上绘制，但我根本不明白如何使用它。

Answer 1

在 Canvas 上绘制之前，变换矩阵会乘以每个点。就像@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 ]

和旋转( Angular 以弧度为单位):

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

与调用单个方法(如 translate、scale 和 rotate 相比，使用转换矩阵的优势在于您可以执行所有操作一步完成转变。但是，当您开始以非平凡的方式组合它们时，它会变得复杂，因为您需要将矩阵相乘以获得最终结果(这就是 scale 等函数正在为您做的)。调用每个函数几乎总是比自己计算更容易。

@Eric 提到的链接和 transformation matrix article on Wikipedia详细了解它的工作原理。