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

Question

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

vector-graphicsraphael

3

我开始学习 RaphaelJS，但由于我对javascript不是很熟练，所以似乎学习曲线比较陡峭。但它似乎是一个非常好的库，我愿意花时间去学习它。

我想知道的是：

如何在RaphaelJS中使用现有的矢量图像？
(如果我下载了一个“矢量”图像，我能告诉RaphaelJS绘制坐标吗？)
是否有一种将图像（jpg、gif或其他格式）转换为RaphaelJS可以使用的矢量图形的方法。

我的困惑在于示例页面上的图像是用坐标绘制的，这对我来说很有意义。然而，如果我从网络上下载一个矢量图像，坐标在哪里呢？

我打算在我的网页上制作可点击的图像，就像RaphaelJS示例中的澳大利亚地图上有一个hover事件。

- Oscar

1个回答

网页内容由stack overflow 提供, 点击上面的

可以查看英文原文，
原文链接

- slebetman · Accepted Answer

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

使用类似Illustrator或Inkscape的工具将您的矢量图像转换为SVG格式，然后在文本编辑器中打开它。您会发现大多数形状如<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绘制它。