Question

我有一个500x400px容器，我正在与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开始。我该怎么办？

Answer 1

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

Answer 2

听起来你认为拉斐尔在创造形状等之间保留了当前笔位的参考。我不认为这是真的......我相信当你添加一条路径时，它的起始位置该路径相对于画布0,0。（请注意，路径'M'命令允许相对moveTo 'm'，但我认为这仅适用于路径字符串中的初始值...在开始时，它似乎是绝对的，无论如何案例）

因此，如果您想从图片的左上角开始路径，请使用"M50,200"启动路径字符串 - 对于右下角，请使用"M140,310"启动它。

如果您希望此时将保持的路径附加到图像，请将它们添加到一个集合中。但那是另一个帖子......： - ）

RaphaelJS：在另一个SVG元素上绘制一条路径

2 个答案: