Silverlight实用窍门系列：54.详解Silverlight中的矩阵变换MatrixTransform，实现其余各种变换【附带实例源码】...

在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，如需转载请自行联系原作者

Silverlight实用窍门系列：54.详解Silverlight中的矩阵变换MatrixTransform，实现其余各种变换【附带实例源码】...相关推荐

Silverlight实用窍门系列：56.Silverlight中的Binding使用（一）【附带实例源码】
本文将详细讲述Silverlight中Binding,包括Binding的属性和用法,Binding的数据流向. Binding:一个完整的Binding过程是让源对象中的某个属性值通过一定流向规则进 ...
Silverlight实用窍门系列：59.多个中心点联动多线的可拖动控件扩展为拓扑图
在本系列的第17篇文章中"Silverlight实用窍门系列:17.中心点联动多线的可拖动控件(绘制工程图.拓扑图基础) ",制作了基本的中心联动图标.有园友对此图的扩展不是很清晰 ...
Silverlight实用窍门系列：71.Silverlight的Style
此文章实例基于Silverlight实用窍门系列:68.Silverlight的资源字典ResourceDictionary,如有数据源疑问请参考该文章. 在Silverlight中的Style相当于 ...
Silverlight实用窍门系列：22.Silverlight使用WebService调用C++,Delphi编写的DLL文件【实例源码下载】...
在Silverlight程序(非Out of Browser模式)中是无法直接调用DLL的,但是很多的计算或者其他应用程序的调用中我们需要用到DLL的加载.比如调用DLL来识别身份证读卡器传输过来 ...
Silverlight实用窍门系列：29.Silverlight碰撞测试、检测自定义控件碰撞，雷达扫描图之扫描雷达点状态【附带源码实例】...
雷达扫描图中当雷达指针转动扫描到某一个点上的时候,判断这个点的CPU值是否已经超过60的警戒位置如果超过将此点设置为红色. 在Silverlight中我们的雷达指针是一直在做圆运动的,我们要随时检测雷 ...
Silverlight实用窍门系列：14.Visifire图表控件的使用一(图表的创建和基础使用)【附带源码实例】...
在实际项目开展中,往往会牵扯到需要绘制图表的情况.而Visifire是一个比较美观大方的第三方图表控件,本文会讲述如何初步使用Visifire控件. 首先我们需要从Visifire的官方网站下载:ht ...
Windows 8实用窍门系列：6.Windows 8中的Popup使用方式
在上一篇文章中我们将了替代Silverlight中MessageBox的MessageDialog控件,本篇文章将讲诉另外一种弹出提示窗口的控件Popup. 一.我们认识Popup控件的IsLight ...
Silverlight实用窍门系列：35.细解Silverlight冒泡路由事件和注册冒泡路由事件【附带实例源码】...
Silverlight中的事件分为普通事件和冒泡路由事件,它并没有包括WPF中的隧道路由事件,在本章中将详细讲解冒泡路由事件和如何注册一个冒泡路由事件. 一.细解冒泡路由事件冒泡路由事件可以比喻为: ...
Silverlight实用窍门系列：52.Silverlight中的MVVM框架极速入门(以MVVM Light Toolkit为例)...
在本文将以MVVM Light Toolkit为例讲解MVVM框架在现实中的使用入门,首先我们在http://mvvmlight.codeplex.com/下载它的MVVM框架下来.也可以通过 htt ...

Silverlight实用窍门系列：54.详解Silverlight中的矩阵变换MatrixTransform，实现其余各种变换【附带实例源码】...

Silverlight实用窍门系列：54.详解Silverlight中的矩阵变换MatrixTransform，实现其余各种变换【附带实例源码】...相关推荐

最新文章

热门文章