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 ]
幾種典型的仿射變換:
publicstaticaffinetransform gettranslateinstance(doubletx,doublety)
平移變換,將每一點移動到(x+tx, y+ty),變換矩陣為:
[ 1 0 tx ]
[ 0 1 ty ]
[ 0 0 1 ]
(譯註:平移變換是一種「剛體變換」,rigid-body transformation,中學學過的物理,都知道啥叫「剛體」吧,就是不會產生形變的理想物體,平移當然不會改變二維圖形的形狀。同理,下面的「旋轉變換」也是剛體變換,而「縮放」、「錯切」都是會改變圖形形狀的。)
publicstaticaffinetransform getscaleinstance(doublesx,doublesy)
縮放變換,將每一點的橫座標放大(縮小)至sx倍,縱座標放大(縮小)至sy倍,變換矩陣為:
[ sx 0 0 ]
[ 0 sy 0 ]
[ 0 0 1 ]
publicstaticaffinetransform getshearinstance(doubleshx,doubleshy)
剪下變換,變換矩陣為:
[ 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 ]
(譯註:「剪下變換」又稱「錯切變換」,指的是類似於四邊形不穩定性那種性質,街邊小商店那種鐵拉門都見過吧?想象一下上面鐵條構成的菱形拉動的過程,那就是「錯切」的過程。)
publicstaticaffinetransform getrotateinstance(doubletheta)
旋轉變換,目標圖形圍繞原點順時針旋轉theta弧度,變換矩陣為:
[ cos(theta) -sin(theta) 0 ]
[ sin(theta) cos(theta) 0 ]
[ 0 0 1 ]
publicstaticaffinetransform getrotateinstance(doubletheta,doublex,doubley)
旋轉變換,目標圖形以(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]
silverlight旋轉中心很好玩
我要說的是關於乙個物件繞乙個指定的點旋轉的問題,通常silverlight在blend下新建的旋轉都有個旋轉中心,如果要實現乙個矩形繞它自己的乙個角旋轉的話 如圖 將此例中的登入框繞左上角的那個圓形旋轉,做法如下 第一貞動畫狀態裡設定矩形登入框的旋轉中心點位置與圓形的旋轉中心點的位置重合如下圖 最後...
Silverlight之Button控制項簡單自定義
silverlight 給我們提供的控制項數量是非常有限的,不能夠滿足我們在實踐專案中開發需求。所以我們就需要通過自定義控制項的方式來解決這個問題。一 silverlight 控制項應用樣式。我們大家都知道,我們可以通過使用屬性語法來設定 ui物件。這種方法能夠有效地使物件外觀發生淺層次的改變,但是...
Silverlight學習之布局
silverlight布局主要有三種布局方式 grid stackpanel和canvas canvas canvas 採用的是相對定位布局,通過canvas.left和canvas.top兩個屬性來控制元素在canvas中的位置。效果 其中從上往下第乙個按鈕距左50,距上50。第二個距左50,距上...