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 场景，或使用目前的 VML（矢量建模语言）创建 SVG 场景，即 IE9 之前的 Internet Explorer 版本。

绘制您的第一个场景

我们先用拉斐尔画一个简单的场景。我们先从实例化拉斐尔对象开始绘制场景。在本示例中，我使用了构造函数，将其插入具有指定宽度和高度的指定 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 提供了两种绘制文字的方法。第一种方法是文本，它接受 x 和 y 坐标以及要绘制的字符串。使用 Text 方法无法很好地控制字体或其他效果。它会以默认字体和默认大小绘制。

第二种方法是 print，将文本绘制为路径集合。因此，我们能够修改单个字母。在下面的示例中，我们使用橙色填充为数字 5 着色，将“ROCKS”填充为蓝色填充，并加粗描边以模拟加粗文本。为此，我们使用了字体大小为 40pts 的自定义字体。

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 字体不是拉斐尔字体，也不是任何与此相关的字体。此外，大多数字体都使用 TrueType(TTF) 或 OpenType(OTF) 格式。为了将这些格式转换成 Raphaël 可以使用的格式，我们需要使用一种名为 Cufon 的工具将其转换为所需的格式。Cufon 允许您导出指定字体的不同字体样式（常规、粗体、斜体、加粗斜体等），以供 Raphaël 使用。本教程不对 Cufon 进行详细介绍。如需了解详情，请访问上述链接。Google Font 目录是为您的应用获取精简字体的绝佳来源。

活动

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

以下代码段会绑定一个函数，以便在点击给定字母时将其旋转 45 度“ROCKS”。

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 与画布

鉴于它们都是在屏幕上绘制对象的方法，通常您并不清楚为什么应该使用其中一种方法，而不是另一种方法。这两种媒介采用的方法截然不同画布是一个即时模式 API 就像用蜡笔绘制一样您可以清除或销毁绘制的部分内容，但默认情况下无法还原或改变之前的描边。画布也是一种光栅位图，因此在缩放图片时，很容易出现像素化问题。另一方面，正如前文所述，SVG 可以提供细节级别相同的多种分辨率，并且可以编写脚本。

使用 SVG 还是画布进行游戏编程非常简单。除了您计划部署到桌面设备还是移动设备的常规限制之外，这实际上取决于精灵数量。SVG 适合我所说的低保真游戏。我将这类游戏描述为支持并发移动对象以及移除和创建精灵的游戏。许多棋盘游戏（例如国际象棋、西洋跳棋或战舰）以及纸牌游戏（例如二十一点、扑克和爱心）都属于此类别。另一个统一线程是，在许多此类游戏中，玩家需要移动任意对象，而 SVG 的脚本性使对象选择变得轻松。

SVG 创作工具

使用 SVG 并不意味着您必须手动创建路径。有几种工具（开源和商用）可用来导出到 SVG。我广泛使用且极力推荐的两个工具是 Inkscape 和 svg-edit。

svg-edit

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

墨水景

Inkscape 是一款功能齐全的跨平台矢量图形编辑器，类似于 CorelDraw、Adobe Illustrator 和 Xara。Inkscape 拥有充满活力的插件社区和成熟的代码库。Inkscape 的前身是 Inkscape，于 1999 年开发。Inkscape 是适用于矢量和位图资源的首选应用。

未成年人

在 IE9 之前的 Internet Explorer 版本中，Windows 不支持 SVG。 IE 使用名为 VML（矢量标记语言）的矢量图形格式，其功能与 SVG 大体相同。Raphaël 可以在支持的情况下创建使用 SVG 或 VML 的场景。使用 Raphaël 可以轻松地提供跨平台支持。

参考编号