RaphaelJS：绘制另一个SVG元素的路径

我有一个500x400px的容器，我正在与RaphaelJS合作来管理一些SVG的东西。我已经用这段代码加载了一张图片：RaphaelJS：绘制另一个SVG元素的路径

var img = paper.image("images/image.jpg", 50, 200, 90, 110);

现在我想绘制一个相对于这个元素的路径。我应该怎么做？如果我写的是这样的：

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75...");

的路径正在创建相对于父容器，并没有考虑过我的形象的正确位置。感谢您的支持

---编辑----

这是我的仪表盘它的造型：

#canvas { 
     float: left; 
     width: 500px; 
     height: 400px; 
     border: 1px solid #333; 
} 

<div id="canvas"></div>

这是JavaScript代码的一部分：

// Creates canvas 500 × 400 inside canvas div 
var paper = Raphael(document.getElementById('canvas'), 500, 400); 
// Load an image at 50, 200 
var img = paper.image("images/image.jpg", 50, 200, 90, 110);

之后，我想填充一个SVG路径，将它放在我的图像上。如果我写的是这样的：

var c = paper.path("M 18.00,79.75 C 18.00,79.50 52.50,79.75 52.50,79.75...");

于#canvas容器中创建这条道路，从0,0 COORDS开始。我该怎么办？

来源

2012-02-11 Mich Dart

如果你能提供更多的代码，以便我们能够真正看到你的整个方法是什么样子，那将是最好的。 – jbranchaud 2012-02-11 18:12:31

我已经更新了上面的代码，谢谢 – 2012-02-11 19:43:17

请看这个小提琴http://jsfiddle.net/XRBRz/。在这个小提琴中，想象黑色矩形作为你的形象。通过将路径转换为矩形的原点，可以绘制出相对于黑色矩形的楼梯路径。此外，路径（阶梯）被赋予一个与黑色矩形具有相同尺寸的剪辑路径，以剪切黑色矩形外部的路径。

来源

2012-02-14 08:47:05 rajkamal

听起来好像你在想拉斐尔一直在创造形状之间保持对当前笔位置的引用等等。我不认为这是真的......我相信当你添加一条路径时，起始位置该路径相对于画布0,0。（注意，路径'M'命令确实允许一个相对的moveTo 'm'，但我认为最初的一个在一开始的路径字符串...在此之后才能正常运行，这似乎是绝对的，不区分大小写）

所以，如果要从图像的左上角开始路径，请使用"M50,200"开始路径字符串 - 对于右下角，从"M140,310"开始。

如果您希望将停留的路径附加到该图像，请将它们添加到集合中。但是，这是另一个帖子... :-)

来源

2012-02-14 13:47:10

RaphaelJS：绘制另一个SVG元素的路径

回答

相关问题