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

Question

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

我想知道的是:

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

   (如果我下载"矢量"图像,我可以告诉RaphaelJS绘制坐标吗？)

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

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

我的目标是在我的网页上制作可点击的图像,就像澳大利亚地图上有悬停事件的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绘制它.