win10 uwp 使用 Matrix3DProjection 進行 3d 投影 原文:win10 uwp 使用 Matrix3DProjection 進行 3d 投影

版權聲明：博客已遷移到 http://lindexi.gitee.io 歡迎訪問。如果當前博客圖片看不到，請到 http://lindexi.gitee.io 訪問博客。本文地址 https://blog.csdn.net/lindexi_gd/article/details/84252512

在UWP可以通過 Matrix3DProjection 讓元素顯示出來的界面進行 3d 變換

在所有的 UIElement 都可以通過 Projection 屬性，設置元素的投影，可以讓 2d 的元素看起來和 在 3d 上的一樣

例如在界面添加一個圖片

<Image x:Name="Image" Source="Assets/Square150x150Logo.png" HorizontalAlignment="Center" VerticalAlignment="Center"></Image>

在后臺代碼讓圖片點擊的時候，先下和向右移動 100 像素

public MainPage(){this.InitializeComponent();Image.PointerPressed += Image_PointerPressed;}private void Image_PointerPressed(object sender, PointerRoutedEventArgs e){Matrix3D m = new Matrix3D();// This matrix simply translates the image 100 pixels// down and 100 pixels right.m.M11 = 1.0; m.M12 = 0.0; m.M13 = 0.0; m.M14 = 0.0;m.M21 = 0.0; m.M22 = 1.0; m.M23 = 0.0; m.M24 = 0.0;m.M31 = 0.0; m.M32 = 0.0; m.M33 = 1.0; m.M34 = 0.0;m.M44 = 1.0;m.OffsetX = 100;m.OffsetY = 100;m.OffsetZ = 0;var m3dProjection = new Matrix3DProjection {ProjectionMatrix = m};Image.Projection = m3dProjection;}

從上面可以看到，在后臺代碼寫的很多，如果在 xaml 寫的代碼就很少

<Image x:Name="Image" Source="Assets/Square150x150Logo.png" HorizontalAlignment="Center"VerticalAlignment="Center"><Image.Projection><Matrix3DProjectionProjectionMatrix="001, 000, 0, 0,000, 001, 0, 0,000, 000, 1, 0,100, 100, 0, 1" /></Image.Projection></Image>

這里的代碼和上面的后臺代碼點擊的時候是一樣的

現在來模仿做一個微軟的圖標，通過界面畫出 2d 的微軟圖標

<Grid HorizontalAlignment="Center" VerticalAlignment="Center"><StackPanel><StackPanel.Resources><Style TargetType="Border"><Setter Property="BorderBrush" Value="Transparent" /><Setter Property="BorderThickness" Value="5" /><Setter Property="Background" Value="#0173d0" /><Setter Property="Width" Value="100" /><Setter Property="Height" Value="100" /></Style></StackPanel.Resources><StackPanel Orientation="Horizontal"><Border /><Border /></StackPanel><StackPanel Orientation="Horizontal"><Border /><Border /></StackPanel></StackPanel></Grid>

想要做到下圖的效果，只需要修改一點代碼

在 Grid 添加 RotationY="20" 請看代碼

<Grid HorizontalAlignment="Center" VerticalAlignment="Center"><Grid.Projection><PlaneProjection RotationY="20" /></Grid.Projection><StackPanel><StackPanel.Resources><Style TargetType="Border"><Setter Property="BorderBrush" Value="Transparent" /><Setter Property="BorderThickness" Value="5" /><Setter Property="Background" Value="#0173d0" /><Setter Property="Width" Value="100" /><Setter Property="Height" Value="100" /></Style></StackPanel.Resources><StackPanel Orientation="Horizontal"><Border /><Border /></StackPanel><StackPanel Orientation="Horizontal"><Border /><Border /></StackPanel></StackPanel></Grid>

這個方法使用的是比較簡單的 PlaneProjection 方法，對于大部分開發已經滿足，只有在復雜的需要，如矩陣變換的時候才需要使用 Matrix3DProjection 的方法

參見 3-D perspective effects for XAML UI - UWP app developer

我搭建了自己的博客 https://lindexi.gitee.io/ 歡迎大家訪問，里面有很多新的博客。只有在我看到博客寫成熟之后才會放在csdn或博客園，但是一旦發布了就不再更新

如果在博客看到有任何不懂的，歡迎交流，我搭建了 dotnet 職業技術學院 歡迎大家加入

本作品采用知識共享署名-非商業性使用-相同方式共享 4.0 國際許可協議進行許可。歡迎轉載、使用、重新發布，但務必保留文章署名林德熙(包含鏈接:http://blog.csdn.net/lindexi_gd )，不得用于商業目的，基于本文修改后的作品務必以相同的許可發布。如有任何疑問，請與我聯系。

posted on 2018-12-25 01:08 NET未來之路 閱讀(...) 評論(...) 編輯 收藏

轉載于:https://www.cnblogs.com/lonelyxmas/p/10171866.html

總結

以上是生活随笔為你收集整理的win10 uwp 使用 Matrix3DProjection 进行 3d 投影的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。