总目录:http://blog.csdn.net/iloveas2014/article/details/38304477
4.2 图形变换矩阵——Matrix
先从Matrix这个最常用而且最简单的矩阵入手。
4.2.1 矩阵数学实现点的基本变换
Matrix用于实现二维平面图形的基本变换:移动,缩放,旋转和斜切。
一个平面由无数多个点组成,所以,要探讨平面内一个图形的变换,我们可以从点这个元素开始。因为在Matrix的变换中,平面图形内的所有点都会执行矩阵上的变换操作。
直角坐标系中的一个点用(x,y)表示,它相当于田忌赛马故事中的两匹马。
移动是最最简单的变换: x+=tx y+=ty 用矩阵加法完全可以胜任:
缩放则需要乘法的配合:x *= scaleX,y*= scaleY。但如果是等比缩放,那我们仍然可以用简单的数乘来完成:
但是,不等比的缩放就必须用矩阵乘法了,原矩阵有两列,所以我们创建个2*2的矩阵进行变换:
根据x *= scaleX,y*= scaleY这一缩放算法,a,b,c,d应满足以下关系:
x*a+y*c=x*scaleX
x*b+y*d=y*scaleY
由第一条等式,可得a=scaleX,c=0,同理可得b=0,d=scaleY。
所以缩放的变换过程可表示为:
而旋转则比较复杂了,它需要用到三角函数的知识。
您可能会想到用极坐标(用距离和夹角来表示点位置的坐标系)快速解决旋转的难题,但此处我们没办法用上,因为原始点基于直角坐标构建,这意味着我们暂时只能用直角坐标的方法……先暂时忘记极坐标吧。
数学课本上教您的坐标旋转及三角函数公式的证明过程您可能会比较容易忘记,从而影响了您对相关公式的记忆。为此,我给出一个相对简单的证明方法。
如图 4.2,将点P(x,y)绕坐标原点O旋转角度θ,得到点P‘,求P‘的坐标(x‘,y‘)。
从图 4.2中可以看到,x‘=OB,y‘=BP‘。所以问题就转化为求OB和BP‘的长度。
图 4.2 点的旋转变换
首先,旋转的过程中,点到O的距离始终不变,即OP=OP‘,我们设OP=OP‘。
然后,考察三角形OBF和三角形P‘CF,有角OFB=角P‘FC,角FBO=角P‘CF=90度,由三角形内角和定理,得角FP‘C=角FOB=α。
下面我们开始计算OB,它等于OD-BD
其中,OD=OCcosα,OC=OP‘cosθ=OPcosθ,所以有OD=OPcosθcosα。
而BD=EC=P‘Csinα,P‘C=OP‘sinθ= OPsinθ,所以有BD= OPsinθsinα。
所以OB=OD-BD= OPcosθcosα- OPsinθsinα= OPcosαcosθ - OP sinαsinθ。
又因为OP*cosα=OA=x,OP*sinα=AP=y,所以,代入上式,得到x‘=OB=xcosθ-ysinθ。
用类似的方法,可求得y‘=BP‘=BE+BP=DC+EP
=OCsinα+P‘Ccosα
= OP‘cosθsinα+OP‘sinθcosα
=ycosθ+xsinθ。
最终的变换结果为(xcosθ-ysinθ,ycosθ+xsinθ)。
所以,旋转的变换可以用如下的矩阵表示:
显然有a=cosθ,b=sinθ,c=-sinθ,d=cosθ。
所以,旋转的矩阵可表示如下:
最后要讨论的一个变换就是斜切。在FlashPlayer10诞生之前,不少人会用这个方法实现一些简单的假3D效果,如图 4.3所示。
图 4.3 利用斜切矩阵实现的假3D效果
在图 4.3的斜切变换中,图形上的所有点只在x方向上发生变化,但是在y坐标相同的点上,x的变化量都相等。
其中,y坐标不发生任何变化,所以b和d取单位矩阵的数值0,1即可。
而x坐标则完全只跟y有关,因此在x坐标的矩阵运算结果x*a+y*c中,a=0,唯独需要探究的就是与y相乘的系数c。
图 4.3中的图形在x方向倾斜了θ度。如果以A作为坐标原点,则y=AC,B点的偏移量为BC,因为tanθ=BC/AC(上面的章节已经提到过),所以BC=AC*tanθ=y*tanθ,换而言之,当倾斜的角度=θ时,c=tanθ。
如果沿着y轴斜切θ度,则可以用同样的方法可以得出b=tanθ。
用skewX和skewY分别表示点在x轴和y轴方向上的斜切,则斜切矩阵可表示如下:
至此,常用的变换矩阵已经学完,终于可以长呼一口气了。如果您对我这些长篇大论感到茫然不知所措,那么我现在再次把这几种变换给列出来:
移动:
等比缩放:
缩放:
旋转:
斜切: