Windows Phone开发（18）：变形金刚第九季——变换
變換不是一個(gè)好理解的概念，不是嚇你，它涉及很多有關(guān)代數(shù)，幾何，以及線性代數(shù)的知識(shí)。怎么？被我的話嚇怕了？不用怕，盡管我們未必能夠理解這些概念，只要我們知道怎么使用它們就是了。
其實(shí)，變換就是平面上一種坐標(biāo)變化，聽起來很抽象，但，只要我把它說具體了，你就會(huì)覺得不抽象了。
相信各位如果玩過Photoshop，或者其它的繪圖軟件，應(yīng)該知道什么叫做旋轉(zhuǎn)，什么叫做傾斜，什么叫做平移……
是的，這些就是我們今天要聊的變換，好了，現(xiàn)在你是不是可以坐下來喝一杯珍珠奶茶來放松一下呢？哦，對了，珍珠奶茶盡量少喝哦。
好，閑話少吹，開始今天的表演。
?
一、TranslateTransform。
這個(gè)應(yīng)該算是最好理解了，就是平移嘛，相信大家不會(huì)陌生的，學(xué)習(xí)解析幾何的時(shí)候是不是經(jīng)常玩啊？它無非就兩個(gè)參數(shù)——X和Y，分別是平面上兩個(gè)方向的位移。
上圖中的三個(gè)矩形，它們的位置是一樣的，但經(jīng)過平移后，看起來它們好像不在同一個(gè)位置了。
?
二、RotateTransform。
這個(gè)家伙就是用來旋轉(zhuǎn)元素的，Angle屬性就是旋轉(zhuǎn)的角度，不用我解釋了吧，小學(xué)生的知識(shí)。另外，有兩個(gè)屬性要注意一下：
CenterX：旋轉(zhuǎn)中心的X坐標(biāo)，這個(gè)坐標(biāo)是相對于目標(biāo)的左上角的，例如，你要讓一個(gè)矩形轉(zhuǎn)旋轉(zhuǎn)，默認(rèn)的情況，旋轉(zhuǎn)中心就是0，就是矩形的左上角；
CenterY：和上面一樣了，只是Y坐標(biāo)的點(diǎn)。
這兩個(gè)旋轉(zhuǎn)點(diǎn)不太好把握，如果我們希望比較的相對定位，可以通過UIElement的RenderTransformOrigin屬性來改動(dòng)旋轉(zhuǎn)原點(diǎn)，這個(gè)點(diǎn)坐標(biāo)是相對于元素可視化的邊界的，即0到1之間的值，如：
1、左上角：(0,0)
2、左下角：(1,1)
3、頂部居中：(0.5,0)
4、底部居中：(0.5,1)
上圖中的三個(gè)圖象，旋轉(zhuǎn)中心都在底部居中，只是旋轉(zhuǎn)的角度不同而已。
?
?
三、ScaleTransform。
與上面的旋轉(zhuǎn)變換相似，但這個(gè)是用于放大和縮小的，它也有一個(gè)中心點(diǎn)，就是縮放中心，同樣，它的默認(rèn)值是目標(biāo)元素的左上角，至于以哪個(gè)點(diǎn)為縮放中心，你就自己調(diào)整中心坐標(biāo)了。
?
上圖中為了能清楚看到縮放的效果，后面兩個(gè)圖象都設(shè)置透明度。
<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。
扭曲變換，可以說是傾斜，它的確實(shí)現(xiàn)了傾斜的效果。
同樣它也有一個(gè)中心點(diǎn)，與上面的相似，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。
嚴(yán)格上說，這個(gè)不算是一種變換，但它可以實(shí)現(xiàn)把N個(gè)變換疊加在一起。
?
<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有點(diǎn)像，但你也看到，它不是把多個(gè)變換疊加，而是同時(shí)應(yīng)用多種變換方式，但它是有順序的。
縮放 ->扭曲->旋轉(zhuǎn)->位移
?
?
<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>
?
?
?
七、MatrixTrasform。
這是最復(fù)雜的一種變換，它是一個(gè)3乘3的矩陣，但是，由于它第3列為0，0，1，所以，其實(shí)我們只需設(shè)置6個(gè)值就夠了。它們分別是：
?m11????? ?m12??? ?0
?m21???? ? m22??? ?0
?offsetX? offsetY? 1
可能是offsetX和offsetY比較容易看出來就是位移，那前面幾呢？我們可以猜，默認(rèn)值為1的就是縮放，因?yàn)椴豢赡転?倍，剩下兩個(gè)就是X軸和Y軸方向的傾斜值了。
其實(shí)，我也是通過寫代碼來找規(guī)律的，保持其實(shí)參數(shù)不變單獨(dú)改變一個(gè)參數(shù)來觀察圖形的變化就能找到答案了。
??????? 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>
?
如何學(xué)習(xí)有關(guān)變換的知識(shí)呢？個(gè)人推薦一種方法，很有效，那就是——亂來。
真的，亂來的學(xué)習(xí)效果很好的，呵呵。
你可以寫好代碼，然后不斷地改變數(shù)值，看看有什么變化，多試幾次你就會(huì)找到規(guī)律。
?
?
總結(jié)
以上是生活随笔為你收集整理的Windows Phone开发（18）：变形金刚第九季——变换的全部內(nèi)容，希望文章能夠幫你解決所遇到的問題。
- 上一篇： 触发器before和after的区别
- 下一篇： javascript对象操作总结