了解HTML 5画布比例和翻译顺序

Question

我正在做一个围绕X中心的图形,Y为0,0.当渲染时,我使用translate重新定位,然后使用scale使图形填充画布(例如,将所有内容缩放50%).

我注意到你是否调用scale然后翻译,翻译然后扩展并且我无法理解它是很重要的.这是一个问题,因为一切并不总是合适,但我的心智模型并不完整,所以很难修复它.

有人可以解释为什么缩放和翻译调用的顺序很重要吗？

Answer 1

那么让我们在300x300画布上画一个网格:

http://jsfiddle.net/simonsarris/4uaZy/

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

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

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

http://jsfiddle.net/simonsarris/4uaZy/1/

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

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

http://jsfiddle.net/simonsarris/4uaZy/2/

繁荣.orgin仍然是100,100.尽管如此,一切都在膨胀.原点发生了变化,然后一切都膨胀到位.

现在让我们反过来看看它们.这次我们首先扩展,所以从一开始一切都很胖:

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

这模仿了画布完成的整个转换过程,让您可以看到之前的转换如何修改之后的转换.