【Win 10 应用开发】三维变换

Cle****-he UID.1073626
2016-04-26 发表


所谓三维变换,其实是在二维平面上产生三维的视觉效果。前面简单提了一下透视效果,如果透视效果不能满需求,那可以考虑用三维变换。

UIElement类有一个属性叫Transform3D,它定义的类型为Transform3D,但,这个类是没有公共的构造函数的,困为它只作为基类。从这个类派生出两个类:

PerspectiveTransform3D——这个类的作用是设置观察点的位置,它不能单独使用,单独使用这个类,看不到变换效果。所谓观察点,就好比咱们照相时照相机的观察窗口,照相机放到什么位置,就会看到不同的场景。如果照相机放到咱们头顶上,那拍到的就是咱们的头发;如果照相机放到我们身后,就会拍到许多“背影杀手”。PerspectiveTransform3D类包含几个参数,OffsetX表示X轴上的偏移距离,OffsetY自然就是Y轴上的偏移距离,这些位移都是相对于可视化元素的中心而言的。还有一个Depth值,表示对象离观察点的距离,相当于Z距离。这些参数都是以像素为单位的,一定要注意,是绝对数值,不是相对值。

CompositeTransform3D——这个类可以设置对象的:1、变换中心位置(CenterX、CenterY、CenterZ),注意与透视的区别,透视的中心点用的是相对坐标([0,1]),而这里用的绝对坐标,以像素为单位。2、旋转(RotationX、RotationY、RotationZ),旋转以角为单位。3、位移(TranslateX、TranslateY、TranslateZ),表示对象在各个坐标轴上偏移的距离,以像素为单位。4、缩放(ScaleX、ScaleY、ScaleZ),表示对象在各个轴上的缩放倍数,由于是倍数,所以不应该为0,0倍你就看不到对象了,因此,缩放参数的默认值为1。



这两个三维变换的类型,必须搭配着使用。PerspectiveTransform3D类通常用在容器中,比如Page、Grid、Canvas等,用于设定观察点;而CompositeTransform3D用在容器中的各个子元素上,描述单个对象的变换情况。



其实三维变换用起来也不算复杂,至少比WPF的三维模型简单,不过比透视效果略复杂一点。

下面看一个例子。

[mw_shl_code=csharp,false]<Canvas>
<Rectangle Width="350" Height="100" Fill="Red" Canvas.Left="180" Canvas.Top="60">
<Rectangle.Transform3D>
<CompositeTransform3D RotationY="60" CenterX="100"/>
</Rectangle.Transform3D>
</Rectangle>
<TextBlock FontSize="20" Text="Document" Canvas.Left="450" Canvas.Top="125">
<TextBlock.Transform3D>
<CompositeTransform3D ScaleY="3" RotationZ="30"/>
</TextBlock.Transform3D>
</TextBlock>
<Canvas.Transform3D>
<PerspectiveTransform3D OffsetX="10" OffsetY="-200"/>
</Canvas.Transform3D>
</Canvas>[/mw_shl_code]

上面的例子中,容器元素是Canvas,Canvas本身应用了PerspectiveTransform3D变换,OffsetY为负值,表示观察点移到对象的下方。

在Canvas中放了两个对象,一个是矩形,一个是文本,它们分别用CompositeTransform3D来设置了变换参数。



得到的运行结果如下图所示。

***附件停止解析***


既然比WPF的三维模型简单,所以肯定不会像WPF那样具备材质、正背面、光照等效果。主要还是考虑到性能的优化,三维变换只是产生简单的三维视觉。



在运行阶段,可以使用 “实时可视化树” 和 “实时属性资源管理器” 这两个窗口来动态改变变换参数,然后我们就可以实时看到运行效果,不妨通过这个方法来研究三维变换。

***附件停止解析***


要使用实时可视化树在运行阶段修改属性值,请安装 VS 2015 任意版本的 Update 2。

源码下载:***链接停止解析***


来自:老周博客 开发者交流群:53078485,期待你的加入!

敬告:
为防止不可控的内容风险,本站已关闭新用户注册,新贴的发表及评论;
你现在看到的内容只是互联网用户曾经发表的言论快照,仅用于老用户留存纪念,且仅与科技行业相关,全部内容不代表本站观点及立场;
本站重新开放前已针对包括用户隐私、版权保护、信息安全、国家政策在内的各种互联网法律法规要求,执行了隐患内容的自查、屏蔽和删除;
本站目前所属个人主体,未有任何盈利安排与计划,且与原WFUN.COM所属公司不存在任何关联关系;
如果本帖内容或者相关资源侵犯到您的合法权益,或者您认为存在问题,那么请您务必点此举报或投诉!
全部回复:
a5555tnt UID.701275
2016-04-26 回复

看起来好叼。。。

tmp00000 UID.995403
2016-04-27 回复

我想用Transform3D画一个正方体,但是效果一团糟... 楼主有相关教程吗?

本站使用Golang构建,点击此处申请开源鄂ICP备18029942号-4联系站长投诉/举报