Windows Phone開發（18）：變形金剛第九季

標籤：如何   hot   site   orm   fill   rectangle   off   com   translate   

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

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

 

一、TranslateTransform。

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

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

1. <Canvas>  
2.     <!-- 三個矩形在Canvas中的位置是相同的，但經過平移變換後，  
3.          看起來，好像並不在同一個位置了。      
4.     -->  
5.     <Rectangle Width="120" Height="120"  
6.                Fill="DarkGreen"  
7.                Canvas.ZIndex="0"  
8.                Canvas.Top="15"  
9.                Canvas.Left="15">  
10.         <Rectangle.RenderTransform>  
11.             <TranslateTransform X="20" Y="20"/>  
12.         </Rectangle.RenderTransform>  
13.     </Rectangle>  
14.     <Rectangle Width="120" Height="120"  
15.                Fill="Yellow"  
16.                Canvas.ZIndex="1"  
17.                Canvas.Top="15"  
18.                Canvas.Left="15">  
19.         <Rectangle.RenderTransform>  
20.             <TranslateTransform X="80" Y="80"/>  
21.         </Rectangle.RenderTransform>  
22.     </Rectangle>  
23.     <Rectangle Width="120" Height="120"  
24.                Fill="Blue"  
25.                Canvas.ZIndex="2"  
26.                Canvas.Top="15"  
27.                Canvas.Left="15">  
28.         <Rectangle.RenderTransform>  
29.             <TranslateTransform X="140" Y="140"/>  
30.         </Rectangle.RenderTransform>  
31.     </Rectangle>  
32. </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)

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

1. <Grid>  
2.     <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.3"  
3.            RenderTransformOrigin="0.5,1">  
4.         <Image.RenderTransform>  
5.             <RotateTransform Angle="-60"/>  
6.         </Image.RenderTransform>  
7.     </Image>  
8.     <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Opacity="0.6"  
9.            RenderTransformOrigin="0.5,1">  
10.         <Image.RenderTransform>  
11.             <RotateTransform Angle="0"/>  
12.         </Image.RenderTransform>  
13.     </Image>  
14.     <Image Margin="289,42,241,143" Source="/TransFormSample;component/1.jpg" Stretch="Uniform"  
15.            RenderTransformOrigin="0.5,1">  
16.         <Image.RenderTransform>  
17.             <RotateTransform  Angle="60"/>  
18.         </Image.RenderTransform>  
19.     </Image>  
20. </Grid>  

 

 

三、ScaleTransform。

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

 

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

1. <Grid>  
2.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"  
3.            Canvas.ZIndex="0" Opacity="0.09">  
4.         <Image.RenderTransform>  
5.             <ScaleTransform CenterX="110" CenterY="180" ScaleX="2" ScaleY="2"/>  
6.         </Image.RenderTransform>  
7.     </Image>  
8.   
9.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"  
10.            Canvas.ZIndex="1" Opacity="0.2">  
11.         <Image.RenderTransform>  
12.             <ScaleTransform CenterX="120" CenterY="150" ScaleX="1.6" ScaleY="1.6"/>  
13.         </Image.RenderTransform>  
14.     </Image>  
15.   
16.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130"  
17.            Canvas.ZIndex="2"/>  
18. </Grid>  

 

 

四、SkewTransform。

扭曲變換，可以說是傾斜，它的確實現了傾斜的效果。
同樣它也有一個中心點，與上面的相似，AngleX是沿X軸扭曲的角度，AngleY就是沿Y軸扭曲。

 

1. <Grid>  
2.     <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"  
3.            VerticalAlignment="Center"  
4.            Margin="100"/>  
5.     <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"  
6.            VerticalAlignment="Center"  
7.            Margin="100" Opacity="0.3">  
8.         <Image.RenderTransform>  
9.             <SkewTransform CenterX="0" CenterY="-200" AngleX="30" AngleY="0"/>  
10.         </Image.RenderTransform>  
11.     </Image>  
12.     <Image Source="/TransFormSample;component/1.jpg" HorizontalAlignment="Center"  
13.            VerticalAlignment="Center"  
14.            Margin="100" Opacity="0.3">  
15.         <Image.RenderTransform>  
16.             <SkewTransform CenterX="0" CenterY="-550" AngleX="-15" AngleY="0"/>  
17.         </Image.RenderTransform>  
18.     </Image>  
19.   
20. </Grid>  

 

 

五、TransformGroup。

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

 

1. <Grid>  
2.     <Image Source="/TransFormSample;component/1.jpg"  
3.            Stretch="Uniform" Margin="65,98,472,92" />  
4.     <Image Source="/TransFormSample;component/1.jpg"  
5.            Stretch="Uniform" Margin="65,98,472,92" >  
6.         <Image.RenderTransform>  
7.             <TransformGroup>  
8.                 <TranslateTransform X="270" Y="30"/>  
9.                 <ScaleTransform ScaleX="1.5" ScaleY="1.5" CenterX="185" CenterY="280"/>  
10.                 <RotateTransform CenterX="400" CenterY="60" Angle="18"/>  
11.             </TransformGroup>  
12.         </Image.RenderTransform>  
13.     </Image>  
14.   
15. </Grid>  

 

 

 

 

六、CompositeTransform。

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

 

 

1. <Grid>  
2.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131" />  
3.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" Margin="48,68,492,131"  
4.            Opacity="0.5">  
5.         <Image.RenderTransform>  
6.             <CompositeTransform  
7.                 CenterX="250" CenterY="185"  
8.                 Rotation="45"  
9.                 SkewX="15" SkewY="15"  
10.                 ScaleX="1.2" ScaleY="1.2"  
11.                 TranslateX="230" TranslateY="200"/>  
12.         </Image.RenderTransform>  
13.     </Image>  
14.   
15. </Grid>  

 

 

 

七、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軸上的位移

 

 

1. <Grid>  
2.     <Image Height="206" HorizontalAlignment="Left" Margin="73,104,0,0" Name="image1" Stretch="Uniform" VerticalAlignment="Top" Width="139" Source="/TransFormSample;component/1.jpg">  
3.         <Image.RenderTransform>  
4.             <MatrixTransform Matrix="2,0,0,1,12,6"/>  
5.         </Image.RenderTransform>  
6.     </Image>  
7.     <Image Height="206" HorizontalAlignment="Left" Margin="122,424,0,0" Name="image2" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="136" >  
8.         <Image.RenderTransform>  
9.             <MatrixTransform Matrix="1,-1,0,1,0,137"/>  
10.         </Image.RenderTransform>  
11.     </Image>  
12.     <Image Height="206" HorizontalAlignment="Left" Margin="293,12,0,0" Name="image3" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" >  
13.         <Image.RenderTransform>  
14.             <MatrixTransform Matrix="1,0.6,0,1,0,0"/>  
15.         </Image.RenderTransform>  
16.     </Image>  
17.     <Image Height="206" HorizontalAlignment="Left" Margin="269,424,0,0" Name="image4" Source="/TransFormSample;component/1.jpg" Stretch="Uniform" VerticalAlignment="Top" Width="139" >  
18.         <Image.RenderTransform>  
19.             <MatrixTransform Matrix="1,1,0,1,0,0"/>  
20.         </Image.RenderTransform>  
21.     </Image>  
22. </Grid>  

 

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

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

 

Windows Phone開發（18）：變形金剛第九季