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

