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元素的路徑

回答

相關問題