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

Windows Phone開發(fā)(19):三維透視效果

移動開發(fā)
簡直的透視效果用PlaneProjection類就可以輕松完成,如果要復(fù)雜的3D模型,就要求你具備灰常強大的空間思維能力了,建議使用其它的 3D建模軟件如3D Max等,Express Blend支持導(dǎo)入,復(fù)雜的三維模型還是推薦使用Express Blend來圖形化操作,這樣會直觀一點,當然,如果你用PlaneProjection類,就沒必要,因為它還算比較簡單的。

三維效果也可以叫透視效果,所以,我干脆叫三維透視效果。理論知識少講,直接用例開場吧,因為這個三維效果其實很簡單,比上一節(jié)中的變換更省事,不信?一起來做一做練習(xí)吧。

練習(xí)一:把對象沿Y軸旋轉(zhuǎn)45度。

默認情況下,旋轉(zhuǎn)中心都是在中心位置上,如Y軸中心。而至于旋轉(zhuǎn)的角度,哪個方向是正值,哪個方向是負值,嘿,你自己動手試一下就知道了,我相信你能理解的,不然,Hello Kitty嘲笑你的。

好的,由于是第一個練習(xí),我們先來說說X、Y、Z三個坐標軸到底在哪,X軸不用說了,就橫著放的那個了,Y軸呢,當然是豎著的,那Z軸呢?你猜?知道這三個軸是互相垂直的,你會猜的,在哪?在圖上看不到?為什么呢?
是啊,Z軸正指向你呢,你怎么會看到呢?對著你那個就是了,所以,在三維透視里面,如果你希望把對象拉遠一點,就把Z值設(shè)小一點了,如果希望對象跟你“親密”一點,那就把Z的平移值設(shè)置大一點,知道不,Z軸平稱也叫“親密指數(shù)”,呵呵。

簡直的透視效果用PlaneProjection類就可以輕松完成,如果要復(fù)雜的3D模型,就要求你具備灰常強大的空間思維能力了,建議使用其它的 3D建模軟件如3D Max等,Express Blend支持導(dǎo)入,復(fù)雜的三維模型還是推薦使用Express Blend來圖形化操作,這樣會直觀一點,當然,如果你用PlaneProjection類,就沒必要,因為它還算比較簡單的。

好,現(xiàn)在我們就來做做把對象沿X軸旋轉(zhuǎn)45度吧,也就是上面圖片在的效果,當然,PlaneProjection類可以用于許多UI元素中,不一定是圖片,為了直觀和美觀,我用圖片,也順便找兩位MM來熱鬧一下。

  1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" 
  2.         Width="320"
  3.     <Image.Projection> 
  4.         <PlaneProjection RotationY="45"/> 
  5.     </Image.Projection> 
  6. </Image>

OK,就這么簡單,可能在設(shè)計器里沒有看到效果,沒關(guān)系,你現(xiàn)在輕輕按下F5,馬上你就會看到奇跡發(fā)生。

這里我提示一下,所有UI元素對PlaneProjection的使用方法都是一樣的,下文的例子中你會看到,就是設(shè)置對象的Projection屬性。

練習(xí)二:沿X軸旋轉(zhuǎn)-60度。

  1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" 
  2.         Width="320"
  3.     <Image.Projection> 
  4.         <PlaneProjection RotationX="-60"/> 
  5.     </Image.Projection> 
  6. </Image> 

和上面沒什么區(qū)別,只是Y變成X罷了。

練習(xí)三:沿Z軸旋轉(zhuǎn)180度。

  1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" 
  2.          Width="320"
  3.      <Image.Projection> 
  4.          <PlaneProjection RotationZ="180"/> 
  5.      </Image.Projection> 
  6.  </Image> 

剛才說了,Z軸是指向你自己,可能這明顯,現(xiàn)在你把它改為35度,相信效果就明顯了。

  1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" 
  2.         Width="320"
  3.     <Image.Projection> 
  4.         <PlaneProjection RotationZ="35"/> 
  5.     </Image.Projection> 
  6. </Image> 

 別走開,下頁內(nèi)容更精彩

 #p#

練習(xí)四:綜合旋轉(zhuǎn)。

上面的例子都是單獨旋轉(zhuǎn)某的軸的,那么能不能X、Y、Z三軸同時干活呢?當然可以了,XYZ搭配,干活不累!

現(xiàn)在,我們把對象沿X軸旋轉(zhuǎn)15度,沿Y軸旋轉(zhuǎn)-65度,沿Z軸旋轉(zhuǎn)40度,看看會如何?

  1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" 
  2.         Width="320"
  3.     <Image.Projection> 
  4.         <PlaneProjection 
  5.             RotationX="15" 
  6.             RotationY="-65" 
  7.             RotationZ="40"/> 
  8.     </Image.Projection> 
  9. </Image> 

練習(xí)五:心變中心點位置。

默認中心點位于中對象的中線上,但我們可以通過 CenterOfRotationX,CenterOfRotationY,CenterOfRotationZ三個屬性來改變中心位置,值范圍0到1, 兩個極端,不是在這一側(cè)就是那一側(cè),如果是0和1之間的值就按比例計算了,如0.5就是默認的中間位置。

下面我們同時把X軸的中心改為0.2,Y軸中心改為0.7,Z軸中心改為1,看看有什么事情發(fā)生。

  1. <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center" 
  2.         Width="320"
  3.     <Image.Projection> 
  4.         <PlaneProjection 
  5.             RotationX="15" 
  6.             RotationY="-65" 
  7.             RotationZ="40" 
  8.             CenterOfRotationX="0.2" 
  9.             CenterOfRotationY="0.7" 
  10.             CenterOfRotationZ="1"/> 
  11.     </Image.Projection> 
  12. </Image> 

明顯看到,位置不在中間了,認真觀察一下,你會發(fā)現(xiàn)的。

練習(xí)六:本地偏移。

我說的本地平移只是為了相對于屏幕平移,其實這樣翻譯有點難聽。涉及的屬性同樣有三個——LocalOffsetX, LocalOffsetY, LocalOffsetZ,相信不用我多說了,你自己玩幾下就明白,關(guān)鍵是多動手,多對比。

  1. <Image Source="2.jpg" Stretch="Uniform" 
  2.        HorizontalAlignment="Center" 
  3.        VerticalAlignment="Center" 
  4.        Height="300"
  5.     <Image.Projection> 
  6.         <PlaneProjection 
  7.             LocalOffsetX="12" 
  8.             LocalOffsetY="5" 
  9.             LocalOffsetZ="24" 
  10.             RotationX="10" 
  11.             RotationY="-30" 
  12.             RotationZ="-25"/> 
  13.     </Image.Projection> 
  14. </Image>

練習(xí)七:全局偏移。

這個全局偏就是移動屏幕坐標,如果你愿意去總結(jié)的話,你會發(fā)現(xiàn)它和解析幾何中的坐標系平移的規(guī)律一樣。
即:左加右減,上加下減。
你可以不斷地改變數(shù)值來測試,相信你一定能找到規(guī)律的,呵呵,放心,Hello Kitty會鼓勵你的。

  1. <Image Source="2.jpg" Stretch="Uniform" 
  2.        HorizontalAlignment="Center" 
  3.        VerticalAlignment="Center" 
  4.        Height="300"
  5.     <Image.Projection> 
  6.         <PlaneProjection 
  7.             GlobalOffsetX="8" 
  8.             GlobalOffsetY="55" 
  9.             GlobalOffsetZ="800" 
  10.             RotationX="10" 
  11.             RotationY="-30" 
  12.             RotationZ="-25"/> 
  13.     </Image.Projection> 
  14. </Image> 

研究這個透視效果,還是老方法——亂來,不斷地用數(shù)值去測試,想一想,有時候亂來是很有價值的。

責(zé)任編輯:閆佳明 來源: oschina
相關(guān)推薦

2013-07-30 12:37:56

Windows PhoWindows Pho

2010-04-21 17:07:54

Windows Pho

2010-05-25 13:22:43

2013-04-16 17:02:50

Windows Pho概論

2013-04-19 16:34:56

Windows PhoWindows Pho

2013-07-30 11:18:37

Windows PhoWindows Pho

2011-06-07 12:42:15

Windows Pho

2013-04-17 14:00:06

Windows PhoWindows Pho

2010-04-08 17:40:23

Windows Pho

2012-02-01 15:43:34

Windows Pho移動開發(fā)

2010-12-14 18:48:49

微軟

2013-07-31 13:13:50

Windows PhoMVVM模式

2012-06-04 14:47:58

Windows Pho

2013-04-19 15:35:54

Windows Pho隔離存儲

2013-04-19 16:52:24

Windows PhoWindows Pho

2013-07-31 12:50:39

搭建Windows PWindows Pho

2013-04-17 13:27:04

Windows PhoWindows Pho

2011-06-07 11:35:38

Windows Pho

2012-08-16 10:35:50

Windows Pho

2013-04-17 14:47:19

Windows PhoWindows Pho
點贊
收藏

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