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

look_w

Cufon 实现原理初探及应用通过上文的介绍和演示，读者对于 Cufon 所展现出来的魔力以及在应用中的相关注意事项，应该是有了一个大致的了解了。那么 Cufon 是如何实现这一魔法的呢？
事实上如果读者所使用的浏览器恰好 Firefox 的话，那么当运行前述 Cufon 范例时，浏览器的表现其实是会“泄露”Cufon 的秘密所在的。如下图 4 所示，在 Firefox 浏览器上，如果读者使用鼠标右键，单击经 Cufon 渲染的文字，就可以发现这些文字，现在“竟然”已经可以按照图片模式进行查看和存储了。
这无疑暗示了，Cufon 技术的实现策略其实就是以一定标准，在网页相关位置上“画”出了所需要显示的文字字符，并同时替换原先区域所需要显示的文字。
而这自然就牵涉到了一个非常重要的问题，即如何“直接”在网页上实现“作画”呢？总体来看目前业界比较成熟的方案，有以下 三种。

• 使用 Java Applet 进行绘画。
• 通过 ActionScript 语言在 Flash 内进行绘画。
• 借助于浏览器所推出的专有页面绘画方案，如 VML、Canvas 和 SVG 等，来进行页面的绘画。通常的，这些方案又都和浏览器 DOM 对象以及 JavaScript 语言紧密相关。

Cufon 使用的正是上述第三种解决方案。当然囿于篇幅所限，笔者是无法向读者尽述 Cufon 使用这一方案，实现字体渲染的种种细节的。在此笔者则将通过另外一个实例，即构建统一的 Web 统计图表引擎实例，来帮助读者了解 Cufon 框架背后所隐藏的这一技术要点。在笔者看来，虽然这两个应用在目标上大相径庭，但其所采用的基本策略和方法则是非常类似的。
准备描述规范和 Cufon 的设计者在开发之初，为 Cufon 准备 Cufon 字体文件描述规范类似，我们开发 Web 统计图表引擎的第一步，也为 Web 统计图表准备相应的描述规范。以二维饼图为例，这一规范可能会被表述为如下所示的形式。

• 首先，每一个饼图将被描述为一个 JavaScript 数组，数组的每一个元素则代表了饼图中的一个扇区。
• 其次，数组的每一个元素将被组织为一个 JSON 对象。而在这一对象中将包含有两个基本的属性，即“color”属性和“percent”属性，前者指明了对应扇区所使用的渲染色，后者则表示扇区在整个饼图中所占的百分比。

而根据这一规范所形成的一个饼图描述范例，则可如下代码所示。
清单 10. 饼图描述实例

1 2 3 4 5

var pie = [ {"color" : "red", "percent" : 20}, {"color" : "green", "percent" : 40}, {"color" : "blue", "percent" : 40} ];

至于其他的统计图表，当然也是可以如上所述整理形成相关的描述规范的，这部分工作将作为一个练习，供有兴趣的读者补充完成并实现，在此笔者就不多加赘述了。
提供绘制接口在制定了相关图表的绘制规范后，下面要做的则是和 Cufon 一样，向其他开发人员提供统计图表绘制的方法，以帮助他们在实际应用中实现相关图像的绘制。
在此我们不妨将整个绘制接口对象命名为 StatisticalGraph，绘制方法命名为 draw，如下代码所示。
清单 11. 接口对象声明

1 2 3 4 5 6 7

var StatisticalGraph = (function(){ this.draw = function(data, type, dest, options){ …… };   ……   return this; })();

其中，相关参数的基本含义可如下表 4 所示。
表 4. StatisticalGraph.draw 方法参数说明参数说明 data 需要进行描绘的数据 type 描绘类型说明，比如“pie”表示需要将数据描绘为饼图 dest 指向 Web 页面中的一个标记对象，针对图形的描绘，将在这一标记下进行 options 为一 JSON 对象，指明了在绘画统计图过程中的相关配置项及其值