Raphael.js 简单介绍和使用

Question

SVG 是可缩放矢量图形的缩写，是一种基于 XML 的语言，用于描述对象和场景。SVG 元素可以触发事件，并且可以使用 JavaScript 编写脚本。SVG 带有几种内置的基元类型，例如圆形和矩形，并且能够显示文本。虽然 SVG 作为一种技术并不新鲜，但 HTML5 现在允许将 SVG 对象直接嵌入到页面中，而无需使用 <对象> 或<嵌入>标签，使其与画布当前可用的内容保持一致。 Raphael.js 是一个 JavaScript 库，允许您以编程方式创建 SVG 场景。它使用统一的 API 在支持的地方创建 SVG 场景，或者在现在的地方创建VML（矢量建模语言），即 IE9 之前的 Internet Explorer 版本。

绘制您的第一个场景

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

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

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 分别对大写或小写发出相同的命令。您可以在此处查看所有路径说明的列表 here。

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”}）;
 

绘图文本

没有绘制文本能力的插图会非常无聊，幸运的是，Raphael 提供了两种绘制文本的方法。第一种方法 text 采用 x 和 y 坐标以及要绘制的字符串。文本方法不能让您对字体或其他效果进行太多控制。它以默认大小的默认字体绘制。

第二种方法是打印，将文本绘制为路径集合。因此，我们能够修改单个字母。在下面的示例中，我们用橙色填充为数字 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）;

字母[4].attr（{填充：“橙色”}）;
for （var i = 5; i < letters.length; i++） {
  letters[i].attr（{fill： “#3D5C9D”， “stroke-width”： “2”， stroke： “#3D5C9D”}）;
}
 

Vegur字体不在Raphael中，也没有任何字体。此外，大多数字体使用TrueType（TTF）或OpenType（OTF）格式。为了将这些格式转换为 Raphael 可以使用的格式，我们需要使用名为 Cufón 的工具转换它们。Cufón允许您导出给定字体的不同字体样式（常规，粗体，斜体，粗斜体等）以与Raphael一起使用。详细介绍 Cufón 超出了本教程的范围。查看上述链接以获取更多详细信息。应用程序不受阻碍字体的一个重要来源是 Google 字体目录 。

事件

SVG 元素可以直接订阅所有传统的基于鼠标的事件： 单击、dblclick、鼠标向下、鼠标移动、鼠标退出、鼠标悬停、鼠标向上和悬停 。Raphael 提供了将您自己的方法添加到画布或单个元素的功能，因此理论上没有什么可以阻止您为移动浏览器添加手势。

下面的代码片段绑定了一个函数，在单击“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） {
    这个.旋转（45）;
  });
}
 

SVG 与画布

鉴于它们都是在屏幕上绘制对象的方法，因此通常不清楚为什么要使用一种而不是另一种。这两种媒介的方法大不相同。画布是一种即时模式 API，很像用蜡笔绘图。您可以清除或销毁部分图形，但默认情况下不能还原或更改以前的描边。画布也是光栅位图，因此在缩放图像时，它很容易受到像素化的影响。另一方面，如前所述，SVG 可以提供具有相同细节级别的多个分辨率，并且可以编写脚本。

是使用 SVG 还是 Canvas 进行游戏编程相当简单。除了计划部署到桌面还是移动设备的正常限制之外，它实际上归结为精灵计数。SVG适合我所说的低保真游戏。我将这些游戏描述为对象并发移动以及精灵移除和创建有限的游戏。许多棋盘游戏，如国际象棋、跳棋或战舰，以及纸牌游戏，如二十一点、扑克和红心都属于这一类。另一个统一的线索是，在许多这样的游戏中，玩家需要移动任意对象，而SVG的可脚本性使对象选择变得容易。

SVG 的创作工具

使用 SVG 并不意味着您必须手动创建路径。有几种工具，包括开源和商业工具，允许您导出到 SVG。我广泛使用并强烈推荐的两个工具是 Inkscape 和 svg-edit 。

SVG-编辑

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相同的功能。Raphael 可以在支持 SVG 或 VML 的情况下创建场景。使用 Raphael 是提供跨平台支持的简单方法。

相关链接

• Rapahel.js: http://raphaeljs.com
• Raphael Documentation: http://raphaeljs.com/reference.html