类:.NET开发~WPF
首先明确什么是富媒体?富媒体(Rich Media)包括多媒体(二维和三维动画、声音及影像)。富媒体本身不是信息,但是它可以加强信息。例如通常我们可以在门户网站中看到诸多广告,有动画的(如Falsh),有声音,有视频的等等,这些都是富媒体应用。目的就是更直观准确的传递商品等的有效信息,以提高广告主的收益等等。那么,在WPF中,我所关注的富媒体,是丰富用户体验,更好的传达软件本身信息,完善人机交流。还是那句话,加强用户体验感。这也是这些年软件设计开发者一直努力达成的目标。
峰回路转,进入正题。在这部分中,简单介绍2D、3D图形以及音频、视频,重点是动画实现。
1.2D图形
2D图形,就是二维平面图形。其中涉及3个重要的数据类型:Drawing、Visual和Shape。
Drawing:对与填充相关联的路径和形状的简单描述以及轮廓Brush。
Visual:把Drawing滑到屏幕的一种方式,但它也提供了完全摆脱Drawing对象的底层轻量级实现。
Shape:预制的Visual,它是在屏幕上画自定义工艺图最简单(也是最轻量级)的方法。
1)Drawing
包括5种Drawing类的具体子类:
GeometryDrawing:包括Geometry类,用来填充的Brush类,以及用来画轮廓的Pen类。
ImageDrawing:包括ImageSource类,以及用来定义边界的Rect类。
VideoDrawing:包括了MediaPlayer类,以及定义边界的Rect类。
VideoDrawing:包括了MediaPlayer类,以及定义边界的Rect类。
GlyphRunDrawing:包括GlyphRun类,低级别的文本类,以及来绘制前景色的Brush类。
DrawingGroup:一组Drawing对象的集合类,有一组属性可以用哦过来批量修改包含的所有Drawing对象的内容(例如不透明、变换等)。
示例:使用DrawingImage类将GeometryDrawing画到屏幕上。因为Drawing本身不是UIElement,本身没有绘画的能力,因此,需要添加到相应的宿主对象中,比如下例中的Image。
<Image>
<Image.Source>
<DrawingImage>
<DrawingImage.Drawing>
<GeometryDrawing Brush="Orange">
<GeometryDrawing.Pen>
<Pen Brush="Black" Thickness="5"/>
</GeometryDrawing.Pen>
<GeometryDrawing.Geometry>
<EllipseGeometry RadiusX="100" RadiusY="50"/>
</GeometryDrawing.Geometry>
</GeometryDrawing>
</DrawingImage.Drawing>
</DrawingImage>
</Image.Source>
</Image>
显示了包含GeometryDrawing的Image的绘制效果。
2)Visual
Visual是UIElement类的抽象基类(UIElement类是FrameworkElement的基类),包含了画任何东西到屏幕上的下层基本构造。
a.用内容填充DrawingVisual
b.在屏幕上显示Visual
c.可视命中测试
首先看一个命中测试的demo:
术语中“命中测试”,指的是判断一个点(或是一组点)是否与一个给定的对象相交。在鼠标相关的事件上下文经常会做这样的事,这时候上例种的点就是鼠标指针的位置,给定的对象就是圆形。
关于上例的相关代码可以在文章结束的下载demo中的VisualTest中查看。
3)Shape
就像GeometryDrawing一样是基本的二位图画,结合了Geometry、Pen和Brush。与GeometryDrawing不同的是,Shape派生自FrameworkElement,所以可以直接放在一个用户界面里,也就是说它不需要宿主。
WPF派生自System.Windows.Shape.Shape抽象类中的6个类:
§ Rectangle
§ Ellipse
§ Line
§ Polyline
§ Polygon
§ Path
下图中是使用Rectangle类实现的两个矩形。
2.3D图形
三维立体图形。由于3D图形已经成为WPF平台的组成部分了,所以2D图像和其他许多概念在这里是被重用和共享的。3D包含在Viewport3D中的场景可以与程序其他UIElement实现无缝融合,同时它也可以被放入模板或ItemsControl中。
通常画3D图形可以使用设计工具Blend或是ZAM3D,然后导出XAML代码粘贴在相应位置就可以。对于接触过3D图形的人来说,Camera、Material和Lights不陌生。没错,它们就是构成3D图形的必要元素。相机用来模拟观察者效果;材质不同,图形表面显出的效果不同;模拟光源显出图形的高光暗调。
示例:
同样demo涉及的代码可以在demo文件夹下查看。
*本文涉及的demo,可以单击这里下载。