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的后台任务,相比 ...
随机推荐
- 让Drewtech的J2534 ToolBox 软件支持任何J2534的设备
更改windows注册表中的FunctionLibrary和ConfigApplication,将DLL和exe路径替换原来的,其他不要动. 或者 create second key in regis ...
- 【GDOI2017 day2】凡喵识图 二进制切分
题面 100 有一个显然的做法是\(O(n^2)\): 想办法优化这个做法: 我们给一个64位整数,切分成四个16位整数. 那么如果两个64位整数符合汉明距离为3的话,那么两者切分的四个16位整数中: ...
- java 将word转为PDF (100%与word软件转换一样)
jdk环境:jdk_8.0.1310.11_64 (64位) 1.引入pom文件 <!-- word转pdf(依赖windows本地的wps) --> <dependency& ...
- AJAX(二)-实现验证码异步验证功能
案例实现效果 用户在前端输入验证码,按键收起触发异步验证,验证验证码的对错 前端代码 checkcode.jsp <%-- Created by IntelliJ IDEA. User: cxs ...
- span元素和div元素的浮动效果
首先看一段代码: <style> #right {margin: 10px;float:right;color:red;} #left {float:left;color:blue;} & ...
- php-imagick扩展
介绍 magick 是用 ImageMagic API 来创建和修改图像的PHP官方扩展.ImageMagick® 是用来创建,编辑,合并位图图像的一套组件. 它能够用于读取,转换,写入多种不同格式的 ...
- 【JZOJ4799】【NOIP2016提高A组模拟9.24】我的快乐时代
题目描述 输入 一行,两个整数l,r . 输出 一行,一个整数,表示第l 天到第r 天的愉悦值的和. 样例输入 64 89 样例输出 1818 数据范围 解法 可以参考数位动态规划的想法. 从个位开始 ...
- [转] javascript核心
原文:http://dmitrysoshnikov.com/ecmascript/javascript-the-core/ 对象 原型链 构造函数 执行上下文栈 执行上下文 变量对象 活动对象 作用域 ...
- Inno setup 卸载时删除程序文件夹(文件)
Inno setup 卸载时删除程序文件夹(文件) //删除所有配置文件以达到干净卸载的目的 procedure CurUninstallStepChanged(CurUninstallStep: T ...
- LeetCode21 Merge Two Sorted Lists
题意: Merge two sorted linked lists and return it as a new list. The new list should be made by splici ...