应用错误收集

因此，让我们在300x300画布上画一个网格：

enter image description here

这样做。没什么特别的。红线表示原点所在的位置是通过（0,0）并且延伸得非常远，所以当我们翻译它时我们会看到一些东西。这里的原点是左上角，红线在（0,0）处相遇。

以下所有翻译都是在我们绘制网格之前发生的，因此我们将移动网格。这可以让您准确了解orgiin发生了什么。

因此，让画布翻译100,100，向下移动+向右：

enter image description here

所以我们翻译了原点，这是红色X居中的地方。起源现在是100,100。

现在我们将翻译然后进行扩展。注意原点与最后一张图像在同一个地方，一切都只是原来的两倍。

enter image description here

动臂。 orgin仍然是100,100。尽管如此，一切都在膨胀。原点发生了变化，然后一切都变得充实了。

现在让我们反过来看看它们。这次我们首先扩展，所以从一开始一切都很肥胖：

enter image description here

所有东西都被2膨胀。原点是0,0，它的起点。

现在我们做一个比例然后翻译。

enter image description here

我们仍然翻译100,100，但原点已经以实际像素为单位移动了200,200。将此与之前的两张图像进行比较。

这是因为必须缩放比例后发生的所有事情，包括其他变换。因此，在缩放的画布上按（100,100）进行变换会使其移动200,200。

这里需要记住的事情是，改变转换会影响从那时起绘制（或转换！）的方式。如果缩放x2，然后翻译，则翻译将为x2

如果您想以数学方式查看每个步骤中发生的情况，我建议您在此处查看代码：

这模仿了画布完成的整个转换过程，并让您看到之前的转换如何修改之后的转换。

相对于原点进行缩放和旋转，因此，如果您的变换具有翻译，那么这将使顺序变得重要。