原文: WPF: 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軸進行平移變換。
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg">
<Image.RenderTransform>
<TranslateTransform X="120" Y="120"></TranslateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
![](https://img.laitimes.com/img/9ZDMuAjOiMmIsIjOiQnIsIyZlBnauEjYyAzN1QWO3YDN3E2NxYTO4gjNiVGN2cDNmZ2MmJDZfdWbp9CXt92Yu4GZjlGbh5SZslmZxl3Lc9CX6MHc0RHaiojIsJye.jpeg)
3. RotateTransform(旋轉變化):
包括屬性Angle(旋轉角度),CenterX、CenterY(旋轉的中心)
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg">
<Image.RenderTransform>
<RotateTransform Angle="45" CenterX="0" CenterY="0"></RotateTransform>
</Image.RenderTransform>
</Image>
</Canvas>
4. ScaleTransform(縮放變化):
包括屬性ScaleX、ScaleY、CenterX、CenterY,其中ScaleX、ScaleY屬性表示對象在X、Y軸進行縮放的倍數,使用CenterX 和 CenterY屬性指定一個中心點。
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg">
<Image.RenderTransform>
<ScaleTransform ScaleX="0.5" ScaleY="0.5"></ScaleTransform>
</Image.RenderTransform>
</Image>
</Canvas>
5. SkewTransform(扭曲變化):
包括屬性AngleX、AngleY、CenterX、CenterY。其中使用AngleX讓元素相對X軸傾斜角度,AngleY是讓元素圍繞Y軸的傾斜角度。同樣CenterX和CenterY是中心點位置。
<Canvas>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg" Opacity="0.5"></Image>
<Image Canvas.Top="160" Canvas.Left="140" Source="sun.jpg">
<Image.RenderTransform>
<SkewTransform AngleX="30" AngleY="10"></SkewTransform>
</Image.RenderTransform>
</Image>
</Canvas>
6. TransformGroup:
縮放、旋轉、扭曲等變化效果合并起來。以上四種基本變化隻是單一的變化,如果想要實作多種效果的疊加,那麼就要使用到TransformGroup,否則會報錯。TransformGroup的作用類似于在控件布局中的StackPanel内嵌的作用,是把多種變化元素組合成一種變化的容器。
<Canvas Width="640" Height="480">
<Rectangle Canvas.Top="20" Canvas.Left="200" Width="400" Height="300" Stroke="Black" StrokeThickness="5">
<Rectangle.RenderTransform>
<TransformGroup>
<!--RotateTransform 變換-->
<RotateTransform Angle="10"></RotateTransform>
<!--SkewTransform變換-->
<SkewTransform AngleX="-10" AngleY="30" CenterX="20" CenterY="50"></SkewTransform>
</TransformGroup>
</Rectangle.RenderTransform>
<Rectangle.Fill>
<ImageBrush ImageSource="sun.jpg"></ImageBrush>
</Rectangle.Fill>
</Rectangle>
</Canvas>
7. MatrixTransform矩陣變換:
其實就是其他變形類的底層實作的代碼,其他的類都是基于這個類的擴充,以讓使用者可以更加簡單友善的應用,至于MatrixTransform則是通過一種矩陣算法來進行運算得到相應的變形的效果的。
矩陣中第三列的值是固定不變的!
原理:
原坐标(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>
下面使用MatrixTransform矩陣變換實作以上五種基本的變換效果。
<Canvas Width="1200" Height="300">
<StackPanel Orientation="Horizontal" Canvas.Top="50">
<!-- TranslateTransform 平移 -->
<Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Ai.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<MatrixTransform Matrix="1 0 0 1 -80 30"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- RotateTransform 旋轉 -->
<Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Dw.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- 90°旋轉 -->
<MatrixTransform Matrix="0 1 -1 0 30 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- ScaleTransform 縮放 -->
<Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Fl.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!--放大1.5倍-->
<MatrixTransform Matrix="1.5 0 0 1.5 -80 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- SkewTransform 扭曲傾斜 -->
<Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Fw.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- x軸傾斜 -->
<MatrixTransform Matrix="1 0 1 1 -80 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
<!-- TransformGroup 扭曲、縮放 -->
<Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
Margin="10" Opacity="0.5"></Image>
<Image Source="Images/adobe_Id.png" Height="100" Width="100" Stretch="Fill"
Margin="10">
<Image.RenderTransform>
<!-- x軸傾斜 -->
<!--放大1.5倍-->
<MatrixTransform Matrix="1.5 0 1 1.5 -120 0"></MatrixTransform>
</Image.RenderTransform>
</Image>
</StackPanel>
</Canvas>