Question

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

我想知道的是：

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

（如果我下载“矢量”图像，我可以告诉RaphaelJS绘制坐标吗？）
有没有办法将图像（jpg，gif或其他）转换为RaphaelJS可以使用的矢量图形。

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

我的目标是在我的网页上制作可点击的图像，就像Australia地图上有悬停事件的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"
/>

您可以将其转换为Raphael's：

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绘制它。

如何使用RaphaelJS绘制现有的矢量图像

1 个答案: