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的后台任务,相比 ...
随机推荐
- day38 01-Spring框架的概
Action里面调Service,Service里面调DAO,在Action里面new一个Service,在Service里面new一个DAO.有了Spring之后可以不用new对象了.AOP里面有很 ...
- MYSQL监控工具--mytop
https://mp.weixin.qq.com/s/1X_uZaajImRRmpAsdLsNGw mysql可以说如今最为流行的数据库了,虽然现在nosql的风头正盛.但我想很多公司重要的业务数据不 ...
- 数据库Mysql监控及优化
在做 性能测试的时候数据最重要,数据来源于哪里呢,当然是数据库了,数据库中,我们可以知道,数据从磁盘中要比从缓存中读取数据的时间要慢的多的多,还可以知道,同样的一个sql语句,执行的效率也不一样,这是 ...
- 【JZOJ4161】于神之怒 莫比乌斯反演
任务 答案mod 1e9+7. 解法 容易写出反演: Ans=∑T=1nTk∗∑i=1⌊nT⌋⌊niT⌋⌊miT⌋μ(i) ∑⌊nT⌋i=1⌊niT⌋⌊miT⌋μ(i)这个因式显然是经典的分块处理: ...
- 解决IE6、IE7、Firefox兼容最简单的CSS Hack
写三句代码来控制一个属性,区别Firefox,IE7,IE6: background:orange; *background:green !important; *background:blue; ...
- homeworkvue
两个半圆,点一下转90°,两个颜色 <!DOCTYPE html> <html lang="en"> <head> <meta chars ...
- python3.7的celery报错TypeError: wrap_socket() got an unexpected keyword argument '_context'
原启动方法为: 起执行任务的服务 elery worker -A celery_task -l info -P eventlet 起提交任务的服务 celery beat -A celery_task ...
- javascript里的eval总结
JavaScript eval() 函数 1.定义和用法 eval() 函数计算 JavaScript 字符串,并把它作为脚本代码来执行. 如果参数是一个表达式,eval() 函数将执行表达式.如果参 ...
- Android开源实战:使用MVP+Retrofit开发一款文字阅读APP
文字控 使用MVP+Retrofit开发的一款文艺APP,它是一个非常优美的文字阅读应用,界面基本上符合material design设计规范. 在该项目中,我采用的是MVP架构,该架构目前在Andr ...
- 【md5加密】不可逆之简单例子原理
import hashlib def md5_get(data): ret = hashlib.md5("gfdwuqmo@md1.".encode("utf-8&quo ...