探討 Silverlight XAML 橢圓形圖案物件(4/4)

摘要:探討 Silverlight XAML 橢圓形圖案物件(4/4)

如圖表 1 所示,我們可以在 Microsoft Expression Blend 2 替物件套用轉換效果,比方說,平移、旋轉、縮放、歪斜、翻轉,甚至是改變物件的中心點位置。欲達此目的,請展開「Properties」索引標籤的「Transform」「Miscellaneous」面板,然後變更相關屬性,以便修改物件所要套用的轉換效果。


圖表 1


屬性 RenderTransform 用於取得或決定影響物件呈現位置的資訊。透過屬性值 Transform 的宣告,我們可以定義一種轉換效果(比方說:RotateTransform)或是由一個 TransformGroup 內含多種轉換效果。請大家注意,所套用的轉換效果是一種暫時性的效果,也就是說,這些轉換效果並不會改變物件原本的屬性,例如 Width 屬性。

Silverlight 提供下列兩大類的轉換效果:

q通用轉換(Common Transformation)
 不需知道數學複雜的矩陣理論,就可以使用下列轉換效果:

z平移(TranslateTransform)
 根據已定義的向量移動物件
z旋轉(RotateTransform)
 根據已定義的度數來旋轉物件
z縮放(ScaleTransform)
 根據已定義的比例來放大或縮小物件
z歪斜(SkewTransform)
 根據已定義的總量,朝已定義的方向歪斜物件
q複雜轉換(Complex Transformation)
 透過矩陣理論所做的轉換效果,可以結合上述所有的轉換功能。

 請注意:
 Silverlight 並沒有所謂的翻轉轉換效果,說穿了翻轉是利用縮放來達到水平翻轉(將 ScaleTransformScaleX 屬性值設定成負值)或垂直翻轉(將 ScaleTransformScaleY 屬性值設定成負值)的效果。

欲在 Blend 2 中使用平移轉換效果,請於「Properties」索引標籤的「Transform」面板上,切換到「Translate」索引標籤 ,然後調整 XY 欄位的值。如果您正在修改動畫時間軸中的物件,便可以直接使用「Selection」工具

 或「Direct Selection」工具  選取想要平移的物件,然後移動物件到適當的位置。

位於「Translate」索引標籤  左側的 9 個中心點(Center Point)圖示 ,是用來設定除了平移轉換效果之外的其他轉換效果的中心點位置。呈現黑色實心的點,表示目前中心點的所在位置。此外,我們也可以先選取畫布上的物件,將滑鼠移至目前的中心點,當滑鼠指標變成四個方向箭形的「中心點調整」 時,按住滑鼠左鍵不放,拖曳到新的中心點位置來調整中心點位置(如圖表 2 所示)。如果您要回覆中心點原本預設的位置,請在中心點上,連按兩下滑鼠左鍵。其實移動中心點就是變更「Transform」面板裡「Center Point」索引標籤  中的 XY 屬性值,以及「Miscellaneous」面板裡「Render TransformOrigin」的屬性值。

 附註:
 這個中心點位置是以物件的左上角為相對位置。


圖表 2


如圖表 3 所示,要套用旋轉效果,請按下「Rotate」索引標籤,然後調整 Angle 欄位的值。您可以輸入正值或負值,正值會以順時針旋轉物件,而負值會以逆時針旋轉物件。此外也可以在小圓圈  上按下滑鼠左鍵,以便將物件旋轉至所要的角度。當然我們也可以直接旋轉畫布上的物件,請將滑鼠移至代表物件所在區域的藍色邊框上,四個角落的任一個控制點上,直到指標變成「旋轉控制點」 時,拖曳滑鼠來旋轉至適當的角度。在旋轉物件的同時,按住 SHIFT 鍵,則以每次遞增或遞減 15 度的方式來旋轉物件。


圖表 3


要套用縮放效果,請按下「Scale」索引標籤,然後調整 XY 欄位的值。如果您正在修改動畫時間軸中的物件,便可以直接使用「Selection」工具  或「Direct Selection」工具  選取想要縮放的物件,然後調整物件大小。

如欲套用歪斜效果,可以於「Skew」索引標籤中,調整 XY 欄位的值。或是將滑鼠移到物件所在區域的藍色邊框上,四個邊線之中間控制點的外面,當滑鼠指標變成「歪斜控制點」  或 時,拖曳滑鼠來歪斜至適當的程度。

當我們要建立物件鏡像,以便產生倒影效果時,就需要翻轉物件。欲達此目的,請在「Flip」索引標籤,按下「Flip X axis」圖示 ,以水平方式翻轉物件,或是按下「Flip Y axis」圖示 ,以垂直方式翻轉物件。此外,我們也可以先選取想要翻轉的物件,然後按下「Object」功能表上的「Flip」指令,接著按一下「Horizontal」「Vertical」。如果不需要很精確的翻轉效果,請將滑鼠移到物件所在區域的藍色邊框,四個邊線與四個角落的任一個控制點上,當滑鼠指標變成「大小控制點」  或  時,拖曳滑鼠往該控制點的對角方向移動,直到呈現所需的翻轉效果即可放開滑鼠左鍵(如圖表 4 所示)。


圖表 4


屬性 Clip 選擇性地用於取得或決定物件中,某個特定的區域要被繪製出來,說的更明白點,就是將物件裁切成某種形狀,只有在這個形狀內的區域才能被顯示出來。欲使用 Clip 屬性,您必須先指定一個 Geometry 幾何物件來指定所要繪製的區域。所有位於這個幾何物件區域之外者,將被隱藏並裁切掉(如圖表 5 所示)。


圖表 5


欲在 Blend 2 中設定 Clip 屬性,請先選取兩個要進行裁切的物件,然後從「Object」功能表中依序選取「Path/Make Clipping Path」指令。操作完畢之後,請點選「Properties」索引標籤,展開最下方的「Miscellaneous」面板,便可看到 Clip 欄位中已自動填入 Clip 屬性。

屬性 RenderTransformOrigin 用於取得或決定由 RenderTransform 屬性所宣告的轉換效果之中心點位置,這個中心點位置是以物件的左上角為相對位置,預設值是0,0


章立民研究室