【轉載】RenderTransform特效

小林野夫發表於2024-06-02

RenderTransform特效(變形)


WPF中的變形(RenderTransform)類是為了達到直接去改變某個Silverlight物件的形狀
(比如縮放、旋轉一個元素)的目的而設計的,RenderTransform包含的變形屬性成員就
是專門用來改變Silverlight物件形狀的,它可以實現對元素拉伸,旋轉,扭曲等效果,同
時變形特效也常用於輔助產生各種動畫效果。

1. RenderTransform類:

該類成員如下:
TranslateTransform:能夠讓某物件的位置發生平移變化。
RotateTransform:能夠讓某物件產生旋轉變化,根據中心點進行順時針旋轉或逆時針旋轉。
ScaleTransform:能夠讓某物件產生縮放變化。
SkewTransform:能夠讓某物件產生扭曲(斜角)變化。
TransformGroup:變換集合,能夠讓某物件的縮放、旋轉、扭曲等變化效果合併起來使用(組合多個變換)。
MatrixTransform:能夠讓某物件透過矩陣演算法實現更為複雜的變形。
變形元素包括平移變形、旋轉變形、縮放變形、扭曲變形、矩陣變形和組合變形元素,
變形特效常用於在不改變物件本身構成的情況下,使物件產生變形效果,所以變形元素
常輔助產生Silverlight中的各種動畫效果。
通常,對於MediaElement元素使用RenderTransform屬性比使用LayoutTransform屬性更
好,因為RenderTransform屬性是輕量級的。而且它還可以使用方便的
RenderTransformOrigin屬性值,從而可以為特定的變換(如旋轉)使用相對座標。

2.TranslateTransform( 平移變化 ):

包含X、Y 兩種屬性,以原來的物件為座標原點(0,0),然後向X軸、Y軸進行平移變換。

3. RotateTransform( 旋轉變化 ):

包括屬性Angle(旋轉角度),CenterX、CenterY(旋轉的中心)

4. ScaleTransform( 縮放變化 ):

包括屬性ScaleX、ScaleY、CenterX、CenterY,其中ScaleX、ScaleY屬性表示物件在X、Y軸進行縮放的倍數,使用CenterX 和 CenterY屬性指定一箇中心點。

5. SkewTransform(扭曲變化):

包括屬性AngleX、AngleY、CenterX、CenterY。其中使用AngleX讓元素相對X軸傾斜角度,AngleY是讓元素圍繞Y軸的傾斜角度。同樣CenterX和CenterY是中心點位置。
TransformGroup:
縮放、旋轉、扭曲等變化效果合併起來。以上四種基本變化只是單一的變化,如果想要實現
多種效果的疊加,那麼就要使用到TransformGroup,否則會報錯。TransformGroup的作用
類似於在控制元件佈局中的StackPanel內嵌的作用,是把多種變化元素組合成一種變化的容器。
MatrixTransform 矩陣變換:
其實就是其他變形類的底層實現的程式碼,其他的類都是基於這個類的擴充套件,以讓使用者可以更加簡單方便的應用,至於MatrixTransform則是透過一種矩陣演算法來進行運算得到相應的變形的效果的。
使用 MatrixTransform 類可建立不由 RotateTransform 、 SkewTransform 、 ScaleTransform 或類提供的自定義轉換 TranslateTransform 。
在二維 x-y 平面中,使用3x3 矩陣進行變換。 您可以將仿射矩陣轉換相乘,以形成線性轉換,如旋轉和傾斜 (切變),後面是平移。
仿射矩陣轉換的最終列等於 (0,0,1) ;因此,您只需指定前兩列中的成員。

WPF) Windows Presentation Foundation (Matrix 具有以下結構:





矩陣中第三列的值是固定不變的!最後一行中的成員 OffsetX OffsetY 表示轉換值。方法和屬性通常將變換矩陣指定為只有六個成員的向量;成員如下:(M11, M12, M21, M22, OffsetX, OffsetY)

原理:
原座標(x0,y0)透過這個3*3矩陣,透過矩陣乘法可得到座標 (x0 * M11+x0 * M21,y0 * M12+y0 * M22)之後,再加上 (OffsetX,OffsetY) 即可得到新座標(x1,y1)。也即是說最終座標 (x1,y1) : x1 = x0 * M11 + x0 * M21 + OffsetX , y1 = y0 * M12 + y0 * M22 + OffsetY
例如:
<MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY">
</MatrixTransform>

注:

Matrix:獲取或設定定義此轉換的 Matrix 結構。

OffsetX和OffsetY控制水平和豎直方向的偏移。

M11控制X方向的伸縮,M22控制Y方向的伸縮。

M12,M21用來控制旋轉的
————————————————

版權宣告:本文為博主原創文章,遵循 CC 4.0 BY-SA 版權協議,轉載請附上原文出處連結和本宣告。

原文連結:https://blog.csdn.net/m0_56449543/article/details/121207696

相關文章