WPF/E初步印象（二）

最新推荐文章于 2023-06-05 23:06:04 发布

firefight

最新推荐文章于 2023-06-05 23:06:04 发布

阅读量3k

点赞数

文章标签： javascript 浏览器 matrix 测试开发工具 adobe

本文链接：https://blog.csdn.net/firefight/article/details/1487348

版权

4. 图形高级特性

*高级特性*	*SVG*	*WPF/E*	备注
分组	支持 g	？	SVG的g集合了组中包含图形的共同属性，在WPF/E中没有找到对应项
重用	支持symbol, use和xlink:href	？	WPF/E中没有找到对应项
*可用显示范围*	支持 viewBox	？	WPF/E中没有找到对应项
笔画	支持 stroke	支持Stroke
填充	支持颜色，渐变，光栅图像和图案填充	支持颜色，渐变和光栅图像填充	WPF/E中没有找到图案填充功能
透明	支持透明处理 fill-opacity	支持透明处理 Opacity
剪切	支持 clip	支持 Clip
渐变	支持线性和圆形渐变	支持线性和圆形渐变
*通道渲染*	支持 filter等	？	WPF/E中没有找到对应项
*位置和大小控制*	支持 x, y，width, height	支持 Cavans.Left Canvas.Top, Width, Height
*坐标变换*	支持平移，缩放，旋转，歪斜和基于坐标矩阵的变换	支持平移，缩放，旋转，歪斜和基于坐标矩阵的变换	都支持基于Matrix的变换，但矩阵的格式不同
*文本区域限制*	不支持	支持 wrap	SVG1.2中支持
*文本路径排列*	支持 textPath	不支持
动画	支持 animate 和animateMotion	支持种类可以分为DoubleAnimation，ColorAnimation 和PointAnimation，分别对应double，色彩和像素的变化类型	SVG无法对动画进行单独的控制，只能开始或停止整个页面的动画，而WPF/E可以控制单独的动画，动画控制比较丰富。
音频	无	支持 MediaElement	WPF/E目前支持WMA格式，IE中的SVG可以使用Adobe声音扩展
视频	无	支持 MediaElement	WPF/E目前支持WMV格式，SVG可以使用flash或realplayer扩展
*CSS* 支持	支持	？	WPF/E中未知

说明：

WPF/E坐标本身为行向量,而不是SVG的列向量，因此坐标矩阵为SVG的转置矩阵。

*SVG* *坐标矩阵*			*WPF/E* *坐标矩阵*
a	c	e	M11	M12	0
b	d	f	M21	M22	0
0	0	1	OffsetX	OffsetY	1

其中M11 = a; M12=b; M21=c; M22=d; OffsetX =e; OffsetY=f

因此WPF/E的坐标平移公式可以表示为：

1 0 0

[x y 1] * 0 1 0 = [x+dx y+dy 1]

dx dy 1

基于坐标矩阵的变换语法为：

例如：

<Path.RenderTransform>

</Path.RenderTransform>

</Path>

5. 对交互性的支持

浏览器中的SVG支持Javascript脚本，目前的WPF/E只支持Javascript，但后期可能支持其它语言，例如Csharp。二者都支持事件处理以便与用户交互。由于不同SVG实现对事件的支持不同，这里只列出基本实现了的SVG1.1标准事件。

事件	*SVG*	*WPF/E*	备注
*页面装载*	onload	Loaded
*页面卸载*	onunload
*鼠标进入*	onmouseover	MouseEnter
*鼠标离开*	onmouseout	MouseLeave
*鼠标移动*	onmousemove	MouseMove
*鼠标按下*	onmousedown	MouseLeftButtonDown	对WPF/E为左键
*鼠标释放*	onmouseup	MouseLeftButtonUp	对WPF/E为左键
*鼠标单击*	onclick

另外 SVG 和 WPF/E 还支持一些动画事件，就不在这里列出了。在WPF/E中，键盘事件和鼠标滚轮事件可以通过 Javascript 事件完成，但令人不理解的是， WPF/E CTP 中不支持鼠标右键功能，而且无法使用 Javascript 中的鼠标右键事件（控件屏蔽了右键事件）。因此目前在 WPF/E 中无法实现右键菜单等功能。

6. 其它

兼容性

SVG的跨浏览器能力取决于各浏览器或浏览器插件对SVG标准的遵循情况，但目前各种实现之间差异比较大，因此开发跨平台的SVG应用比较复杂。而WPF/E的功能在不同平台上几乎完全相同（微软宣称），在测试中确实也没有发现重大的差别（有一点在下面“问题”中提出）。

性能

在简单矢量图形添加的测试中显示，与WPF/E的性能相比，SVG性能更加出色。通过一个画矩形的试验，可以了解到这一点。该试验不能作为严格的性能测试（代码在后面列出），但可以看到二者在处理速度上的差异：

*测试环境*	*测试内容*	*SVG*	*WPF/E*
*IE6.0+ASV*	动态添加900个矩形	300ms	2秒
	动态添加2500个矩形	1312ms(第一次显示有2到3秒延时)	6秒
	动态添加10000个矩形	3835ms(第一次显示有5到10秒延时)	31秒
*FireFox1.5*	动态添加900个矩形	800ms	2秒
	动态添加2500个矩形	3124ms	7秒
	动态添加10000个矩形	20秒（中间FF弹出是否停止脚本的对话框，在继续后一共消耗20秒，实际运行时间应小于该时间）	36秒（中间FF弹出是否停止脚本的对话框，在继续后一共消耗36秒，实际运行时间应小于该时间）

但是，说到性能，想到第一次看到WPF/E samples中的FilmStripe例子时，觉得很容易使用SVG实现相同的例子，但在后来的实践中发现SVG实现达不到WPF/E中的显示效果。在图像大小为300×300时，SVG实现可以做到基本上平滑的移动，但当图像达到800×600或更大时，SVG实现中就有明显的顿错感了。

所以对不同的处理内容，SVG实现和WPF/E可能是各有所长，因此对于性能还需要更严格的综合测试。

控件

SVG和WPF/E都没有提供现成的控件，但由于SVG的时间比较长，因此可以在网上找到很多的基于SVG的WEB控件，例如www.carto.net 中的SVG控件。WPF/E中quickStart教程中提供了几个控件的示例，包括按钮等，相信过一段时间，会有大量的基于WPF/E的控件出现。

开发工具

SVG现在有几个开发工具，但感觉是比较分散的，没有形成一个从设计，编码，调试到部署的集成开发环境，而微软的WPF/E使用Expression和Visual Studio 2005，为快速开发提供了便利。

问题

WPF/E的总体表现令人满意，以下是遇到的几个未能解决的问题。

1， Image的Clip问题

在图像被Clip后，被剪切掉的不可见部分还可以接收鼠标等操作。（对Ellipse等图形进行剪切就没有这个问题）

2，中文的显示问题

在TextBlock中好像无法显示中文，将所有文档改为UTF8编码，以及指定中文字体后也只显示一个矩形框。

在MSDN上的回答如下：

The Current CTP doesn't support many international text, such as Arabic, Hebrew or far eastern text.

However, you can express your text as an image and use an image within your XAML to render it. It's not optimal, but it's a fair enough workaround. I have successfully done this with Chinese text.

--------------------------------------------------------------------------------

Laurence Moroney: WPF/E Evanglist: http://blogs.msdn.com/webnext

但是使用图像代替文字显示实在是一个不可接受的方法，希望在WPF/E正式版中能够增加对中文字体支持，否则中文网站几乎不可能考虑WPF/E技术。

3，动画显示在IE和FF中的不同表现。

包含动画的WPF/E控件所在的DIV被其它部分遮盖，然后再切换回该部分后，在两种浏览器中表现不同。在FF中切换回后，动画状态是重新开始，而在IE中则从切换前的状态继续动画。

7. 总结

通过了解，不得不承认WPF/E还是有自己的特点，例如比较好的兼容性，更完善的动画和多媒体功能，以及比较完备的开发环境都是WPF/E的长处，而且背后有微软的支持，使得WPF/E的前景比较光明。但是，由于SVG与WPF/E的相似性，所以对SVG的学习并不会浪费，原因有二：

1. SVG的问题不是SVG标准本身存在问题，而是没有一个厂商真正全力支持SVG的应用的问题，ADOBE已经转向FLASH。然而，目前还没有人能够断言SVG一定会在与FLASH和WPF/E的竞争中失败。作为W3C标准，SVG还会被FF和其它浏览器支持，而且将来IE还存在内置支持SVG的可能。

2. 通过对SVG的了解，能够大大降低学习和应用WPF/E的难度，毕竟二者存在太多的相似之处。