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

????????MatrixTransform的實(shí)質(zhì)：讓需要變換的元素上的每一個(gè)像素點(diǎn)*矩陣得到這個(gè)點(diǎn)的新坐標(biāo)。

??????? 下面我們來(lái)看看MatrixTransform的3*3矩陣元素圖如下：

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

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

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

??????? 總結(jié)得出原圖像上每一個(gè)坐標(biāo)點(diǎn)位的點(diǎn)經(jīng)過(guò)以下算法之后才是其最終坐標(biāo)點(diǎn)位：X2=X*M11+Y*M21+OffsetX ,?? Y2=X*M12+Y*M22+OffsetY.

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

??????? 下面我們來(lái)看一個(gè)實(shí)例，通過(guò)MatrixTransform實(shí)現(xiàn)上篇文章所述的幾種變換。

MatrixTransform實(shí)現(xiàn)RotateTransform效果

<!--按照（0,0）為中心點(diǎn)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 =>新坐標(biāo)點(diǎn)(-1X,1Y) -->
<MatrixTransform Matrix="0 1 -1 0 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實(shí)現(xiàn)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 =>新坐標(biāo)點(diǎn)(0.6X,0.6Y) -->
<MatrixTransform Matrix="0.6 0 0 0.6 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實(shí)現(xiàn)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 => 新坐標(biāo)點(diǎn)(2X,0Y) -->
<MatrixTransform Matrix="1 0 1 1 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實(shí)現(xiàn)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 => 新坐標(biāo)點(diǎn)(1X+10,1Y+50) -->
<MatrixTransform Matrix="1 0 0 1 10 50"></MatrixTransform>
</Image.RenderTransform>
</Image>

MatrixTransform實(shí)現(xiàn)TransformGroup效果

<!--以Y軸翻轉(zhuǎn)-->
<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 => 新坐標(biāo)點(diǎn)(1X,-1Y) -->
<MatrixTransform Matrix="1 0 0 -1 0 0"></MatrixTransform>
</Image.RenderTransform>
</Image>

???????最后我們來(lái)看實(shí)例的運(yùn)行效果如下，如需源碼請(qǐng)點(diǎn)擊SLMatrixTransform.rar下載。

本文轉(zhuǎn)自程興亮博客園博客，原文鏈接：http://www.cnblogs.com/chengxingliang/archive/2011/08/16/2137800.html，如需轉(zhuǎn)載請(qǐng)自行聯(lián)系原作者

與50位技術(shù)專家面對(duì)面20年技術(shù)見(jiàn)證，附贈(zèng)技術(shù)全景圖

總結(jié)

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

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。