当前位置：文江博客话题详情

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

发布于 2024-09-18 20:10:00 字数 533 浏览 9 评论 0原文

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

我想知道的是：

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

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

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

原文

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

英雄似剑 2024-09-25 20:10:01

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

使用 Illustrator 或 Inkscape 等工具将矢量图像转换为 svg，然后在文本编辑器中打开它。您会发现大多数形状，例如和在 Raphael 中具有直接等价性。例如，对象在其 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});

请注意应用于对象和组（元素）的任何转换，您必须在 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 进行绘制。

The easiest vector image format to read is svg since svg is XML and XML is just plain text.

Convert your vector image to svg using something like Illustrator or Inkscape and then open it in your text editor. You'll find that most of the shapes like <path /> and <rect /> have a direct equivalence in Raphael. For example, the <path /> object defines path coordinates in its d attribute and it has the same syntax as paths in 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"
/>

You can convert that to 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});

Take note though of any transformations applied to objects and groups (the <g /> element), you'll have to repeat them in Raphael. Say for example you see the following:

<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)"
/>

then after creating the path in Raphael you'll need to apply the translate():

path.translate(-124,370);

You can probably write a script to convert svg files to Raphael syntax or load the svg file in the browser as text and use the browser's XML DOM parser to process it and draw it using Raphael.

回复收藏 0 原文

~没有更多了~