vector-graphics - 如何使用 RaphaelJS 绘制现有的矢量图

Question

我开始学习RaphaelJS ，但它似乎是一个陡峭的学习曲线，因为我不是很精通 javascript。但它似乎是一个很好的图书馆，我愿意花时间学习它。
我想知道的是:

如何在 RaphaelJS 中使用现有的矢量图像
(如果我下载“矢量”图像，我可以告诉 RaphaelJS 绘制坐标吗？)

有没有办法将图像(jpg、gif 或其他)转换为 RaphaelJS 可以使用的矢量图形。

我的困惑是，在示例页面上，图像是按坐标绘制的，这对我来说很有意义。但是，如果从网上下载矢量图像，坐标在哪里？
我的目标是在我的网页上制作可点击的图像，就像 Australia map 的 RaphaelJS 示例一样。上面有一个悬停事件。

Answer 1

最容易阅读的矢量图像格式是 svg，因为 svg 是 XML 而 XML 只是纯文本。

使用 Illustrator 或 Inkscape 之类的工具将矢量图像转换为 svg，然后在文本编辑器中打开它。你会发现大多数形状像 <path />和 <rect />在拉斐尔中有直接的等价物。例如，<path />对象在其 d 中定义路径坐标属性，它与 Raphael 中的路径具有相同的语法:

<path
  style="fill:none;stroke:#000000;stroke-width:12"
  d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
/>

您可以将其转换为拉斐尔的:

var path = paper.path(
    "m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
);
path.attr({fill:'none',stroke:'#000000';'stroke-width':12});

请注意应用于对象和组( <g /> 元素)的任何转换，您必须在 Raphael 中重复它们。举例来说，您看到以下内容:

<path
  style="fill:none;stroke:#000000;stroke-width:12"
  d="m 116.6,832.4 c 0,0 5.8,85.5 127.6,87.0 121.8,1.4 137.7,-79.7244"
  transform="translate(-124,370)"
/>

然后在 Raphael 中创建路径后，您需要应用 translate() :

path.translate(-124,370);

您可以编写一个脚本将 svg 文件转换为 Raphael 语法，或者将 svg 文件作为文本加载到浏览器中，然后使用浏览器的 XML DOM 解析器处理它并使用 Raphael 绘制它。