Silverlight开发历程—利用MatrixTransform特效制作3D盒子

MatrixTransform（矩阵变形）

MatrixTransform 可以简单理解为一个自定义的变形对象，矩阵相对于其它变形对象，更加的偏向于底层。下面是MatrixTransform的重要属性。

M11 默认值：1.0	M12 默认值：0.0	0
M21 默认值：0.0	M22 默认值：1.0	0
OffsetX 默认值：0.0	OffsetY 默认值：0.0	1

MatrixTransform 元素是由一个3*3的矩阵组成：

第一行包括 M11，M12

第二行包括 M21，M22

第三行OffsetX、OffsetY，是用来产生对象的偏移量，对对象坐标的移动

最右边的第三列值永远是0、0、1

XAML 值

m11

System.Double

该值位于变换 Matrix 的位置 (1,1) 处。

m12

System.Double

该值位于变换  m21

System.Double

该值位于变换 Matrix 的位置 (2,Arial; font-size:13px"> m22

System.Double

该值位于变换  offsetX

System.Double

该值位于变换 Matrix 的位置 (3,Arial; font-size:13px"> offsetY

System.Double

该值位于变换  下面通过例子来分别体会M11，M12，M21，M22四个属性的作用：

代码：

  <!--M11:更改对象的宽度-->
  <Matrix M11="0.5" OffsetX="50" OffsetY="50"  />

 <!--M12:上下扭曲对象-->
 <Matrix  M12="1" OffsetX="50" OffsetY="50"  />

 <!--M21:左右扭曲对象-->
 <Matrix   M21="1" OffsetX="50" OffsetY="50"  />
 <!--M21:左右拉伸对象-->
 <Matrix   M21="1" OffsetX="50" OffsetY="50"  />
根据上面四句代码，我们分别得到以下四种结果：






下面利用MatrixTransform来做一个3D效果的盒子
XAML:

 <Canvas x:Name="LayoutRoot" Background="Black">
        <Rectangle Width="200" Height="200" Canvas.Left="6" Canvas.Top="-7">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Green" />
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <MatrixTransform  Matrix="1,-0.5,1.0,60,100" />
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle   Width="200" Height="200" Canvas.Left="4" Canvas.Top="-8">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Green" />
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <MatrixTransform  Matrix="1.0,0.5,260,0" />
            </Rectangle.RenderTransform>
        </Rectangle>
        <Rectangle  Width="200" Height="200" Canvas.Left="5" Canvas.Top="-8">
            <Rectangle.Fill>
                <LinearGradientBrush>
                    <GradientStop Offset="0" Color="White" />
                    <GradientStop Offset="1" Color="Green" />
                </LinearGradientBrush>
            </Rectangle.Fill>
            <Rectangle.RenderTransform>
                <!--MatrixTransform -->
                <MatrixTransform>
                    <MatrixTransform.Matrix>
                        <Matrix M11="1" M12="0.5" M21="-1" M22="0.5" OffsetX="260" OffsetY="200"  />
                    </MatrixTransform.Matrix>
                </MatrixTransform>
            </Rectangle.RenderTransform>
        </Rectangle>
    </Canvas>


运行结果：

推荐一篇讲MatrixTransform 讲的比较详细的博文：【程兴亮，博客园】http://www.cnblogs.com/chengxingliang/archive/2011/08/16/2137800.html