Windows Phone開發(18):變形金剛第九季—變換

作者：junwong 2013-04-17 15:07:26

相信各位如果玩過Photoshop，或者其它的繪圖軟件，應該知道什么叫做旋轉，什么叫做傾斜，什么叫做平移……是的，這些就是我們今天要聊的變換，好了，現在你是不是可以坐下來喝一杯珍珠奶茶來放松一下呢？哦，對了，珍珠奶茶盡量少喝哦。

變換不是一個好理解的概念，不是嚇你，它涉及很多有關代數，幾何，以及線性代數的知識。怎么？被我的話嚇怕了？不用怕，盡管我們未必能夠理解這些概念，只要我們知道怎么使用它們就是了。
其實，變換就是平面上一種坐標變化，聽起來很抽象，但，只要我把它說具體了，你就會覺得不抽象了。
相信各位如果玩過Photoshop，或者其它的繪圖軟件，應該知道什么叫做旋轉，什么叫做傾斜，什么叫做平移……
是的，這些就是我們今天要聊的變換，好了，現在你是不是可以坐下來喝一杯珍珠奶茶來放松一下呢？哦，對了，珍珠奶茶盡量少喝哦。

好，閑話少吹，開始今天的表演。

一、TranslateTransform。

這個應該算是***理解了，就是平移嘛，相信大家不會陌生的，學習解析幾何的時候是不是經常玩啊？它無非就兩個參數——X和Y，分別是平面上兩個方向的位移。

上圖中的三個矩形，它們的位置是一樣的，但經過平移后，看起來它們好像不在同一個位置了。

<Canvas> 
    <!-- 三個矩形在Canvas中的位置是相同的，但經過平移變換后， 
         看起來，好像并不在同一個位置了。     
    --> 
    <Rectangle Width="120" Height="120" 
               Fill="DarkGreen" 
               Canvas.ZIndex="0" 
               Canvas.Top="15" 
               Canvas.Left="15"> 
        <Rectangle.RenderTransform> 
            <TranslateTransform X="20" Y="20"/> 
        </Rectangle.RenderTransform> 
    </Rectangle> 
    <Rectangle Width="120" Height="120" 
               Fill="Yellow" 
               Canvas.ZIndex="1" 
               Canvas.Top="15" 
               Canvas.Left="15"> 
        <Rectangle.RenderTransform> 
            <TranslateTransform X="80" Y="80"/> 
        </Rectangle.RenderTransform> 
    </Rectangle> 
    <Rectangle Width="120" Height="120" 
               Fill="Blue" 
               Canvas.ZIndex="2" 
               Canvas.Top="15" 
               Canvas.Left="15"> 
        <Rectangle.RenderTransform> 
            <TranslateTransform X="140" Y="140"/> 
        </Rectangle.RenderTransform> 
    </Rectangle> 
</Canvas>

二、RotateTransform。

這個家伙就是用來旋轉元素的，Angle屬性就是旋轉的角度，不用我解釋了吧，小學生的知識。另外，有兩個屬性要注意一下：
CenterX：旋轉中心的X坐標，這個坐標是相對于目標的左上角的，例如，你要讓一個矩形轉旋轉，默認的情況，旋轉中心就是0，就是矩形的左上角；
CenterY：和上面一樣了，只是Y坐標的點。

這兩個旋轉點不太好把握，如果我們希望比較的相對定位，可以通過UIElement的RenderTransformOrigin屬性來改動旋轉原點，這個點坐標是相對于元素可視化的邊界的，即0到1之間的值，如：
1、左上角：(0,0)
2、左下角：(1,1)
3、頂部居中：(0.5,0)
4、底部居中：(0.5,1)

上圖中的三個圖象，旋轉中心都在底部居中，只是旋轉的角度不同而已。

<Grid> 
    <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.3" 
           RenderTransformOrigin="0.5,1"> 
        <Image.RenderTransform> 
            <RotateTransform Angle="-60"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.6" 
           RenderTransformOrigin="0.5,1"> 
        <Image.RenderTransform> 
            <RotateTransform Angle="0"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" 
           RenderTransformOrigin="0.5,1"> 
        <Image.RenderTransform> 
            <RotateTransform  Angle="60"/> 
        </Image.RenderTransform> 
    </Image> 
</Grid>

別走開，下頁繼續深入介紹

#p#

三、ScaleTransform。

與上面的旋轉變換相似，但這個是用于放大和縮小的，它也有一個中心點，就是縮放中心，同樣，它的默認值是目標元素的左上角，至于以哪個點為縮放中心，你就自己調整中心坐標了。

上圖中為了能清楚看到縮放的效果，后面兩個圖象都設置透明度。

<Grid> 
    <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130" 
           Canvas.ZIndex="0" Opacity="0.09"> 
        <Image.RenderTransform> 
            <ScaleTransform CenterX="110" CenterY="180" ScaleX="2" ScaleY="2"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130" 
           Canvas.ZIndex="1" Opacity="0.2"> 
        <Image.RenderTransform> 
            <ScaleTransform CenterX="120" CenterY="150" ScaleX="1.6" ScaleY="1.6"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130" 
           Canvas.ZIndex="2"/> 
</Grid>

四、SkewTransform。

扭曲變換，可以說是傾斜，它的確實現了傾斜的效果。

同樣它也有一個中心點，與上面的相似，AngleX是沿X軸扭曲的角度，AngleY就是沿Y軸扭曲。

<Grid> 
    <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Margin="100"/> 
    <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Margin="100" Opacity="0.3"> 
        <Image.RenderTransform> 
            <SkewTransform CenterX="0" CenterY="-200" AngleX="30" AngleY="0"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center" 
           VerticalAlignment="Center" 
           Margin="100" Opacity="0.3"> 
        <Image.RenderTransform> 
            <SkewTransform CenterX="0" CenterY="-550" AngleX="-15" AngleY="0"/> 
        </Image.RenderTransform> 
    </Image> 
</Grid>

五、TransformGroup。

嚴格上說，這個不算是一種變換，但它可以實現把N個變換疊加在一起。

<Grid> 
    <Image Source="/TransFormSample;component/1.jpg" 
           Stretch="Uniform" Margin="65,98,472,92" /> 
    <Image Source="/TransFormSample;component/1.jpg" 
           Stretch="Uniform" Margin="65,98,472,92" > 
        <Image.RenderTransform> 
            <TransformGroup> 
                <TranslateTransform X="270" Y="30"/> 
                <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="185" CenterY="280"/> 
                <RotateTransform CenterX="400" CenterY="60" Angle="18"/> 
            </TransformGroup> 
        </Image.RenderTransform> 
    </Image> 
</Grid>

六、CompositeTransform。

這與上面的TransformGroup有點像，但你也看到，它不是把多個變換疊加，而是同時應用多種變換方式，但它是有順序的。
縮放 ->扭曲->旋轉->位移

<Grid> 
    <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131" /> 
    <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131" 
           Opacity="0.5"> 
        <Image.RenderTransform> 
            <CompositeTransform 
                CenterX="250" CenterY="185" 
                Rotation="45" 
                SkewX="15" SkewY="15" 
                ScaleX="1.2" ScaleY="1.2" 
                TranslateX="230" TranslateY="200"/> 
        </Image.RenderTransform> 
    </Image> 
</Grid>

別走開，下頁繼續深入介紹

#p#

七、MatrixTrasform。

這是最復雜的一種變換，它是一個3乘3的矩陣，但是，由于它第3列為0，0，1，所以，其實我們只需設置6個值就夠了。它們分別是：
m11 m12 0
m21 m22 0
offsetX offsetY 1
可能是offsetX和offsetY比較容易看出來就是位移，那前面幾呢？我們可以猜，默認值為1的就是縮放，因為不可能為0倍，剩下兩個就是X軸和Y軸方向的傾斜值了。

其實，我也是通過寫代碼來找規律的，保持其實參數不變單獨改變一個參數來觀察圖形的變化就能找到答案了。
m11 ——X軸縮放
m12 ——Y軸上傾斜
m21 ——X軸上傾斜
m22——Y軸縮放
offsetX ——X軸上的位移
offsetY ——Y軸上的位移

<Grid> 
    <Image Height="206" HorizontalAlignment="Left" Margin="73,104,0,0" Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="139" Source="/TransFormSample;component/1.jpg"> 
        <Image.RenderTransform> 
            <MatrixTransform Matrix="2,0,0,1,12,6"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Height="206" HorizontalAlignment="Left" Margin="122,424,0,0" Name="image2" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="136" > 
        <Image.RenderTransform> 
            <MatrixTransform Matrix="1,-1,0,1,0,137"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Height="206" HorizontalAlignment="Left" Margin="293,12,0,0" Name="image3" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" > 
        <Image.RenderTransform> 
            <MatrixTransform Matrix="1,0.6,0,1,0,0"/> 
        </Image.RenderTransform> 
    </Image> 
    <Image Height="206" HorizontalAlignment="Left" Margin="269,424,0,0" Name="image4" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" > 
        <Image.RenderTransform> 
            <MatrixTransform Matrix="1,1,0,1,0,0"/> 
        </Image.RenderTransform> 
    </Image> 
</Grid>

如何學習有關變換的知識呢？個人推薦一種方法，很有效，那就是——亂來。
真的，亂來的學習效果很好的，呵呵。

你可以寫好代碼，然后不斷地改變數值，看看有什么變化，多試幾次你就會找到規律。

責任編輯：閆佳明來源： oschina

Windows Phone開發 Windows Phone變換