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>
<Matrix3DProjection
ProjectionMatrix="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 ),不得用于商业目的,基于本文修改后的作品务必以相同的许可发布。如有任何疑问,请与我联系。
win10 uwp 使用 Matrix3DProjection 进行 3d 投影的更多相关文章
- 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影)
[源码下载] 背水一战 Windows 10 (70) - 控件(控件基类): UIElement - Transform3D(3D变换), Projection(3D投影) 作者:webabcd 介 ...
- win10 uwp 渲染原理 DirectComposition 渲染
本文来告诉大家一个新的技术DirectComposition,在 win7 之后(实际上是 vista),微软正在考虑一个新的渲染机制 在 Windows Vista 就引入了一个服务,桌面窗口管理器 ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- Win10 UWP开发系列:实现Master/Detail布局
在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...
- Win10 UWP开发实现Bing翻译
微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...
- Win10/UWP开发—使用Cortana语音与App后台Service交互
上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...
- 【Win10 UWP】后台任务与动态磁贴
动态磁贴(Live Tile)是WP系统的大亮点之一,一直以来受到广大用户的喜爱.这一讲主要研究如何在UWP应用里通过后台任务添加和使用动态磁贴功能. 从WP7到Win8,再到Win10 UWP,磁贴 ...
- 【Win10 UWP】URI Scheme(一):Windows Store协议的解析和使用
协议是Windows Phone和Windows Store应用的一个重要特点,可以做到在不同应用之间进行互相呼起调用.小小协议,学问大着呢.我打算写几篇关于协议在UWP中使用的文章. 这一讲的主要对 ...
- 【Win10 UWP】QQ SDK(二):SDK的回调处理
上一讲,我们介绍了QQ SDK的使用方法,请看<[Win10 UWP]QQ SDK(一):SDK基本使用方法> 一. 回调的基本形式 从前面的介绍中我们知道,我们的应用和QQ客户端之间需要 ...
随机推荐
- C语言18个经典问题答录
原文地址:转载:C语言18个经典问题答录作者:lloo 1.这样的初始化有什么问题?char *p = malloc(10); 编译器提示"非法初始式" 云云. 答:这个声明是静态 ...
- 前端js常用正则表达式实例讲解
本文内容整理自他人优秀的博客,非纯原创.仅借此学习和整理. 1.匹配用户名 规则描述: 长度4-6位: {4,16} 字母: [a-z] [A-Z] 数字: [0-9] 下划线: [_] 减号: [- ...
- Win10系统如何设置所有程序默认以管理员身份运行?
原文:Win10系统如何设置所有程序默认以管理员身份运行? 在win10系统中有些用户发现一些程序只有使用管理员身份运行能才打开,这样的话就感觉会麻烦很多,那么有没有办法设置所有程序都默认以管理员身份 ...
- storm-kafka编程指南
目录 storm-kafka编程指南 一.原理及关键步骤介绍 (一)使用storm-kafka的关键步骤 1.创建ZkHosts 2.创建KafkaConfig 3.设置MultiScheme 4.创 ...
- 在scala中调用java代码
详细代码请见https://github.com/lujinhong/scalademo 在scala中调用java代替非常非常简单,直接调用即可 (一)一个简单示例 1.创建一个java类 pa ...
- Deep Learning for Nature Language Processing --- 第四讲(下)
A note on matrix implementations 将J对softmax的权重W和每一个word vector进行求导: 尽量使用矩阵运算(向量化).不要使用for loop. 模型训练 ...
- 记录一下phper的学习方向
我是一个懒惰的人,吃了多年技术老本儿,对新技术缺乏学习动力,仗着逻辑思维的优势处理问题 http://www.topthink.com/topic/26730.html
- c# 读/写文件(各种格式)
最简单的: --------写 //content是要写入文本的字符串 //(@txtPath + @"\" + rid + ".txt");要被写入的TXT ...
- iOS --- UIColor中使用16进制选取颜色
iOS中的UIColor能够使用16进制来选取颜色. 预先定义例如以下: #define UIColorFromHex(s) [UIColor colorWithRed:(((s & 0xFF ...
- Android菜鸟的成长笔记(26)——普通广播与有序广播
BroadcastReceiver是Android系统的四大组件之一,BroadcastReceiver是一个全局的系统级监听器,它拥有自己的独立进程. 我们来写一个最简单的广播接收过程 先在mani ...