3

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

我想知道的是：

  1. 如何在 RaphaelJS 中使用现有的矢量图像

    （如果我下载“矢量”图像，我可以告诉 RaphaelJS 绘制坐标吗？）

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

我的困惑是，在示例页面上，图像是以对我有意义的坐标绘制的。但是，如果从网上下载矢量图像，坐标在哪里？

我的目标是在我的网页上制作可点击的图像，就像 RaphaelJS 的澳大利亚地图示例一样，上面有一个悬停事件。

4

1 回答 1

11

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

使用 Illustrator 或 Inkscape 之类的工具将矢量图像转换为 svg，然后在文本编辑器中打开它。您会发现大多数形状都喜欢Raphael <path />，并且<rect />直接等效于 Raphael。例如，<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"
/>

您可以将其转换为 Raphael 的：

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 进行绘制。

于 2010-09-15T09:48:28.000 回答