好玩的WPF第四弹:用Viewport2DVisual3D实现3D旋转效果
2015-06-20 00:17
691 查看
效果呢就是这么个效果,但是大家要发挥想象力,比如做成一个可以旋转的按钮等等。
定义一个这样的资源就好。
<Window.Resources> <DiffuseMaterial x:Key="DiffuseMaterialStyle" Viewport2DVisual3D.IsVisualHostMaterial="True" Brush="White"/> </Window.Resources>
关键是在Grid里放这么一个东西:
<Viewport3D x:Name="view" ClipToBounds="True" RenderOptions.EdgeMode="Aliased"> <Viewport3D.Camera> <PerspectiveCamera x:Name="perspectiveCam" FieldOfView="59" Position="0.5,0.5,2" LookDirection="0,0,-1"> <PerspectiveCamera.Transform> <RotateTransform3D x:Name="rot" CenterY="0.5" CenterX="0.5" CenterZ="-0.5"> <RotateTransform3D.Rotation> <AxisAngleRotation3D x:Name="AxisAngleRot" Axis="0,1,0" Angle="0"/> </RotateTransform3D.Rotation> </RotateTransform3D> </PerspectiveCamera.Transform> </PerspectiveCamera> </Viewport3D.Camera> <ModelVisual3D> <ModelVisual3D.Content> <AmbientLight Color="White" /> </ModelVisual3D.Content> </ModelVisual3D> </Viewport3D>
正面:
<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle }"> <Viewport2DVisual3D.Geometry> <MeshGeometry3D Positions="0,1,0 0,0,0 1,0,0 1,1,0" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/> </Viewport2DVisual3D.Geometry> <Border BorderThickness="10" x:Name="FrontSide" BorderBrush="Blue" CornerRadius="1" PreviewMouseDown="FrontSide_PreviewMouseDown" > <TextBlock Text="欢迎访问我的博客" Foreground="Green" /> </Border> </Viewport2DVisual3D>
右侧:
<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D.Geometry> <MeshGeometry3D Positions="1,1,0 1,0,0 1,0,-1 1,1,-1" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 3"/> </Viewport2DVisual3D.Geometry> <Border BorderThickness="1" x:Name="RightSide" BorderBrush="Lime" CornerRadius="4" PreviewMouseDown="RightSide_PreviewMouseDown" > <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" /> </LinearGradientBrush> </Border.Background> <TextBlock Text="感谢您的支持" FontSize="20"/> </Border> </Viewport2DVisual3D>
大家对比上面这两个就知道正面的镂空是怎么来的了……
左侧:
<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D.Geometry> <MeshGeometry3D Positions="0,1,-1 0,0,-1 0,0,0 0,1,0" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 3 0 2 3"/> </Viewport2DVisual3D.Geometry> <Border BorderThickness="40" x:Name="LeftSide" BorderBrush="White" CornerRadius="1" PreviewMouseDown="LeftSide_PreviewMouseDown" > <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="Black" /> </LinearGradientBrush> </Border.Background> <TextBlock Text="有问题直接评论就好" Foreground="Lime"/> </Border> </Viewport2DVisual3D>
后方:
<Viewport2DVisual3D Material="{StaticResource DiffuseMaterialStyle}"> <Viewport2DVisual3D.Geometry> <MeshGeometry3D Positions="1,1,-1 1,0,-1 0,0,-1 0,1,-1 0,0.5,-1" TextureCoordinates="0,0 0,1 1,1 1,0" TriangleIndices="0 1 2 0 2 4"/> </Viewport2DVisual3D.Geometry> <Border BorderThickness="1" x:Name="BackSide" BorderBrush="White" CornerRadius="4" PreviewMouseDown="BackSide_PreviewMouseDown" > <Border.Background> <LinearGradientBrush EndPoint="0.5,1" StartPoint="0.5,0"> <GradientStop Color="White" /> </LinearGradientBrush> </Border.Background> <TextBlock Text="常来哦……" FontSize="20"/> </Border> </Viewport2DVisual3D>
大家先不管MeshGeometry3D这些东西是做什么的,后面我尽量简单快速的讲解它们。
所以先来看看程序的内部。
public partial class MainWindow : Window { DispatcherTimer dispatTime = null; double AxAngle = 90; public MainWindow() { InitializeComponent(); if (dispatTime == null) dispatTime = new DispatcherTimer(); dispatTime.Tick += new EventHandler(DT_Tick); dispatTime.Interval = new TimeSpan(0, 0, 0, 0, 2); } private void DT_Tick(object sender, EventArgs e) { AxisAngleRot.Angle += 1; if (AxisAngleRot.Angle >= AxAngle) dispatTime.Stop(); } private void FrontSide_PreviewMouseDown(object sender, MouseButtonEventArgs e) { AxisAngleRot.Angle = 0; AxAngle = 90; dispatTime.Start(); } private void LeftSide_PreviewMouseDown(object sender, MouseButtonEventArgs e) { AxAngle = 360; dispatTime.Start(); } private void BackSide_PreviewMouseDown(object sender, MouseButtonEventArgs e) { AxAngle = 270; dispatTime.Start(); } private void RightSide_PreviewMouseDown(object sender, MouseButtonEventArgs e) { AxAngle = 180; dispatTime.Start(); } }
像这种程序肯定会涉及到计时器的,就是DT_Tick方法。我将它设置为每次都转动1度,而下面这一行则是间隔的时间。
dispatTime.Interval = new TimeSpan(0, 0, 0, 0, 2);
其余的每个方法都用于调节角度,可以看到在正面时会将角度重置一次。
所以接下来看看Positions是什么意思。
原谅我把正方体画歪了,图中另外用箭头指出了“正面”、“右侧”等。
大家看看Positions中都是3个数字一组对吧,这就是一个点,我在图中已经标识出来了。而TriangleIndices中也是3个数字一组,这3个数字指示了Positions中的组合索引(从0开始索引),然后3个数字组成三角形,如图中箭头所指向的。
而TextureCoordinates是WPF的3D纹理坐标,这里就不深究的,后面可以深入探讨写一篇博客。
大家也可以拿源码回去慢慢弄着玩嘛……
所以这篇博客就到此为止咯。掰掰……
相关文章推荐
- 【Swift】- UITextField完成输入后关闭软键盘的几种方法
- 難 得 好 天
- Function Smackdown: Function Statement vs. Function Expression
- C#数据触发器
- Android流式布局
- [Android]LayoutInflater的inflate方法半详解
- 老出现这个问题
- React.js终探(七)(完)
- Render blocking javascripts
- 黑马程序员——基础知识总结_泛型
- Android应用开发EditText文本内容变化监听方法
- 关于Ext checkboxfiled 获取值为 on的解决办法
- 黑马程序员-C基础-C语言概述
- 简单的函数重载和模板
- java基础--final关键字
- Lua相关的扩展库
- 创业者谨记:与这五个部门打交道要小心(要知错就改,或积极解释,或示弱,或求被监管,或变通,就是千万别对着干)
- 关系代数中的除法运算
- [LeetCode][JavaScript]Best Time to Buy and Sell Stock II
- 15Spring泛型依赖注入