HTML5 Canvas - 放大一个点

Question

所以我知道这里已经有关于它的线程，比如 that one .我遵循了上面线程中提出的想法，并且有效。但是，我不明白为什么它会起作用。

这是一个例子:

假设我有一个以 (100, 100) 为中心的正方形，其宽度/高度为 100。因此它的左上角将位于 (50, 50)。

现在假设我想将 X2 放大到正方形的中心，即放大到 (100, 100)。所以我将编写以下转换序列:

translate(100, 100);
scale(2, 2);
translate(-100, -100);

因为 Canvas 以相反的顺序应用转换，我转换后的正方形的左上角现在将位于 (0, 0)，其高度/宽度将为 200。

好吧，假设现在我想将 X2 放大到已经变换的正方形的右下角。所以凭直觉，我想执行以下转换序列:

translate(200, 200);
scale(2, 2);
translate(-200, -200);

但它不会起作用，因为 Canvas 再次以相反的顺序应用转换。也就是说，如果我总结我的两个转换序列，我会得到:

// First Sequence
translate(100, 100);
scale(2, 2);
translate(-100, -100);

// Second Sequence
translate(200, 200);
scale(2, 2);
translate(-200, -200);

这意味着第二个序列将在第一个序列之前应用于每个点(因为 Canvas 将从下到上应用变换)，这是错误的。因此，正如上面链接中的线程所建议的那样:

因为序列 2 将首先应用，所以我应该将点 (200, 200) 应用到它的原始坐标，方法是将第一个序列的逆应用于它。也就是说，如果 T1 是表示第一个序列的矩阵，那么它将如下所示:

// First Sequence
translate(100, 100);
scale(2, 2);
translate(-100, -100);

// Second Sequence
var point = SVGPoint(200, 200);
var transformedPoint = point.matrixTransform(T1.inverse());
translate(-transformedPoint.x, -transformedPoint.y);
scale(2, 2);
translate(transformedPoint.x, transformedPoint.y);

但为什么它有效？我真的不明白为什么它应该那样工作...任何人都可以详细说明吗？

谢谢!

Answer 1

HTML5 Canvas 转换是自上而下发生的，而不是您认为的自下而上。区别的原因是应用于 Canvas 的变换影响坐标系，而不是您的逻辑坐标。

通过 translate(100, 100) 进行翻译将左右移动您的坐标系，这与上下移动您的逻辑坐标非常相似。

让我们来看第一个序列(我已将您对 transform 的使用更改为 translate):

translate(100, 100);
scale(2, 2);
translate(-100, -100);

自然地，当我们想从它的中心缩放对象时，我们将对象平移到 (0,0)，缩放对象，然后将对象移回。上面的代码，当反向阅读时，似乎是这样做的。然而，事实并非如此。

当我们自上而下阅读上面的代码时，它说(假设我们从身份转换开始):

1. 将上下文的 (0,0) 向右移动 100 个单位并向下移动 100 个单位。这会将它带到 Canvas 的 (100,100) 位置。
2. 将坐标系放大 2 倍。
3. 将上下文的 (0,0) 向左移动 100 个单位并向上移动 100 个单位，基本上将其返回到其原始位置(在上下文坐标空间中，而不是 Canvas 空间中)。

缩放相对于上下文的 (0,0) 点发生，即 Canvas 上的 (100,100)。

如果我们现在添加您的第二个序列:

translate(200, 200);
scale(2, 2);
translate(-200, -200);

这将:

1. 将上下文的 (0,0) 移动到坐标系的 (200,200) 位置。
2. 使坐标系比原来大 2 倍。
3. 将上下文的 (0,0) 返回到之前的位置(在上下文坐标空间中，而不是 Canvas 空间中)。

正如您所发现的那样，这并不能满足您的期望，因为 (200,200) 不是您想要扩展的点。请记住，所有单位都是相对于上下文坐标系的。所以我们需要将 (200,200) 的 Canvas 位置转换为 (150,150) 的上下文坐标位置，这是我们矩形的原始右下角。

因此我们将序列 #2 更改为:

translate(150, 150);
scale(2, 2);
translate(-150, -150);

这给了我们预期的效果(放大矩形的右下角)。这就是我们进行逆变换的原因。

在demo application ，当应用程序放大时，它会获取用户鼠标所在位置的 Canvas 单位坐标，使用到目前为止的上下文转换对其进行逆变换，以获取单击的上下文坐标空间中的位置。上下文原点被移动到那个位置，缩放，然后返回到它之前的位置。

引用资料:

• Safari HTML5 Canvas Guide: Translation, Rotation, and Scaling