Silverlight的旋轉之仿射矩陣變換的解釋

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             ]

幾種典型的仿射變換：
 

平移變換，將每一點移動到(x+tx, y+ty)，變換矩陣為：
[   1    0    tx  ]
[   0    1    ty  ]
[   0    0    1   ]
（譯註：平移變換是一種“剛體變換”，rigid-body transformation，中學學過的物理，都知道啥叫“剛體”吧，就是不會產生形變的理想物體，平移當然不會改變二維圖形的形狀。同理，下面的“旋轉變換”也是剛體變換，而“縮放”、“錯切”都是會改變圖形形狀的。）
 

縮放變換，將每一點的橫座標放大（縮小）至sx倍，縱座標放大（縮小）至sy倍，變換矩陣為：
[   sx   0    0   ]
[   0    sy   0   ]
[   0    0    1   ]

 

剪下變換，變換矩陣為：
[   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   ]
（譯註：“剪下變換”又稱“錯切變換”，指的是類似於四邊形不穩定性那種性質，街邊小商店那種鐵拉門都見過吧？想象一下上面鐵條構成的菱形拉動的過程，那就是“錯切”的過程。）
 

旋轉變換，目標圖形圍繞原點順時針旋轉theta弧度，變換矩陣為：
[   cos(theta)    -sin(theta)    0   ]
[   sin(theta)     cos(theta)    0   ]
[       0                0             1   ]

 

旋轉變換，目標圖形以(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] 

來自 “ ITPUB部落格 ” ，連結：http://blog.itpub.net/12639172/viewspace-671705/，如需轉載，請註明出處，否則將追究法律責任。