我正在围绕坐标中心点0,0的位置进行一些关于IT技术方面的图形绘制。当准备进行渲染时,我使用translate重新定位,然后使用scale缩小图形大小以填充画布(例如将所有内容缩小50%)。
我注意到调用scale和translate的顺序很重要,但我无法理解其中的原理。这是一个问题,因为不是所有的图形都能够适应我的思维模型,所以我很难去解决它。
有人能解释一下为什么scale和translate的调用顺序很重要吗?
我正在围绕坐标中心点0,0的位置进行一些关于IT技术方面的图形绘制。当准备进行渲染时,我使用translate重新定位,然后使用scale缩小图形大小以填充画布(例如将所有内容缩小50%)。
我注意到调用scale和translate的顺序很重要,但我无法理解其中的原理。这是一个问题,因为不是所有的图形都能够适应我的思维模型,所以我很难去解决它。
有人能解释一下为什么scale和translate的调用顺序很重要吗?
那么让我们在一个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。但是所有的东西都被膨胀了两倍。先改变原点位置,然后在原地扩大所有东西。
缩放和旋转是相对于原点进行的,因此如果您的变换具有平移,那么这将使顺序变得重要。
这里有一篇不错的文章: 为什么变换顺序很重要
https://jsfiddle.net/mhsmith/p6nLo9d4/2/
ctx.scale(2, 1)
使其变为80x20。
https://jsfiddle.net/mhsmith/p6nLo9d4/4/
https://jsfiddle.net/mhsmith/p6nLo9d4/5/
https://jsfiddle.net/mhsmith/p6nLo9d4/8/
缩放将圆变成椭圆,而随后的旋转则围绕该椭圆的边缘进行,而不是围绕原始圆进行。因此,当X轴从指向右侧旋转到指向下方时,它被压缩了2倍。当Y轴从指向下方旋转到指向左侧时,它被扩展了2倍。最终结果是80x20的矩形变成了40x40的正方形。
有两种思考一系列变换的方式:
这个答案和Simon Sarris的答案都是以第一种方式编写的。HTML规范是以第二种方式编写的,我认为这种方式更容易形象化。