将ID添加到raphael对象

时间:2011-12-11 03:14:51

标签: javascript jquery raphael

我有一个相当大的地图,包含Raphael路径,我试图让一些jquery ajax脚本可以访问。我试图添加一个ID或任何东西,以便以有组织的方式从jquery访问它。

作为拉斐尔的新手,我无法找到实现这一目标的好方法。 我尝试使用.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>

2 个答案:

答案 0 :(得分:9)

嗯,我这样做的方式如下。首先,我在对象中写入所有路径,例如:

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;
}

现在,如果您想获得其中一个元素,可以使用下一个Raphael功能:

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

这样您就可以在任何Raphael方法上使用路径。因此,如果您需要在圆顶中获取节点,您可以执行以下操作:

var node = thisPath.node

但是如果你需要为路径设置动画,你最好使用Raphael的animate方法,或者如果你需要改变attrbutes attr方法。

thisPath.animate(.....)

如果您需要对所有路径应用某些更改,可以使用:

paper.forEach(function(thisArg))

你需要传递函数在每个元素上运行,thisArg在每次迭代时引用元素

也许你想看看拉斐尔的集合,这对于元素组的使用方法很有用。如果您需要使用此功能的任何帮助,请告诉我,我会尽力帮助您。再见!

答案 1 :(得分:2)

您可以将它们推送到数组:

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

然后循环通过pathArray。

另一个选择是将它们分组到sets