添加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对象

回答

相关问题