添加ID到raphael對象

我有一個相當大的地圖，包括Raphael路徑，它試圖讓一些jQuery Ajax腳本可以被訪問。我試圖添加一個ID或任何東西，使其從有組織的方式從jQuery訪問。添加ID到raphael對象

作爲即時新的拉斐爾我不能找出一個很好的方式來實現這一點。我試過使用.data（）爲每個點添加一個ID，並說「seat_1」，「seat_2」等，但到目前爲止還沒有成功。

我該如何組織這段代碼，以便通過循環來操縱它？我意識到它是一個相當開放式的問題，但任何建議是非常讚賞

演示在這裏：http://www.sam-sys.in/demo/pushparaj/ticketreservation/?page_id=203

var path_gs = rsr.path("M5.834,698.336c-3.217,0-5.833,2.615-5.833,5.831 c0,3.215,2.616,5.833,5.833,5.833c3.219,0,5.835-2.618,5.835-5.833C11.669,700.951,9.053,698.336,5.834,698.336"); 
path_gs.attr({"clip-path": 'url(#SVGID_2_)',fill: '#777675',parent: 'group_a','stroke-width': '0','stroke-opacity': '1'}).data('id', 'path_gs');

產生

<path style="stroke-opacity: 1; " fill="#008000" stroke="#000000" d="M5.834,698.336C2.6169999999999995,698.336,0.0009999999999994458,700.951,0.0009999999999994458,704.167C0.0009999999999994458,707.3820000000001,2.6169999999999995,710,5.834,710C9.052999999999999,710,11.669,707.382,11.669,704.167C11.669,700.951,9.053,698.336,5.834,698.336" stroke-width="0" stroke-opacity="1"></path>

來源

2011-12-11 papacostas

嗯，我這樣做的方式如下。首先，我寫的所有路徑中的對象，例如：

var paths = { 
    path1: 'the paths coordinates', 
    path2: 'the paths coordinates', 
    path3: 'the paths coordinates', 
}

然後你只需循環槽的所有路徑，塞汀座標每條路徑，並給予他們一個ID（這是一個內部拉斐爾的ID）：

現在

for(path in paths){ 
    var newpath = paper.path(paths[path]); 
    newpath.attr({options}) 
    newpath.id = path; 
}

，如果你想獲得這個元素，你可以使用下一拉斐爾特點之一：

var thisPath = paper.getById('path1');

這樣，您就可以使用任何的拉斐爾方法路徑。所以，如果你需要得到在圓頂的節點，可以執行以下操作：

var node = thisPath.node

但是如果你需要動畫的路徑，你最好使用拉斐爾的動畫的方法，或者如果您需要更改attibutes的attr方法。

thisPath.animate(.....)

如果你需要應用一些改變所有的路徑，你可以使用：

paper.forEach(function(thisArg))

你需要傳遞的功能，每一個元素上運行，並thisArg引用在每次迭代

元素

也許你想看一下拉斐爾的套裝，這對於在元素組上使用方法很有用。如果您需要使用此功能的任何幫助，請告訴我，我會盡我所能幫助您。再見！

來源

2011-12-16 15:59:57 limoragni

非常有幫助！謝謝 – papacostas

你可能只是他們推到一個數組：

var pathArray = new Array(); 
var path_gs = rsr.path("path coords"); 
pathArray.push(path_gs);

然後循環遍歷pathArray。

另一種選擇是將它們分組在sets中。

來源

2011-12-11 15:48:59 Choy

添加ID到raphael對象

回答

相關問題