變換不是一個(gè)好理解的概念，不是嚇你，它涉及很多有關(guān)代數(shù)，幾何，以及線性代數(shù)的知識(shí)。怎么？被我的話嚇怕了？不用怕，盡管我們未必能夠理解這些概念，只要我們知道怎么使用它們就是了。
其實(shí)，變換就是平面上一種坐標(biāo)變化，聽(tīng)起來(lái)很抽象，但，只要我把它說(shuō)具體了，你就會(huì)覺(jué)得不抽象了。
相信各位如果玩過(guò)Photoshop，或者其它的繪圖軟件，應(yīng)該知道什么叫做旋轉(zhuǎn)，什么叫做傾斜，什么叫做平移……
是的，這些就是我們今天要聊的變換，好了，現(xiàn)在你是不是可以坐下來(lái)喝一杯珍珠奶茶來(lái)放松一下呢？哦，對(duì)了，珍珠奶茶盡量少喝哦。
好，閑話少吹，開(kāi)始今天的表演。
一、TranslateTransform。
這個(gè)應(yīng)該算是最好理解了，就是平移嘛，相信大家不會(huì)陌生的，學(xué)習(xí)解析幾何的時(shí)候是不是經(jīng)常玩啊？它無(wú)非就兩個(gè)參數(shù)——X和Y，分別是平面上兩個(gè)方向的位移。
上圖中的三個(gè)矩形，它們的位置是一樣的，但經(jīng)過(guò)平移后，看起來(lái)它們好像不在同一個(gè)位置了。
<Canvas>
<!-- 三個(gè)矩形在Canvas中的位置是相同的，但經(jīng)過(guò)平移變換后，
看起來(lái)，好像并不在同一個(gè)位置了。
-->
<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。
這個(gè)家伙就是用來(lái)旋轉(zhuǎn)元素的，Angle屬性就是旋轉(zhuǎn)的角度，不用我解釋了吧，小學(xué)生的知識(shí)。另外，有兩個(gè)屬性要注意一下：
CenterX：旋轉(zhuǎn)中心的X坐標(biāo)，這個(gè)坐標(biāo)是相對(duì)于目標(biāo)的左上角的，例如，你要讓一個(gè)矩形轉(zhuǎn)旋轉(zhuǎn)，默認(rèn)的情況，旋轉(zhuǎn)中心就是0，就是矩形的左上角；
CenterY：和上面一樣了，只是Y坐標(biāo)的點(diǎn)。
這兩個(gè)旋轉(zhuǎn)點(diǎn)不太好把握，如果我們希望比較的相對(duì)定位，可以通過(guò)UIElement的RenderTransformOrigin屬性來(lái)改動(dòng)旋轉(zhuǎn)原點(diǎn)，這個(gè)點(diǎn)坐標(biāo)是相對(duì)于元素可視化的邊界的，即0到1之間的值，如：
1、左上角：(0,0)
2、左下角：(1,1)
3、頂部居中：(0.5,0)
4、底部居中：(0.5,1)
上圖中的三個(gè)圖象，旋轉(zhuǎn)中心都在底部居中，只是旋轉(zhuǎn)的角度不同而已。
<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>
三、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。
扭曲變換，可以說(shuō)是傾斜，它的確實(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)格上說(shuō)，這個(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比較容易看出來(lái)就是位移，那前面幾呢？我們可以猜，默認(rèn)值為1的就是縮放，因?yàn)椴豢赡転?倍，剩下兩個(gè)就是X軸和Y軸方向的傾斜值了。
其實(shí)，我也是通過(guò)寫(xiě)代碼來(lái)找規(guī)律的，保持其實(shí)參數(shù)不變單獨(dú)改變一個(gè)參數(shù)來(lái)觀察圖形的變化就能找到答案了。
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è)人推薦一種方法，很有效，那就是——亂來(lái)。
真的，亂來(lái)的學(xué)習(xí)效果很好的，呵呵。
你可以寫(xiě)好代碼，然后不斷地改變數(shù)值，看看有什么變化，多試幾次你就會(huì)找到規(guī)律。
更多文章、技術(shù)交流、商務(wù)合作、聯(lián)系博主
微信掃碼或搜索：z360901061
微信掃一掃加我為好友
QQ號(hào)聯(lián)系： 360901061
您的支持是博主寫(xiě)作最大的動(dòng)力，如果您喜歡我的文章，感覺(jué)我的文章對(duì)您有幫助，請(qǐng)用微信掃描下面二維碼支持博主2元、5元、10元、20元等您想捐的金額吧，狠狠點(diǎn)擊下面給點(diǎn)支持吧，站長(zhǎng)非常感激您！手機(jī)微信長(zhǎng)按不能支付解決辦法：請(qǐng)將微信支付二維碼保存到相冊(cè)，切換到微信，然后點(diǎn)擊微信右上角掃一掃功能，選擇支付二維碼完成支付。
【本文對(duì)您有幫助就好】元
