这是关于所有网页开发者应该在其工具箱中拥有的有用库系列文章中的第一篇。我的目的是向您展示这些库的功能，并帮助您以最佳方式使用它们。这篇文章专门介绍了 Raphaël 库。

简介

Raphaël 是一个最初由 Dmitry Baranovskiy 编写的库，现在是 Sencha Labs 的一部分。

该库的目的是简化在 Web 上使用矢量图形的工作。Raphaël 依赖于 SVG W3C 建议（在所有现代浏览器中都得到很好的支持），并且在旧版本的 Internet Explorer 中回退到 Micrsoft VML 语言。它还试图协调 SVG 实现中的一些工作问题，例如 SVG 动画。因此，Raphaël 是一个非常不错的包装器，可以在整个 Web 上生成一致的出色的图形。

基本用法

该库有 非常好的文档，其中包含许多示例。请不要犹豫，充分利用它。

以下示例将在具有 id “myPaper” 的 HTML 元素内绘制一个简单的红色圆圈。

// the following example creates a drawing zone
// that is 100px wide by 100px high.
// This drawing zone is created at the top left corner
// of the #myPaper element (or its top right corner in
// dir="rtl" elements)
var paper = Raphael("myPaper", 100, 100);

// The circle will have a radius of 40
// and its center will be at coordinate 50,50
var c = paper.circle(50, 50, 40);

// The circle will be filled with red
// Note that the name of each element property
// follow the SVG recommendation
c.attr({
    fill: "#900"
});

高级用法

尽管 Raphaël 减少了 SVG 提供的功能（主要是因为 VML 回退），但它允许执行非常高级的操作。

• 高级矩阵转换
• 高级事件处理程序
• 跨浏览器动画
• 简单的拖动系统
• 路径交点检测

Raphaël 还可以通过一个扩展系统进行扩展，该系统允许您构建自定义函数。

例如，这是一个绘制饼图的扩展。

/**
 * Pie method
 *
 * cx: x position of the rotating center of the pie
 * cy: y position of the rotating center of the pie
 * r : radius of the pie
 * a1: angle expressed in degrees where the pie start
 * a2: angle expressed in degrees where the pie end
 */
Raphael.fn.pie = function (cx, cy, r, a1, a2) {
    var d,
        flag = (a2 - a1) > 180;

    a1 = (a1 % 360) * Math.PI / 180;
    a2 = (a2 % 360) * Math.PI / 180;

    d = [
        // Setting the rotating axe of the pie
        "M", cx, cy,

        // Go to the start of the curve
        "l", r * Math.cos(a1), r * Math.sin(a1),

        // Drawing the curve to its end
        "A", r, r, "0", +flag, "1",
        cx + r * Math.cos(a2), cy + r * Math.sin(a2),

        // Closing the path
        "z"
    ];

    return this.path(d.join(' '));
};

注意：在上面的示例中，您必须熟悉 SVG 路径语法（Raphaël 会将其转换为 VML 语法），但一旦完成，您就可以像其他任何 Raphaël 基本元素一样重复使用它。看看这个扩展如何在 jsFiddle 上绘制彩色轮。

JSFiddle 演示.

限制和注意事项

如果您不熟悉 SVG 和/或想要支持旧版本的 MS Internet Explorer 浏览器，那么此工具适合您。但是，它是一个 JavaScript 库，这意味着您必须了解 JavaScript 才能使用它。您不能使用 SVG 并要求 Raphaël 解析并解释它（为此，存在其他库）。

在浏览器支持方面，Raphaël 为您提供了广泛的基础。Raphaël 目前支持 Firefox 3.0+、Safari 3.0+、Chrome 5.0+、Opera 9.5+ 和 Internet Explorer 6.0+。

事实上，唯一无法利用 Raphaël 的浏览器是 Android 1.x 和 2.x 的原生浏览器（以及许多功能手机浏览器）。这是因为这些浏览器不支持任何矢量语言。Android 从 Android 3.0 开始（部分）支持 SVG，因此如果您想与所有移动设备一起工作，请注意这一点。

结论

Raphaël 是第一个允许网页设计师和网页开发者在实际中使用 SVG 的库。如果您想编写一些不错的应用程序，而不需要使用完整的 SVG DOM API，或者您需要支持旧浏览器，那么这个库将赋予您一些力量。

总之，以下是一些 Raphaël 的酷炫用法。

• http://vlog.it/
• http://type.method.ac/
• http://shape.method.ac/
• http://www.nissanusa.com/leaf-electric-car/index
• http://ilovedemocracy.arte.tv/fr/