windows phone (16) UI變換 下

 

上一篇中說到四個變換類，都是比較簡單的，這裡要說到四個變換類，分別為：

 

MatrixTransfrom矩陣變換，一句標準矩陣表示的變換

TransformGroup 複合變換按照指定順序將多個變換複合為一個變換

CompositeTransform組合變換按照固定順序組合一系列變換

 

MatrixTransfrom

 

 表示二維 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 <!--源碼用法--> 2 3 <MatrixTransform Matrix="M11 M12 M21 M22 OffsetX OffsetY"></MatrixTransform>

 樣本：

<Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <!--<TextBlock x:Name="tb1" FontSize="72" HorizontalAlignment="Center" VerticalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan"></TextBlock>-->            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan">                <TextBlock.RenderTransform>                    <MatrixTransform Matrix="0,1,2,1,2,2"></MatrixTransform>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

效果：

 

 總結規律得到

 

        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

 

TransformGroup

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

 

代碼：

 

<!--ContentPanel - TransformGroup-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan">                <TextBlock.RenderTransform>                    <TransformGroup>                        <TranslateTransform  X="-2" Y="3"></TranslateTransform>                        <ScaleTransform ScaleX="0.8" ScaleY="0.9"></ScaleTransform>                        <RotateTransform Angle="23"></RotateTransform>                        <TransformGroup>                            <MatrixTransform Matrix="1,0,1,1,0,1"></MatrixTransform>                        </TransformGroup>                    </TransformGroup>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

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

 

 

 

CompositeTransform

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

<!--ContentPanel - CompositeTransform-->        <Grid x:Name="ContentPanel" Grid.Row="1" Margin="12,0,12,0">            <TextBlock x:Name="tbShow" FontSize="72" VerticalAlignment="Center" HorizontalAlignment="Center" Text="變換文字樣本"  Foreground="Cyan">                <TextBlock.RenderTransform>                    <CompositeTransform Rotation="23" TranslateX="-2" TranslateY="3" ScaleX="0.8" ScaleY="0.9" ></CompositeTransform>                </TextBlock.RenderTransform>            </TextBlock>        </Grid>

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

 

 TransformGroup和CompositeTransfom異同：兩者可以設定相同的屬性得到相同的效果，在TransformGroup中我們可以使用TransformGroup進行相同變換的多次使用，但是在CompositeTransfom中使用屬性是不允許的，還有就是在TransformGroup我們可以使用自訂變換MatrixTransfrom，但是在組合變換CompositeTransfom中並沒有該屬性；兩者還需要注意的是順序性，不同的順序，實現的效果不同；