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

來源:互聯網
上載者:User

標籤:角度   如何   關係   練習   能力   為什麼   one   nbsp   express   

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


練習一:把對象沿Y軸旋轉45度。


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


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

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

好,現在我們就來做做把對象沿X軸旋轉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,就這麼簡單,可能在設計器裡沒有看到效果,沒關係,你現在輕輕按下F5,馬上你就會看到奇蹟發生。

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

 

練習二:沿X軸旋轉-60度。


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


和上面沒什麼區別,只是Y變成X罷了。

 

 

 

練習三:沿Z軸旋轉180度。


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

 


剛才說了,Z軸是指向你自己,可能這明顯,現在你把它改為35度,相信效果就明顯了。
        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationZ="35"/>
            </Image.Projection>
        </Image>

 

 

 


練習四:綜合旋轉。


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

現在,我們把對象沿X軸旋轉15度,沿Y軸旋轉-65度,沿Z軸旋轉40度,看看會如何?

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection 
                    RotationX="15"
                    RotationY="-65"
                    RotationZ="40"/>
            </Image.Projection>
        </Image>

 

 

 

 

練習五:心變中心點位置。


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

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

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection 
                    RotationX="15"
                    RotationY="-65"
                    RotationZ="40"
                    CenterOfRotationX="0.2"
                    CenterOfRotationY="0.7"
                    CenterOfRotationZ="1"/>
            </Image.Projection>
        </Image>

 

 

明顯看到,位置不在中間了,認真觀察一下,你會發現的。

 

 


練習六:本地位移。


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

        <Image Source="2.jpg" Stretch="Uniform" 
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Height="300">
            <Image.Projection>
                <PlaneProjection
                    LocalOffsetX="12"
                    LocalOffsetY="5"
                    LocalOffsetZ="24"
                    RotationX="10"
                    RotationY="-30"
                    RotationZ="-25"/>
            </Image.Projection>
        </Image>

 

 

 

 

 

練習七:全域位移。


這個全域偏就是移動螢幕座標,如果你願意去總結的話,你會發現它和解析幾何中的座標系平移的規律一樣。
即:左加右減,上加下減。
你可以不斷地改變數值來測試,相信你一定能找到規律的,呵呵,放心,Hello Kitty會鼓勵你的。

        <Image Source="2.jpg" Stretch="Uniform" 
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Height="300">
            <Image.Projection>
                <PlaneProjection
                    GlobalOffsetX="8"
                    GlobalOffsetY="55"
                    GlobalOffsetZ="800"
                    RotationX="10"
                    RotationY="-30"
                    RotationZ="-25"/>
            </Image.Projection>
        </Image>

 

 

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

 

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

相關文章

聯繫我們

該頁面正文內容均來源於網絡整理,並不代表阿里雲官方的觀點,該頁面所提到的產品和服務也與阿里云無關,如果該頁面內容對您造成了困擾,歡迎寫郵件給我們,收到郵件我們將在5個工作日內處理。

如果您發現本社區中有涉嫌抄襲的內容,歡迎發送郵件至: info-contact@alibabacloud.com 進行舉報並提供相關證據,工作人員會在 5 個工作天內聯絡您,一經查實,本站將立刻刪除涉嫌侵權內容。

Tags Index: