使用 Cufon 渲染网页字体-6 Cufon 实现原理初探及应用 更新

look_w

当然，结合一定的数学知识，尤其是三角函数知识，笔者相信这一问题其实并不难解决。为方便起见，笔者在此将通过代码注解的方式，向读者来介绍在这一过程中的一些关键所在，以供读者参考。
清单 15. 绘画并填充扇形

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26

var dot_x = canvas.width / 2 ; // 设定圆心位置的 x 坐标，置于整个画布的中央，下同 var dot_y = canvas.height/ 2 ; // 设定圆心位置的y坐标             // 设定半径，在此，去掉 20 的目的，是为了使得整个饼图，可以比画布看上去小些 var radius = (Math.min(canvas.width,canvas.height) - 20)/2; var startAngel = 0; // 起始角度 var start_x = dot_x + radius; var start_y = dot_y; // 设定起始扇形底边所在远端坐标 for(i=0; i<data.length; i++){   // 在 Canvas 下开始一次绘画过程，至 closePath 结束 //Canvas 允许对一次绘画过程所形成的封闭区域，进行统一的颜色填充   brash.beginPath();   // 计算扇形中止弧度，Canvas 使用弧度作为单位   var endAngel =  startAngel + Math.PI*2*data['percent']/100;   // 设定扇形另一边所在远端点坐标 var end_x = dot_x + radius * Math.cos(endAngel); var end_y = dot_x + radius * Math.sin(endAngel); brash.moveTo(dot_x, dot_y); // 将画笔移动至圆心 // 画扇形的两条边，lineTo 表示在 MoveTo 所设定的起点，至 lineTo 所设定终点间画线 brash.lineTo(start_x, start_y); brash.lineTo(end_x, end_y); // 使用 arc 方法绘画弧形，其中，false 表明在此，将按照逆时针方式进行绘画 brash.arc(dot_x, dot_y, radius, startAngel, endAngel, false); startAngel = endAngel; start_x = end_x; start_y = end_y; brash.closePath(); // 结束本次绘画过程 brash.fillStyle = data['color']; // 设定填充颜色 brash.fill(); // 使用画笔刷填充由最近绘画过程所形成的图形 }

完整的代码实现读者可以参阅范例 7.htm，代码的运行效果，则可如下图 5 所示。
至此 Canvas 下的饼图显示引擎就已基本开发完成了。当然根据应用的需要，我们还可以继续扩展这一引擎，比如在范例 8.htm 中，笔者就在现有引擎基础上，增加了两个扇形区域数据描述属性 offset_x 和 offset_y 属性，来分别表示该扇形区域的水平和垂直偏移量，而应用这一新引擎所产生的执行效果，则可如下图 6 所示。显然的对于某些需要突出显示某个区域的饼图统计图表而言，这将是很好的一种表达方式。
使用 VML 绘制统计图在了解了 Canvas 下绘制统计图的主要方法和技巧后，再去理解同样的功能在 VML 下的实现，显然将要顺畅许多。有鉴于此，我在此就不对其实现细节和流程进行说明了，而仅将就这一开发中的几个关键开发点略作提示，以供读者参考。

• VML 是一种基于 XML 的绘画标记语言。这是 VML 和 Canvas 最大的不同之处。

在 VML 规范下，任意的一个普通 HTML 标记，都可以视为 VML 下的一个独立的 “画布”而存在，而 VML 语言则相当于是 Canvas 的画笔对象，可以为这一画布提供各种各样的绘画方式。比如，我们可以使用 <line /> 标记来实现从坐标（0,0）到（100,0）的直线段的绘画，如下代码所示。
清单 16. VML 基本应用范例

1 2 3

<p> <v:line from="0,0" to="100,0" /> </p>

因此，在 VML 下动态创建图形的过程，其实也就是动态创建 VML 语言标记并将其附加到画布（即某一标记）下的过程，这二者是完全一致的。

• behavior 风格的使用。

这是 VML 应用另外一个与众不同之处。在 VML 的规范中，开发者如果希望使用 VML 技术来进行页面的绘画，则不仅仅需要如一般 XML 语言一样，在 Web 文档中引入这一语言的名称空间（VML 的名称空间为“urn:schemas-microsoft-com:vml”），还需要确保所有 VML 标记，具有值为“url(#default#VML)”的 behavior 风格。否则的话，IE 浏览器是不会对其进行解析和处理的。这也正是读者可以在大部分 VML 应用中，看到有类似如下代码所示的 CSS 风格说明的原因所在。
清单 17. 需要为标记增加 behavior 风格，才能为 IE 解析

1 2 3

<!--[if IE]> <style>cvml\:* { behavior: url(#default#VML); }</style> <![endif]-->

其余的开发技巧，应该说就和 Canvas 对象无异了，读者可参阅范例 7.htm 进行了解，在此笔者就不多赘述了。而在饼图引擎的基础上，笔者相信，读者也是一定可以完成其他统计图表的引擎开发工作的。
至此，关于 Cufon 及其基本实现原理便已经向读者介绍完毕了。而显然的由于 Cufon 引擎的实现原理，就是将文字描述转化为图形，那么在相关算法的支持下，我们是一定能够在 Cufon 的基础上，实现关于文字的更为丰富的渲染的。而事实上 Cufon 也已经开始了这方面的工作。比如利用现有的 Cufon 类库，开发者就可以通过为 Cufon.replace 方法，配置一个特殊的 color 配置项值“-linear-gradient( 颜色 1, 颜色 2, … , 颜色 n)”，来实现文字的颜色从颜色 1 到颜色 n 的渐变。笔者相信，随着 Cufon 的不断发展，类似这样的渲染实现是会越来越多的，而笔者也欢迎对此有兴趣的读者，来我一起来进行有关的研究和探讨。