Silverlight的旋转动画需要用到 MatrixTransform属性的变化,这个是仿射矩阵变换的函数,它可以让图片产生视觉的旋转。他的原理并不是真正让图片的位置变化,而是变化平面x,y的坐标系,间接地让图片的坐标发生转变,而如何让坐标系的旋转精确地控制图片的旋转,这个就是仿射变换矩阵的作用:
仿射变换(Affine Transformation)
将一个仿射变换矩阵Ma解析为Ms×Mr×Mt,式中Ms为缩放矩阵,Mr为旋转矩阵,Mt为平移矩阵。仿射矩阵不应包含错切成分。具体操作可分为一下几步。
1.平移矩阵的获取
Ms×Mr×Mt的过程中,位于Ma41,Ma42,Ma43的平移因子不会改变,故:
1 0 0 0
Mt = 0 1 0 0
0 0 1 0
Ma41 Ma42 Ma43 1
2.放缩矩阵的提取
令Ma = Ma×Mt^-1,则Ma = Ms×Mr
Mrx×Mry,相当于对Mrx的每个行向量绕x轴旋转Mry所代表的角度,并由得到的三个新行向量组成新的结果矩阵,Mrx为向量绕x轴旋转的变换矩阵,其每行向量的分量的平方和为1,故行向量模为1,该行向量乘以旋转矩阵Mry后长度不变,即模为1,故Mrx×Mry的结果矩阵的每一行(行向量)分量的平方和为1.
将上述情况扩展,一个Mr可表示为Mry×Mrx×Mrz×Mrx^-1×Mry^-1,或其它表示形式,但各种表示形式都最终可表示为Mrx,Mry,Mrz及其逆矩阵的乘积。根据上面的分析,Mr各行向量分量的平方和必为1。
又因为Ms为对角矩阵,Ms×Mr的形式如下
b11 0 0 0 a11 a12 a13 0
0 b22 0 0 × a21 a22 a23 0
0 0 b33 0 a31 a32 a33 0
0 0 0 1 0 0 0 1
Ms Mr
计算上式,并根据Mr行向量分量的平方和为1,可得:
b11 = Ma11^2 + Ma12^2 + Ma13^2 + Ma14^2;
b22 = Ma21^2 + Ma22^2 + Ma23^2 + Ma24^2;
b33 = Ma21^2 + Ma22^2 + Ma23^2 + Ma24^2;
至此,Ms求得。
3.旋转矩阵的获取
在上述计算中Ma的值变为Ms × Mr。
先求Ms^-1,则Mr = Ms^-1 × Ma = Ms^-1 × Ms × Mr;
AffineTransform类描述了一种二维仿射变换的功能,它是一种二维坐标到二维坐标之间的线性变换,保持二维图形的“平直性”(译注:straightness,即变换后直线还是直线不会打弯,圆弧还是圆弧)和“平行性”(译注:parallelness,其实是指保二维图形间的相对位置关系不变,平行线还是平行线,相交直线的交角不变。大二学过的复变,“保形变换/保角变换”都还记得吧,数学就是王道啊!)。仿射变换可以通过一系列的原子变换的复合来实现,包括:平移(Translation)、缩放(Scale)、翻转(Flip)、旋转(Rotation)和剪切(Shear)。
此类变换可以用一个3×3的矩阵来表示,其最后一行为(0, 0, 1)。该变换矩阵将原坐标(x, y)变换为新坐标(x', y'),这里原坐标和新坐标皆视为最末一行为(1)的三维列向量,原列向量左乘变换矩阵得到新的列向量:
[x'] [m00 m01 m02] [x] [m00*x+m01*y+m02]
[y'] = [m10 m11 m12] [y] = [m10*x+m11*y+m12]
[1 ] [ 0 0 1 ] [1] [ 1 ]
几种典型的仿射变换:
- public static AffineTransform getTranslateInstance(double tx, double ty)
平移变换,将每一点移动到(x+tx, y+ty),变换矩阵为:
[ 1 0 tx ]
[ 0 1 ty ]
[ 0 0 1 ]
(译注:平移变换是一种“刚体变换”,rigid-body transformation,中学学过的物理,都知道啥叫“刚体”吧,就是不会产生形变的理想物体,平移当然不会改变二维图形的形状。同理,下面的“旋转变换”也是刚体变换,而“缩放”、“错切”都是会改变图形形状的。)
- public static AffineTransform getScaleInstance(double sx, double sy)
缩放变换,将每一点的横坐标放大(缩小)至sx倍,纵坐标放大(缩小)至sy倍,变换矩阵为:
[ sx 0 0 ]
[ 0 sy 0 ]
[ 0 0 1 ]
- public static AffineTransform getShearInstance(double shx, double shy)
剪切变换,变换矩阵为:
[ 1 shx 0 ]
[ shy 1 0 ]
[ 0 0 1 ]
相当于一个横向剪切与一个纵向剪切的复合
[ 1 0 0 ][ 1 shx 0 ]
[ shy 1 0 ][ 0 1 0 ]
[ 0 0 1 ][ 0 0 1 ]
(译注:“剪切变换”又称“错切变换”,指的是类似于四边形不稳定性那种性质,街边小商店那种铁拉门都见过吧?想象一下上面铁条构成的菱形拉动的过程,那就是“错切”的过程。)
- public static AffineTransform getRotateInstance(double theta)
旋转变换,目标图形围绕原点顺时针旋转theta弧度,变换矩阵为:
[ cos(theta) -sin(theta) 0 ]
[ sin(theta) cos(theta) 0 ]
[ 0 0 1 ]
- public static AffineTransform getRotateInstance(double theta, double x, double y)
旋转变换,目标图形以(x, y)为轴心顺时针旋转theta弧度,变换矩阵为:
[ cos(theta) -sin(theta) x-x*cos+y*sin]
[ sin(theta) cos(theta) y-x*sin-y*cos ]
[ 0 0 1 ]
相当于两次平移变换与一次原点旋转变换的复合:
[1 0 -x][cos(theta) -sin(theta) 0][1 0 x]
[0 1 -y][sin(theta) cos(theta) 0][0 1 y]
[0 0 1 ][ 0 0 1 ][0 0 1]