windows phone (16) UI變換 下

<a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/system.windows.media.matrixtransform%28v=vs.95%29.aspx">MatrixTransfrom</a>

 表示二維 x-y 平面使用 3x3 矩陣進行自定義變換，上一篇文章中的四個變換類都是基于此得到，MtrixTransForm類是通過矩陣算法運作得到相應的效果

矩陣中第三列的值是固定不變的！

　　原理：

　　原坐标（x0，y0）通過這個3*3矩陣得到變換之後的新坐标（x1，y1）的過程如下：

　　　　[x0,y0] *，通過矩陣乘法可得到坐标 (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.

1 &lt;!--源碼用法--&gt; 

2 

3 &lt;MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"&gt;&lt;/MatrixTransform&gt;

 示例：

&lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&gt;

            &lt;!--&lt;TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="變換文字示例"  Foreground="Cyan"&gt;&lt;/TextBlock&gt;--&gt;

            &lt;TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字示例"  Foreground="Cyan"&gt;

                &lt;TextBlock.RenderTransform&gt;

                    &lt;MatrixTransform Matrix="0,1,2,1,2,2"&gt;&lt;/MatrixTransform&gt;

                &lt;/TextBlock.RenderTransform&gt;

            &lt;/TextBlock&gt;

        &lt;/Grid&gt;

 效果：

 總結規律得到

        m11 ——X軸縮放

        m12 ——Y軸上傾斜

        m21 ——X軸上傾斜

        m22——Y軸縮放

        offsetX ——X軸上的位移

        offsetY ——Y軸上的位移

 部分參考：http://www.cnblogs.com/crazypig/archive/2012/02/20/2359599.html

                 http://www.oschina.net/question/213217_49488

<a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/system.windows.media.transformgroup%28v=vs.95%29.aspx">TransformGroup</a>

表示對變換效果的一種複合，在TransformGroup中可以包含其他的變換，當然也嵌套TransformGroup

代碼：

 &lt;!--ContentPanel - TransformGroup--&gt;

        &lt;Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0"&gt;

                    &lt;TransformGroup&gt;

                        &lt;TranslateTransform  X="-2" Y="3"&gt;&lt;/TranslateTransform&gt;

                        &lt;ScaleTransform ScaleX="0.8" ScaleY="0.9"&gt;&lt;/ScaleTransform&gt;

                        &lt;RotateTransform Angle="23"&gt;&lt;/RotateTransform&gt;

                        &lt;TransformGroup&gt;

                            &lt;MatrixTransform Matrix="1,0,1,1,0,1"&gt;&lt;/MatrixTransform&gt;

                        &lt;/TransformGroup&gt;

                    &lt;/TransformGroup&gt;

 這裡需要注意的是我們在定義變換的順序，因為每個變換都是基于上一個變換的基礎進行變換，效果：

<a target="_blank" href="http://msdn.microsoft.com/zh-cn/library/system.windows.media.compositetransform%28v=vs.95%29.aspx">CompositeTransform</a>

 是表示對變換的一種組合，并且具有順序性，所有的變換都是通過屬性進行設定的

        &lt;!--ContentPanel - CompositeTransform--&gt;

                    &lt;CompositeTransform Rotation="23" TranslateX="-2" TranslateY="3" ScaleX="0.8" ScaleY="0.9" &gt;&lt;/CompositeTransform&gt;

 上面代碼中用到屬性的意思Rotation表示旋轉的角度，TranslateX表示在X軸平移的位置量，TranslateY表示在Y軸平移的位置量，ScaleX表示在X軸縮放的尺寸，ScaleY表示在Y軸縮放的尺寸；

本文轉自shenzhoulong  51CTO部落格，原文連結：http://blog.51cto.com/shenzhoulong/840745，如需轉載請自行聯系原作者