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 的方法

参见 3-D perspective effects for XAML UI - UWP app developer

2018-11-19-win10-uwp-使用-Matrix3DProjection-进行-3d-投影的更多相关文章

  1. win10 uwp 使用 Matrix3DProjection 进行 3d 投影

    原文:win10 uwp 使用 Matrix3DProjection 进行 3d 投影 版权声明:博客已迁移到 http://lindexi.gitee.io 欢迎访问.如果当前博客图片看不到,请到 ...

  2. 2018.11.19 Struts2中Action类的书写方式

    方式1: 方式2: 方式3

  3. win10 uwp 使用 Microsoft.Graph 发送邮件

    在 2018 年 10 月 13 号参加了 张队长 的 Office 365 训练营 学习如何开发 Office 365 插件和 OAuth 2.0 开发,于是我就使用 UWP 尝试使用 Micros ...

  4. 20172319 2018.10.19《Java程序设计教程》第7周课堂实践(补写博客)

    20172319 2018.10.19 <Java程序设计教程>第7周课堂实践 课程:<程序设计与数据结构> 班级:1723 学生:唐才铭 学号:20172319 指导老师:王 ...

  5. win10 uwp 商业游戏 1.1.5

    本文是在win10 uwp 商业游戏 基础上继续开发,添加一些无聊的游戏 因为在发布几个月,下载量很少,小伙伴说游戏就玩不到几分钟就不想玩,于是我就想加入其他游戏 下面我来告诉大家如何在游戏中添加多个 ...

  6. Win10 UWP开发系列:使用VS2015 Update2+ionic开发第一个Cordova App

    安装VS2015 Update2的过程是非常曲折的.还好经过不懈的努力,终于折腾成功了. 如果开发Cordova项目的话,推荐大家用一下ionic这个框架,效果还不错.对于Cordova.PhoneG ...

  7. Win10 UWP开发系列:实现Master/Detail布局

    在开发XX新闻的过程中,UI部分使用了Master/Detail(大纲/细节)布局样式.Win10系统中的邮件App就是这种样式,左侧一个列表,右侧是详情页面.关于这种 样式的说明可参看MSDN文档: ...

  8. 【读书笔记】2016.11.19 北航 《GDG 谷歌开发者大会》整理

    2016.11.19 周六,我们在 北航参加了<GDG 谷歌开发者大会>,在web专场,聆听了谷歌公司的与会专家的技术分享. 中午免费的午餐,下午精美的下午茶,还有精湛的技术,都是我们队谷 ...

  9. Win10 UWP开发实现Bing翻译

    微软在WP上的发展从原来的Win7到Win8,Win8.1,到现在的Win10 UWP,什么是UWP,UWP即Windows 10 中的Universal Windows Platform简称.即Wi ...

  10. Win10/UWP开发—使用Cortana语音与App后台Service交互

    上篇文章中我们介绍了使用Cortana调用前台App,不熟悉的移步到:Win10/UWP开发—使用Cortana语音指令与App的前台交互,这篇我们讲讲如何使用Cortana调用App的后台任务,相比 ...

随机推荐

  1. 洛谷P2258 子矩阵[2017年5月计划 清北学堂51精英班Day1]

    题目描述 给出如下定义: 子矩阵:从一个矩阵当中选取某些行和某些列交叉位置所组成的新矩阵(保持行与列的相对顺序)被称为原矩阵的一个子矩阵. 例如,下面左图中选取第2.4行和第2.4.5列交叉位置的元素 ...

  2. H5C3--语义标签以及语义标签IE8兼容,表单元素新属性,度量器,自定义属性,dataList,网络监听,文件读取

    HTML5新增标签以及HTML5新增的api     1.H5并不是新的语言,而是html语言的第五次重大修改--版本     2.支持:所有的主流浏览器都支持h5.(chrome,firefox,s ...

  3. opencv 图像基本操作

    目录:读取图像,获取属性信息,图像ROI,图像通道的拆分和合并 1.  读取图像 像素值返回:直接使用坐标即可获得, 修改像素值:直接通过坐标进行赋值 能用矩阵操作,便用,使用numpy中的array ...

  4. opencv2.4.9配置+VS2013

    参见:浅墨的(红的的为变动部分) http://blog.csdn.net/poem_qianmo/article/details/19809337 本系列文章由@浅墨_毛星云 出品,转载请注明出处. ...

  5. 分析ajax请求过程以及请求方法

    ajax 的全称是Asynchronous JavaScript and XML,其中,Asynchronous 是异步的意思,它有别于传统web开发中采用的同步的方式.据小编翻墙了解到,ajax很早 ...

  6. vue自定义全局公共函数

    单独零散的函数 在main.js里进行全局注册 Vue.prototype.ajax = function (){} 在所有组件里可调用 this.ajax() 多个函数定义在一个对象里 // xx. ...

  7. JavaScript--阻止事件冒泡stopPropagation和cancelBubble

    <!DOCTYPE html> <html lang="en" xmlns="http://www.w3.org/1999/html"> ...

  8. Directx11教程(63) tessellation学习(5)

    原文:Directx11教程(63) tessellation学习(5)        TS中生成细分后顶点的u,v,{w}坐标,我们根据控制点和u,w,{w}坐标生成新的顶点位置,在前面四边形的细分 ...

  9. 洛谷 P2146 [NOI2015]软件包管理器 树链剖分

    目录 题面 题目链接 题目描述 输入输出格式 输入格式: 输出格式: 输入输出样例 输入样例#1: 输出样例#1: 输入样例#2: 输出样例#2: 说明 说明 思路 AC代码 总结 题面 题目链接 P ...

  10. (四)IO流之InputStream和OutputStream

    InputStream:定义了字节输入流的抽象类 OutputStream:定义了字节输出流的抽象类;该类所有方法返回void值 FileInputStream:继承InputStream FileO ...