深度解剖GFX原理

 

1引言

目前，主流的浏览器主要有IE、Firefox、Safari、Opera 、Chrome 等，他们对矢量绘图的支持不尽相同，如IE支持如VML、sliverlight ,而其他浏览器大多数支持SVG和canvas,IE的独断专行使很多程序员都很苦恼，无法按照一个统一的标准来实现矢量绘图，往往一个矢量绘图页面要实现不同的两套方案和不同的两段代码.GFX为开发者屏蔽了浏览器之间的区别，良好的解决了在浏览器中进行动态图形操作的兼容性问题（在 IE 中使用 VML 进行渲染，其他浏览器中使用 SVG）。同时 GFX 借助 Dojo 中良好的特性，能够帮助用户快捷的创建数据可视化，事件绑定，图形界面操作等功能。

 

2、GFX包分析

 

     2.1、GFX目录结构

GFX在dojo库的dojox包下中的gfx目录，目录结构如下图所示：

与GFX相关的文件大致分为两部分，dojox根目录下的gfx.js和gfx目录，包中大致分为图形类、渲染类、工具类。

 

 

 

 

2.2、GFX类分析

 

  （1）图形类

图形类大致为以下三个文件shape、path、vectorText，shape.js是一个图形抽象基类，其中包括surface ,group,rect, line, ellipse, circle, polyline, image这一系列子类以及一些基本方法的接口，如setFill和setStock等方法（具体阅读源代码），这些方法将在相应的render中具体实现。由于path和vectorText比较特殊所以独立放在各自的类中。

  

  （2）渲染类

目前GFX中渲染类主要有svg、vml、canvas、sliverlight几个主流的矢量绘图技术，我们通常称他们为render，判断使用哪个render的工作主要在dojox根目录下的gfx.js中进行，他会判断当前用户的浏览器类型以及版本然后指定相应的render来进行渲染，一般默认以SVG和VML为主，用户也可以指定使用相应的render，在这些类中都基本上对所有图形类进行了继承，对他们的方法都进行了重写来适应不同浏览器的要求来达到一致的效果。

 

  （3）工具类

工具类主要有以下几个功能、实现图形移动、图形矩阵变换、图形动画效果等这些分别有几个js文件来实现，这里不做一一介绍。

 

3、简单的GFX实例

 3.1准备工作

使用 GFX 绘图的时候，首先要在页面当中加入 dojo.js 文件，并且加载 GFX 包，代码如下：

 <script type="text/javascript" src="dojo/dojo.js" ></script> 

 <script type="text/javascript"> 

 dojo.require("dojox.gfx"); 

 </script> 

 

 

 3.2创建surface

surface 是 GFX 模型中的一个概念，表示了一个所有形状的矩形虚拟容器，每一个页面都可以有多个这样的容器，每一个容器都有一个本地的坐标系统，X 轴水平指向右侧，Y 周垂直指向下。

<div id="container"></div>

<script>

 var gfxContainer= dojo.byId('container'); 

 var surface = dojox.gfx.createSurface(gfxContainer, 400, 400); 

<script>

 这样我们就在一个dom节点上创建了一个surface，尺寸为400x400。gfxAPI就会根据不同的浏览器环境将自动将这段代码转换为相应的svg节点或者vml节点。

 

 3.3创建一个简单的圆

 Gfx提供了一系列createApi来创建你想要的图形：

createPath(path), 

createRect(rect), 

createCircle(circle),

createEllipse(ellipse),

createLine(line),

createPolyline(polyline),

createImage(image),

createText(text),

createTextPath(textpath)

 

 

 

 

所传入的属性为构造他们的shape对象，具体如下所示：

       var circle = { cx: 100, cy: 100,r: 60};

       var gfxcircle = surface .createCircle(circle).setFill("yellow").setStroke("blue");

同时可以在上述shape对象中加入type再和creatShape（shape）配合来创建相应的图形，当然在IE上是vml，在firefox上就是svg了。

 

小结

本文主要针对gfx工作原理，对解析流程进行了剖析，主要着重于介绍实现原理，没有对使用细节进行具体阐述，具体用法请参见dojocampus。

 

参考文献

 

[1] http://dojocn.com/ dojo中文技术社区

[2] http://docs.dojocampus.org/ dojo文档