2018-11-19-win10-uwp-使用-Matrix3DProjection-进行-3d-投影
title | author | date | CreateTime | categories |
---|---|---|---|---|
win10 uwp 使用 Matrix3DProjection 进行 3d 投影
|
lindexi
|
2018-11-19 15:31:42 +0800
|
2018-11-05 09:33:37 +0800
|
Win10 UWP
|
在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 的方法
2018-11-19-win10-uwp-使用-Matrix3DProjection-进行-3d-投影的更多相关文章
- win10 uwp 使用 Matrix3DProjection 进行 3d 投影
原文:win10 uwp 使用 Matrix3DProjection 进行 3d 投影 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 ...
- 2018.11.19 Struts2中Action类的书写方式
方式1: 方式2: 方式3
- win10 uwp 使用 Microsoft.Graph 发送邮件
在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...
- 20172319 2018.10.19《Java程序设计教程》第7周课堂实践(补写博客)
20172319 2018.10.19 <Java程序设计教程>第7周课堂实践 课程:<程序设计与数据结构> 班级:1723 学生:唐才铭 学号:20172319 指导老师:王 ...
- win10 uwp 商业游戏 1.1.5
本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...
- Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App
安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...
- Win10 UWP开发系列:实现Master/Detail布局
在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...
- 【读书笔记】2016.11.19 北航 《GDG 谷歌开发者大会》整理
2016.11.19 周六,我们在 北航参加了<GDG 谷歌开发者大会>,在web专场,聆听了谷歌公司的与会专家的技术分享. 中午免费的午餐,下午精美的下午茶,还有精湛的技术,都是我们队谷 ...
- 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的后台任务,相比 ...
随机推荐
- java-文件切割合并_对象的序列化
一 文件的操作 1.1 概况 1,切割文件的原理:一个源对应多个目的:切割文件的两种方式. 2,碎片文件的命名和编号. 3,程序代码体现. 4,如何记录源文件的类型以及碎片的个数(建立配置信息文件)( ...
- System V启动脚本启动的服务
/etc/rc.d/init.d/目录下的内容如下:这些常用的服务器都是System v的服务,要控制System V 的服务,我们可以使用以下命令 #/etc/rc.d/init.d/script ...
- UE4物理模块(一)---概述与可视化调试
UE4.21前的版本采用的是NVIDIA的PhysX做为其默认的物理引擎,用于计算3D世界的碰撞查询与物理模拟.自4.21版本开始改物理调用接口,但这并不是闲来重构代码,果然在2019GDC大会上放出 ...
- 微信网页授权demo1
要授权首先要网页域名授权 然后就index.php代码如下 <?php require_once("./function.php"); $url = 'http://'.$_ ...
- jQuery的deferred对象使用详解【转载】
一.什么是deferred对象? 开发网站的过程中,我们经常遇到某些耗时很长的javascript操作.其中,既有异步的操作(比如ajax读取服务器数据),也有同步的操作(比如遍历一个大型数组),它们 ...
- 初次接触python的re模块
刷CF的时候,看到一个简单的题目,可以用来练练正则表达式 于是乎找到了re.sub的用法,说明如下 re.sub: (pattern, repl, string, count=0, │ f ...
- CSS:命名规范心得分享
一个好的命名习惯(当然这里指的并不仅仅是CSS命名).不仅可以提高开发效率,而且有益于后期修改和维护. 假设我们当前使用的命名方式都是约定成俗的,所有人都是这样写,那么你去到一个新团队,或者别人来接手 ...
- 记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法
原文:记CRenderTarget:DrawText()绘制中文乱码的BUG及解决办法 转载请注明出处:http://www.cnblogs.com/Ray1024 一.问题描述 在MFC中使用Dir ...
- jQuery Scroll Path 滚插视图酷炫
jQuery Scroll Path是一个jQuery的滚动路径插件,可以让你自定义滚动路径.该插件是使用canvas flavored的语法来绘制路径.可以通过鼠标滚轮上/下箭头键和空格键来查看路径 ...
- Leetcode2.Add Two Numbers两数相加
给定两个非空链表来表示两个非负整数.位数按照逆序方式存储,它们的每个节点只存储单个数字.将两数相加返回一个新的链表. 你可以假设除了数字 0 之外,这两个数字都不会以零开头. 示例: 输入:(2 -& ...