Raphaël.js 简介

James Williams
James Williams
X 首页

简介

SVG 是可缩放矢量图形的缩写，是一种基于 XML 的语言，用于描述对象和场景。SVG 元素可以触发事件，并且可以使用 JavaScript 编写脚本。SVG 附带多种内置基元类型（例如圆形和矩形），并且能够显示文本。虽然 SVG 技术并不新，但 HTML5 现在支持将 SVG 对象直接嵌入网页中，而无需使用 <object> 或 <embed> 标记，使其与画布目前提供的功能保持一致。Raphaël.js 是一个 JavaScript 库，可让您以编程方式创建 SVG 场景。它使用统一的 API 在受支持的情况下创建 SVG 场景，在目前不受支持的情况下（即 IE9 之前的 Internet Explorer 版本）则创建 VML（矢量建模语言）场景。

绘制第一个场景

我们先使用 Raphaël 绘制一个简单的场景。我们将通过实例化 Raphaël 对象来开始绘制场景。在本例中，我使用了将其插入给定宽度和高度的给定 HTML 元素中的构造函数，但您也可以让 Raphaël 将对象附加到 DOM（文档对象模型）中。接下来，我通过提供所需的 x 和 y 位置以及宽度和高度来创建一个矩形。接下来，我通过指定所需的坐标和半径创建了一个圆形。最后，我使用属性函数 (attr) 为对象分配颜色。

您可以为每个 SVG 对象分配颜色、旋转、描边颜色和大小等属性。您可以在此处找到可分配属性的详细列表。

var paper = Raphael("sample-1", 200, 75);
var rect = paper.rect(10, 10, 50, 50);
var circle = paper.circle(110, 35, 25);

rect.attr({fill: "green"});
circle.attr({fill: "blue"});

使用路径绘制高级形状

路径是渲染程序用于创建对象的一系列指令。使用路径绘制就像使用钢笔在巨大的方格纸上绘制一样。 您可以指示将触控笔从纸上移开并移动到其他位置（移动到），以绘制线条（线条到）或曲线（弧形到）。借助路径，SVG 可以创建具有相同细节级别的对象，无论缩放比例如何。当您发出绘制曲线等指令时，SVG 会考虑曲线的原始大小和最终所需大小（放大后），并通过数学计算确定中间点，以呈现平滑的曲线。

以下代码和图形展示了使用路径绘制的矩形和封闭曲线。 字母 M 后跟坐标会将触控笔移至该位置，字母 L 后跟坐标对会绘制一条从当前位置到该位置的线条。s 会使用给定控制点和相对坐标的端点绘制平滑的贝塞尔曲线。Z 用于闭合路径。通常，使用大写字母会使用绝对坐标发出命令，使用小写字母会使用相对坐标。M/m 和 Z/z 分别用于发出大写或小写相同的命令。您可以点击此处查看所有路径说明的列表。

var paper = Raphael("sample-2", 200, 100);
var rectPath = paper.path("M10,10L10,90L90,90L90,10Z");
var curvePath = paper.path("M110,10s55,25 40,80Z");

rectPath.attr({fill:"green"});
curvePath.attr({fill:"blue"});

绘制文本

如果无法在插图中绘制文本，那会非常无聊。幸运的是，Raphaël 提供了两种绘制文本的方法。第一个方法（text）接受 x 和 y 坐标以及要绘制的字符串。使用文本方法时，您无法对字体或其他效果进行太多控制。它使用默认字体以默认大小绘制。

第二种方法（print）会将文本绘制为路径集合。因此，我们可以修改个别字母。在下面的示例中，我们使用橙色填充颜色为数字 5 着色，使用蓝色填充颜色为“ROCKS”着色，并使描边更粗以模拟粗体文本。我们使用字号为 40 pt 的自定义字体来实现这一点。

var paper = Raphael("sample-4", 600, 100);
var t = paper.text(50, 10, "HTML5ROCKS");

var letters = paper.print(50, 50, "HTML5ROCKS", paper.getFont("Vegur"), 40);

letters[4].attr({fill:"orange"});
for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});
}

Vegur 字体不在 Raphaël 中，任何字体也不在其中。此外，大多数字体都使用 TrueType(TTF) 或 OpenType(OTF) 格式。为了将这些格式转换为 Raphaël 可用的格式，我们需要使用名为 Cufon 的工具进行转换。借助 Cufon，您可以导出给定字体的不同字体样式（常规、粗体、斜体、粗体斜体等），以便在 Raphaël 中使用。本教程不对 Cufon 进行详细介绍。如需了解详情，请点击上述链接。Google 字体目录是获取简洁字体的绝佳来源。

事件

SVG 元素可以直接订阅所有传统的基于鼠标的事件：click、dblclick、mousedown、mousemove、mouseout、mouseover、mouseup 和 hover。Raphaël 提供了向画布或各个元素添加您自己的方法的功能，因此从理论上讲，没有任何因素会阻止您为移动浏览器添加手势。

以下代码段会绑定一个函数，以便在用户点击“ROCKS”中的某个字母时，将该字母旋转 45 度。

for (var i = 5; i < letters.length; i++) {
letters[i].attr({fill: "#3D5C9D", "stroke-width": "2", stroke: "#3D5C9D"});

letters[i].click(function(evt) {
this.rotate(45);
});
}

SVG 与 Canvas

由于这两种方法都是在屏幕上绘制对象的方法，因此通常不清楚为什么应使用其中一种方法而非另一种方法。这两种媒体采用的方法截然不同。Canvas 是一种即时模式 API，与使用蜡笔绘图非常相似。您可以清除或销毁部分绘制内容，但默认情况下无法还原或更改之前的笔触。Canvas 也是光栅位图，因此在放大图片时，很容易出现像素化。另一方面，如前所述，SVG 可以提供具有相同详细级别的多个分辨率，并且可以编写脚本。

是否使用 SVG 或 Canvas 进行游戏编程非常简单。除了您计划部署到桌面设备还是移动设备的常规限制之外，真正决定因素还是精灵数量。SVG 非常适合我所说的低保真度游戏。我将这些游戏描述为对象的并发移动以及精灵的移除和创建受到限制的游戏。许多棋盘游戏（例如国际象棋、跳棋或海战棋），以及纸牌游戏（例如二十一点、扑克和俄罗斯方块）都属于此类别。另一个共同点是，在许多此类游戏中，玩家都需要移动任意对象，而 SVG 的可脚本化特性让对象选择变得轻而易举。

SVG 制作工具

使用 SVG 并不意味着您必须手动创建路径。您可以使用多种开源和商业工具导出 SVG。我经常使用并强烈推荐的两个工具是 Inkscape 和 svg-edit。

svg-edit

svg-edit 是一个使用 JavaScript 编写的基于浏览器的 SVG 编辑器。 它提供了一个有限的界面，让人联想到 GIMP 或 MS Paint。除非细节级别相对较低，否则我主要使用 svg-edit 调整 SVG 绘制内容，而不是创建它们。svg-edit 允许您以图形方式或使用 SVG 代码创建对象。

Inkscape

Inkscape 是一款跨平台的完整矢量图形编辑器，类似于 CorelDraw、Adobe Illustrator 和 Xara。Inkscape 受益于活跃的插件社区和成熟的代码库。Inkscape 的前身于 1999 年开发，Inkscape 就是从它分叉而来。在处理基于矢量的资源和位图资源时，我会使用 Inkscape。

一个小插曲

Windows 上的 Internet Explorer 9 之前的版本不支持 SVG。IE 使用一种名为 VML（矢量标记语言）的矢量图形格式，其提供的许多功能与 SVG 相同。Raphaël 可以在支持 SVG 或 VML 的情况下创建使用 SVG 或 VML 的场景。使用 Raphaël 是一种简单的跨平台支持方式。

参考