? ? 在Silverlight中的MatrixTransform矩陣變換相對上篇文章所述的變換較復雜一些，但這種變換也更靈活。

????????MatrixTransform的實質：讓需要變換的元素上的每一個像素點*矩陣得到這個點的新坐標。

??????? 下面我們來看看MatrixTransform的3*3矩陣元素圖如下：

??????? 其中的數字0、0、1在Silverlight中是固定不變的，所以我們可以不加理會，而M11,M12,M21,M22是我們需要相乘的坐標矩陣模塊。如下圖所示：

??????? 那么我們看看一個老坐標(X,Y)*矩陣的核心算法如下圖所示，得到新坐標點（X1,Y1）：

??????? 但是這個新坐標點并非就是最終點位，還有元素OffsetX、OffsetY為偏移坐標量（X1+OffsetX，Y1+OffsetY）這個點位才是最終的坐標點如下圖所示：

??????? 總結得出原圖像上每一個坐標點位的點經過以下算法之后才是其最終坐標點位：X2=X*M11+Y*M21+OffsetX ,?? Y2=X*M12+Y*M22+OffsetY.

最后我們來看看在源碼中的用法是： <MatrixTransform Matrix="M11?M12?M21?M22?OffsetX OffsetY"></MatrixTransform>

??????? 下面我們來看一個實例，通過MatrixTransform實現上篇文章所述的幾種變換。

MatrixTransform實現RotateTransform效果

<!--按照（0,0）為中心點90度變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="48,49,0,0" Name="image11"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" Opacity=".3" />
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="48,49,0,0" Name="image1"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_001.png" >
<Image.RenderTransform>
<!--m11(0) m12(1) m21(-1) m22(0) OffsetX(0) OffsetY(0)-->
<!--0*X+ -1*X=-1X 1*Y+0*Y =1Y -1X+0 1Y+0 =>新坐標點(-1X,1Y) -->
<MatrixTransform Matrix="0 1 -1 0 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實現ScaleTransform效果

<!--0.6倍縮放變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="139,49,0,0" Name="image21"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="139,49,0,0" Name="image2"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_002.png">
<Image.RenderTransform>
<!--m11(0.6) m12(0) m21(0) m22(0.6) OffsetX(0) OffsetY(0)-->
<!--0.6*X+0*X=0.6X 0*Y+0.6*Y =0.6Y 0.6X+0 0.6Y+0 =>新坐標點(0.6X,0.6Y) -->
<MatrixTransform Matrix="0.6 0 0 0.6 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實現SkewTransform效果

<!--傾斜變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="226,49,0,0" Name="image31"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="226,49,0,0" Name="image3"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_003.png" >
<Image.RenderTransform>
<!--m11(1) m12(0) m21(1) m22(1) OffsetX(0) OffsetY(0)-->
<!--1*X+1*X=2X 0*Y+1*Y =1Y 2X+0 1Y+0 => 新坐標點(2X,0Y) -->
<MatrixTransform Matrix="1 0 1 1 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實現TranslateTransform效果

<!--TranslateTransform變換-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="331,49,0,0" Name="image41"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="331,49,0,0" Name="image4"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_004.png" >
<Image.RenderTransform>
<!--m11(1) m12(0) m21(0) m22(1) OffsetX(10) OffsetY(50)-->
<!--1*X+0*X=2X 0*Y+1*Y =0Y 1X+10 1Y+50 => 新坐標點(1X+10,1Y+50) -->
<MatrixTransform Matrix="1 0 0 1 10 50"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實現TransformGroup效果

<!--以Y軸翻轉-->
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="426,49,0,0" Name="image51"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" Opacity=".3"/>
<Image Height="50" HorizontalAlignment="Left" VerticalAlignment="Top" Margin="426,49,0,0" Name="image5"
Stretch="Fill" Width="50" Source="/SLTrans;component/iPhone_005.png" >
<Image.RenderTransform>
<!--m11(1) m12(0) m21(0) m22(-1) OffsetX(0) OffsetY(100)-->
<!--1*X+ 0*X=1X 0*Y+ -1*Y =-1Y 1X+0 -1Y+100 => 新坐標點(1X,-1Y) -->
<MatrixTransform Matrix="1 0 0 -1 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

???????最后我們來看實例的運行效果如下，如需源碼請點擊SLMatrixTransform.rar下載。

本文轉自程興亮博客園博客，原文鏈接：http://www.cnblogs.com/chengxingliang/archive/2011/08/16/2137800.html，如需轉載請自行聯系原作者

與50位技術專家面對面20年技術見證，附贈技術全景圖

總結

以上是生活随笔為你收集整理的Silverlight实用窍门系列：54.详解Silverlight中的矩阵变换MatrixTransform，实现其余各种变换【附带实例源码】...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。