自拍偷在线精品自拍偷,亚洲欧美中文日韩v在线观看不卡

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

作者：junwong
移動(dòng)開發(fā)
相信各位如果玩過Photoshop，或者其它的繪圖軟件，應(yīng)該知道什么叫做旋轉(zhuǎn)，什么叫做傾斜，什么叫做平移……是的，這些就是我們今天要聊的變換，好了，現(xiàn)在你是不是可以坐下來喝一杯珍珠奶茶來放松一下呢？哦，對(duì)了，珍珠奶茶盡量少喝哦。

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

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

一、TranslateTransform。

這個(gè)應(yīng)該算是***理解了，就是平移嘛，相信大家不會(huì)陌生的，學(xué)習(xí)解析幾何的時(shí)候是不是經(jīng)常玩?。克鼰o非就兩個(gè)參數(shù)——X和Y，分別是平面上兩個(gè)方向的位移。

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

  1. <Canvas> 
  2.     <!-- 三個(gè)矩形在Canvas中的位置是相同的，但經(jīng)過平移變換后， 
  3.          看起來，好像并不在同一個(gè)位置了。     
  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。

這個(gè)家伙就是用來旋轉(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ì)定位，可以通過UIElement的RenderTransformOrigin屬性來改動(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)的角度不同而已。

  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> 

 別走開，下頁繼續(xù)深入介紹

 

 #p#

 

三、ScaleTransform。

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

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

  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.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130" 
  9.            Canvas.ZIndex="1" Opacity="0.2"> 
  10.         <Image.RenderTransform> 
  11.             <ScaleTransform CenterX="120" CenterY="150" ScaleX="1.6" ScaleY="1.6"/> 
  12.         </Image.RenderTransform> 
  13.     </Image> 
  14.     <Image Source="/TransFormSample;component/1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" Margin="130" 
  15.            Canvas.ZIndex="2"/> 
  16. </Grid> 

四、SkewTransform。

扭曲變換，可以說是傾斜，它的確實(shí)現(xiàn)了傾斜的效果。

同樣它也有一個(gè)中心點(diǎn)，與上面的相似，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. </Grid> 

五、TransformGroup。

嚴(yán)格上說，這個(gè)不算是一種變換，但它可以實(shí)現(xiàn)把N個(gè)變換疊加在一起。

  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. </Grid> 

六、CompositeTransform。

這與上面的TransformGroup有點(diǎn)像，但你也看到，它不是把多個(gè)變換疊加，而是同時(shí)應(yīng)用多種變換方式，但它是有順序的。
縮放 ->扭曲->旋轉(zhuǎn)->位移

  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. </Grid>

 別走開，下頁繼續(xù)深入介紹

 #p#

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

  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> 

如何學(xué)習(xí)有關(guān)變換的知識(shí)呢？個(gè)人推薦一種方法，很有效，那就是——亂來。
真的，亂來的學(xué)習(xí)效果很好的，呵呵。

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

責(zé)任編輯：閆佳明 來源： oschina
Windows Phone開發(fā)Windows Phone變換
相關(guān)推薦

2011-08-09 15:20:38

2011-07-22 09:03:20

FTTHPONEPON

2009-07-13 18:11:53

2012-02-23 00:22:55

2009-07-24 16:52:47

2009-07-09 19:01:23

2015-08-04 09:22:37

2021-04-12 09:47:08

機(jī)器人人工智能編程

2011-12-16 15:34:15

IaaS云計(jì)算變形金剛

2011-07-06 09:13:55

服務(wù)器Watson變形金剛

2009-06-25 08:57:15

木馬網(wǎng)絡(luò)安全金山毒霸

2012-05-21 15:41:40

2017-07-25 08:21:05

2012-12-10 11:32:12

打印機(jī)

2011-06-09 17:51:29

聯(lián)想一體機(jī)

2011-07-25 10:50:02

水晶石CG

2019-08-13 16:40:14

2014-05-20 10:59:32

2022-03-11 13:33:50

人工智能神經(jīng)網(wǎng)絡(luò)計(jì)算機(jī)視覺

2013-07-30 12:37:56

Windows PhoWindows Pho
點(diǎn)贊
收藏

51CTO技術(shù)棧公眾號(hào)