WPF/E初步印象（一）
WPF/E初步印象
修订记录：
2007-01-18
创建
2007-1-25
增加对几何体类的描述，修改高级属性中的分组，填充的相关描述，增加高级属性中可用显示范围描述。增加鼠标右键事件的描述。增加对中文问题的回答。
2007-5-30 微软以及将WPF/E正式命名为SilverLight, 而且发布了1.0 beta 和1.1 alpha 两个版本, 文章中的下载地址和某些描述已经不太适用, 我将在近期在新的文章中对SilverLight进行评述.
1. 背景
最早是在YAHOO SVG开发者论坛中得知WPF/E CTP版发布的情况，记得当时有些SVG开发人员对此的反应相当激烈，语言中充满对微软的失望和不满，毕竟大家在SVG上花费了不少精力和时间。SVG标准到1.1版就比较完善了，而始终不能在WEB上大规模应用的最主要原因是IE不内置支持SVG功能。SVG开发人员一直盼望着微软能在IE7中增加内置SVG，然而2006年底IE7发布，依然没有让大家如愿。2006年12月又得知微软在WPF/E采用的是XAML语言，而不是SVG，因此大家不免有些情绪。
情绪归情绪，微软自然有自己的道理，无论是在商业上或技术上的。对于开发人员，尤其是WEB RIA感兴趣的应用开发人员，还是有必要去了解一下这种可能改变未来WEB开发的技术。
要体验WPF/E，首先要下载WPF/E CTP的插件，这是必不可少的（分MAC版和Windows版）。Samples包中包括几个DEMO，用于演示WPF/E的功能和效果。SDK中的QuickStart教程对快速了解和开发WPF/E很有帮助，而Documentation中则包含比较详细的开发资料。WPF/E CTP相关下载地址如下：
- "WPF/E" CTP Runtime for Windows插件
- "WPF/E" Samples
- "WPF/E" CTP SDK
2. 目的
由于WPF/E与SVG的相似性，因此不免在SVG（SVG1.1标准）的基础上，对WPF/E进行考察和测试。主要包括几个方面：
1， 基本矢量图形，例如直线，圆（椭圆），矩形，多边形，路径等矢量图形，以及文本，画布和光栅图像等必备的功能。
2， 矢量图形的高级特性，包括图形分组和重用，笔画和填充处理，透明，剪切，渐变，通道渲染，图形的位置和大小控制和坐标变换，文本区域限制和文本的路径排列，动画显示和控制，音频和视频播放和控制，对CSS支持等。
3， 对交互性的支持，例如脚本语言支持，事件支持等。
4， 兼容性问题，是否真的象微软宣称的那样，可以无差别的在所有主流浏览器中运行？由于各种浏览器的差异很大，对此要画上一个问号。
5， 性能，速度问题。在图形比较多，也比较复杂的情况下，对内存、CPU的占用情况，是否存在内存泄漏，处理速度如何，对用户的操作响应速度等，也是商业开发必须考虑的问题。
6， 开发工具，是否提供完备的开发IDE，包括编辑器，调试器。相信这是WPF/E的优势之一，SVG的发展严重受到了工具的制约，开发效率比较低。
7， 是否提供了客户端控件（文本框，列表框，树等）。作为RIA，能够提供丰富的现成的控件是一个诱人的特点。
3. 基本图形
不出所料，WPF/E提供了所需的所有基本矢量图形，与SVG比较如下：
|
基本图形类型
|
SVG
|
WPF/E
|
备注
|
|
画布
|
svg
|
Canvas
|
|
|
直线
|
line
|
Line
|
|
|
折线
|
polyline
|
Polyline
|
|
|
矩形
|
rect
|
Rectangle
|
|
|
多边形
|
polygon
|
Polygon
|
|
|
圆（椭圆）
|
ellipse
|
Ellipse
|
|
|
圆弧
|
circle
|
|
WPF/E通过Path实现
|
|
路径
|
path
|
Path
|
|
|
文本
|
text
|
TextBlock
|
文本和光栅图像本质上不属于基本图形，但经常使用，而且使用方法与图形相似，因此也列在此处
|
|
光栅图像
|
image
|
Image
|
说明：
1，WPF/E图形分类
与SVG不同，WPF/E将矢量图形类分为两种，Shape（图形）和Geometry（几何体），其中图形类为UIElement对象，可以在画布上显示；而几何体用于图形类中路径的描述和基本图形的剪切（clip），并不能用于直接显示。二者的区别在WPF/E文档中 Geometries Overview一节有详细的描述。
上表中列出的是图形类，而几何体类可以分为简单几何体（simple geometries），路径几何体（path geometries）和组合几何体（composite geometries）。其中简单几何体分为：
|
种类
|
名称
|
参数
|
|
直线
|
LineGeometry
|
StartPoint，EndPoint
|
|
矩形
|
RectangleGeometry
|
Rect
|
|
椭圆
|
EllipseGeometry
|
Center，RadiusX，RadiusY
|
路径几何体下包含一组PathFigure对象，每个PathFigure又可以包括一组PathSegment对象，PathSegment的种类有：
|
种类
|
名称
|
参数
|
|
椭圆曲线
|
ArcSegment
|
size, rotationAngle, isLargeArcFlag, sweepDirectionFlag, endPoint
|
|
三次贝塞尔曲线
|
BezierSegment
|
Point1，Point2，Point3
|
|
直线
|
LineSegment
|
Point
|
|
一组三次贝塞尔曲线
|
PolyBezierSegment
|
Points
|
|
折线
|
PolyLineSegment
|
Points
|
|
一组二次贝塞尔曲线
|
PolyQuadraticBezierSegment
|
Points
|
|
二次贝塞尔曲线
|
QuadraticBezierSegment
|
Point1，Point2
|
实际上这些对象可以使用下面描述的Path语法来描述，个人感觉还是使用路径语法字符串比较简单方便。
组合几何体使用GeometryGroup包含上述几何体对象，创建更加复杂的路径和剪切范围。
2，PATH的用法
SVG和WPF/E的路径数据语法基本相同，大写字符表示绝对坐标，小写表示相对坐标。
|
路径种类
|
SVG
|
WPF/E
|
参数
|
|
移动
|
M m
|
M m
|
startPoint
|
|
直线
|
L l
|
L l
|
endPoint
|
|
垂直线
|
V v
|
V v
|
y
|
|
水平线
|
H h
|
H h
|
x
|
|
椭圆曲线
|
A a
|
A a
|
SVG:
radiusX, radiusY rotation large arc flag, sweep flag endX, endY
WPF/E:
size, rotationAngle, isLargeArcFlag, sweepDirectionFlag, endPoint
|
|
二次贝塞尔曲线
|
Q q
|
Q q
|
controlPoint, endPoint
|
|
三次贝塞尔曲线
|
C c
|
C c
|
controlPoint1, controlPoint2, endPoint
|
|
平滑二次贝塞尔曲线
|
T t
|
T t
|
endPoint（在WPF/E文档中为controlPoint endPoint，认为有误）
|
|
平滑三次贝塞尔曲线
|
S s
|
S s
|
controlPoint2, endPoint
|
|
闭合
|
Z z
|
Z z
|
无
|