给 Raphael 对象添加 ID

Question

我有一张由Raphael路径组成的相当大的地图，我试图让它可以被一些jquery ajax脚本填充并访问。我尝试添加一个ID或任何其他使它可以从jquery有组织地访问的内容。但由于我刚接触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>

- papacostas

Answer 1

好的，我翻译这段内容的方式如下。首先，我将所有路径写在一个对象中，例如：

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

然后，您只需循环遍历所有路径，设置每个路径的坐标并为它们分配一个ID（这是Raphael内部的ID）：

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

现在，如果你想获取其中一个元素，你可以使用下一个 Raphael 功能：

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

这样你就可以在Raphael的任何方法中使用这个路径。因此，如果您需要在文档中获取节点，可以执行以下操作:

var node = thisPath.node

但是如果你需要给路径加动画，最好使用Raphael的animate方法，或者如果你需要更改属性，则使用attr方法。

thisPath.animate(.....)

如果您需要对所有路径进行某些更改，可以使用以下命令：

paper.forEach(function(thisArg))

您需要将函数传递给每个元素并使用thisArg引用每次迭代的元素。

也许您想看一下Raphael的集合，这可能对在元素组上使用方法很有用。如果您需要使用这些功能的任何帮助，请告诉我，我会尽力帮助您。再见！

- limoragni

Answer 2

你可以将它们推到一个数组中：

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

然后循环遍历pathArray。

另一个选项是将它们分组到集合中。

- Choy