我正在围绕中心 X，Y 0,0 绘制一些图形。当需要渲染时，我使用翻译重新定位，然后使用缩放使图形填充画布（例如，将所有内容缩放 50%）。
我注意到，无论您调用缩放然后翻译，还是先翻译然后缩放，这都很重要，我无法完全理解它。这是一个问题，因为并非所有东西都适合，但我的心智模型并不完整，因此很难修复它。
有人可以解释为什么比例和翻译调用的顺序很重要吗？
问问题
8970 次
2 回答
22
所以让我们在 300x300 的画布上画一个网格：
http://jsfiddle.net/simonsarris/4uaZy/
这会做。没什么特别的。一条红线表示通过 (0,0) 并延伸非常非常远的原点所在的位置，所以当我们翻译它时，我们会看到一些东西。这里的原点是左上角，红线在 (0,0) 处相交。
下面的所有翻译都发生在我们绘制网格之前，所以我们将移动网格。这使您可以准确地看到原始点发生了什么。
因此，让我们将画布平移 100,100，将其向下+向右移动：
http://jsfiddle.net/simonsarris/4uaZy/1/
所以我们翻译了原点，也就是红色 X 的中心位置。原点现在为 100,100。
现在我们将平移然后缩放。注意原点是如何与最后一张图像在同一个地方的，一切都只是两倍大。
http://jsfiddle.net/simonsarris/4uaZy/2/
繁荣。原点数仍为 100,100。不过，一切都被夸大了2。原点改变了，然后一切都在原地膨胀。
现在让我们反过来看它们。这次我们先扩展，所以一切从一开始就很胖：
http://jsfiddle.net/simonsarris/4uaZy/3/
一切都膨胀了 2。原点在 0,0，它的起点。
现在我们做一个规模，然后一个翻译。
http://jsfiddle.net/simonsarris/4uaZy/4/
我们仍然平移了 100,100，但原点移动了 200,200 实际像素。将此与之前的两个图像进行比较。
这是因为在缩放之后发生的所有事情都必须进行缩放，包括额外的变换。因此，在缩放的画布上变换 (100,100) 会导致它移动 200、200。
这里要记住的要点是，改变转换会影响从那时起绘制（或转换！）的方式。如果缩放 x2，然后平移，则平移将为 x2
如果您想从数学上查看每个步骤发生的情况，我鼓励您查看此处的代码：
https://github.com/simonsarris/Canvas-tutorials/blob/master/transform.js
这模仿了画布完成的整个转换过程，让您看到之前的转换如何修改之后的转换。
于 2012-07-04T17:56:10.050 回答
2
缩放和旋转是相对于原点完成的，因此，例如，如果您的变换有平移，那么这将使顺序变得重要。
这是一本好书： 为什么转型顺序很重要
于 2012-07-04T16:26:46.473 回答