Windows Phone开发(19):三维透视效果

原创 2012年03月23日 22:31:27

三维效果也可以叫透视效果,所以,我干脆叫三维透视效果。理论知识少讲,直接用例开场吧,因为这个三维效果其实很简单,比上一节中的变换更省事,不信?一起来做一做练习吧。


练习一:把对象沿Y轴旋转45度。


默认情况下,旋转中心都是在中心位置上,如Y轴中心。而至于旋转的角度,哪个方向是正值,哪个方向是负值,嘿,你自己动手试一下就知道了,我相信你能理解的,不然,Hello Kitty嘲笑你的。


好的,由于是第一个练习,我们先来说说X、Y、Z三个坐标轴到底在哪,X轴不用说了,就横着放的那个了,Y轴呢,当然是竖着的,那Z轴呢?你猜?知道这三个轴是互相垂直的,你会猜的,在哪?在图上看不到?为什么呢?
是啊,Z轴正指向你呢,你怎么会看到呢?对着你那个就是了,所以,在三维透视里面,如果你希望把对象拉远一点,就把Z值设小一点了,如果希望对象跟你“亲密”一点,那就把Z的平移值设置大一点,知道不,Z轴平称也叫“亲密指数”,呵呵。

简直的透视效果用PlaneProjection类就可以轻松完成,如果要复杂的3D模型,就要求你具备灰常强大的空间思维能力了,建议使用其它的3D建模软件如3D Max等,Express Blend支持导入,复杂的三维模型还是推荐使用Express Blend来图形化操作,这样会直观一点,当然,如果你用PlaneProjection类,就没必要,因为它还算比较简单的。

好,现在我们就来做做把对象沿X轴旋转45度吧,也就是上面图片在的效果,当然,PlaneProjection类可以用于许多UI元素中,不一定是图片,为了直观和美观,我用图片,也顺便找两位MM来热闹一下。

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationY="45"/>
            </Image.Projection>
        </Image>


 

OK,就这么简单,可能在设计器里没有看到效果,没关系,你现在轻轻按下F5,马上你就会看到奇迹发生。

这里我提示一下,所有UI元素对PlaneProjection的使用方法都是一样的,下文的例子中你会看到,就是设置对象的Projection属性

 

练习二:沿X轴旋转-60度。


        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationX="-60"/>
            </Image.Projection>
        </Image>


和上面没什么区别,只是Y变成X罢了。

 

 

 

练习三:沿Z轴旋转180度。


        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationZ="180"/>
            </Image.Projection>
        </Image>

 


刚才说了,Z轴是指向你自己,可能这明显,现在你把它改为35度,相信效果就明显了。
        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection RotationZ="35"/>
            </Image.Projection>
        </Image>

 

 

 


练习四:综合旋转。


上面的例子都是单独旋转某的轴的,那么能不能X、Y、Z三轴同时干活呢?当然可以了,XYZ搭配,干活不累!

现在,我们把对象沿X轴旋转15度,沿Y轴旋转-65度,沿Z轴旋转40度,看看会如何?

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection
                    RotationX="15"
                    RotationY="-65"
                    RotationZ="40"/>
            </Image.Projection>
        </Image>

 

 

 

 

练习五:心变中心点位置。


默认中心点位于中对象的中线上,但我们可以通过CenterOfRotationX,CenterOfRotationY,CenterOfRotationZ三个属性来改变中心位置,值范围0到1,两个极端,不是在这一侧就是那一侧,如果是0和1之间的值就按比例计算了,如0.5就是默认的中间位置。

下面我们同时把X轴的中心改为0.2,Y轴中心改为0.7,Z轴中心改为1,看看有什么事情发生。

        <Image Source="1.jpg" Stretch="Uniform" HorizontalAlignment="Center" VerticalAlignment="Center"
                Width="320">
            <Image.Projection>
                <PlaneProjection
                    RotationX="15"
                    RotationY="-65"
                    RotationZ="40"
                    CenterOfRotationX="0.2"
                    CenterOfRotationY="0.7"
                    CenterOfRotationZ="1"/>
            </Image.Projection>
        </Image>

 

 

明显看到,位置不在中间了,认真观察一下,你会发现的。

 

 


练习六:本地偏移。


我说的本地平移只是为了相对于屏幕平移,其实这样翻译有点难听。涉及的属性同样有三个——LocalOffsetX, LocalOffsetY, LocalOffsetZ,相信不用我多说了,你自己玩几下就明白,关键是多动手,多对比。

        <Image Source="2.jpg" Stretch="Uniform"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Height="300">
            <Image.Projection>
                <PlaneProjection
                    LocalOffsetX="12"
                    LocalOffsetY="5"
                    LocalOffsetZ="24"
                    RotationX="10"
                    RotationY="-30"
                    RotationZ="-25"/>
            </Image.Projection>
        </Image>

 

 

 

 

 

练习七:全局偏移。


这个全局偏就是移动屏幕坐标,如果你愿意去总结的话,你会发现它和解析几何中的坐标系平移的规律一样。
即:左加右减,上加下减。
你可以不断地改变数值来测试,相信你一定能找到规律的,呵呵,放心,Hello Kitty会鼓励你的。

        <Image Source="2.jpg" Stretch="Uniform"
               HorizontalAlignment="Center"
               VerticalAlignment="Center"
               Height="300">
            <Image.Projection>
                <PlaneProjection
                    GlobalOffsetX="8"
                    GlobalOffsetY="55"
                    GlobalOffsetZ="800"
                    RotationX="10"
                    RotationY="-30"
                    RotationZ="-25"/>
            </Image.Projection>
        </Image>

 

 

研究这个透视效果,还是老方法——乱来,不断地用数值去测试,想一想,有时候乱来是很有价值的。

 

 

Windows Phone开发(19):三维透视效果 .

三维效果也可以叫透视效果,所以,我干脆叫三维透视效果。理论知识少讲,直接用例开场吧,因为这个三维效果其实很简单,比上一节中的变换更省事,不信?一起来做一做练习吧。 练习一:把对象沿Y轴旋转45度...
  • zinger198208
  • zinger198208
  • 2012年11月20日 15:33
  • 204

win 10 mobile VS2015 开发环境搭建【App开发】

下载VS2015 community英文版,并安装,选择安装windows 10 mobile emulator,模拟器启动后如下:...
  • code_style
  • code_style
  • 2015年10月21日 16:46
  • 3572

三维效果(透视转换)

三维效果(透视转换)您可以使用"透视转换"来将三维效果应用于任何 Silverlight UIElement。例如,您可以制造这样一个假象,即对象朝向您或远离您进行旋转,如下图中所示。使用透视转换的图...
  • ximenchuixuezijin
  • ximenchuixuezijin
  • 2010年05月11日 08:03
  • 1126

Windows Phone下的Socket编程

讨论下有关于Windows Phone下的Socket编程方面的知识。 Socket就是通常所称的套接字,用于描述IP地址和端口,是一个通信链的句柄。应用程序通常通过Socket向网络发出请求或者应...
  • two_bin
  • two_bin
  • 2013年03月16日 23:04
  • 1001

Windows 8.1 下 Windows Phone 开发环境的搭建流程

转载:Windows 8.1 下 Windows Phone 开发环境的搭建流程 Windows 8.1 下 Windows Phone 开发环境的搭建流程...
  • LH806732
  • LH806732
  • 2014年04月14日 19:24
  • 3801

iOS类似墙纸透视效果UIInterpolatingMotionEffect

在读MBProgressHUD时,发现有个叫做UIInterpolatingMotionEffect的效果,一直在用这个框架,还真没注意过有这种动画.当你手机在摇晃的时候,那个遮罩是会上下左右摆动的....
  • u011063706
  • u011063706
  • 2017年06月09日 21:54
  • 402

Windows Phone 8 开发快速入门(八)

 主要内容:推送通知 推送通知 推送通知为开发者提供了定期将信息传递给应用的功能,即使应用没有启动。图块可以为用户显示最关注的信息 推送通知数据流 Notifications ser...
  • u011597415
  • u011597415
  • 2014年06月21日 14:43
  • 566

unity3d摄像机的透视有些夸张怎么办?

大家使用unity3D摄像机的时候老觉得有广角镜头的那种感觉,如果是旋转视角的时候,感觉比较晕,感觉这个透视感有些夸张了。我发现一些unity3d制作的游戏都或多或少有这个问题,有个别游戏夸张的厉害。...
  • fzhlee
  • fzhlee
  • 2013年05月06日 17:54
  • 1830

使用C语言实现二维,三维绘图算法(1)-透视投影

[引言] 每次使用OpenGL或DirectX写三维程序的时候, 都有一种隔靴搔痒的感觉, 对于内部的三维算法的实现不甚了解. 其实想想, Win32中既然存在画线画点函数, 利用计算机图形学的知识,...
  • Chinamming
  • Chinamming
  • 2013年11月15日 12:59
  • 7784

WinHTK开发与使用三:连续语音识别

WinHTK开发与使用三:连续语音识别 本文接上文,介绍连续语音识别系统设计过程,演示视频见下载资源中。 二、连续语音识别系统设计         上面讨论了一个简单的十个孤立数字识别系统的设...
  • neustar1
  • neustar1
  • 2014年02月16日 11:31
  • 6230
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:Windows Phone开发(19):三维透视效果
举报原因:
原因补充:

(最多只允许输入30个字)