Question

我有一个简单的脚本，它从一个数组创建几个Raphael对象，然后为每个对象分配事件处理程序。问题是只有最后一个事件处理程序正在为所有对象执行。我在这里做错了什么？

var blockDiagram = {
    "block" :[
     {
        "width": 100,
        "height": 100,
        "text" : "this is block 1",
        "cx": 10,
        "cy": 10,
        "fill" : "blue"
     },
     {
        "width": 100,
        "height": 100,
        "text" : "this is block 2",
        "cx": 120,
        "cy": 10,
        "fill" : "yellow" 
     },
     {
        "width": 100,
        "height": 100,
        "text" : "this is block 3",
        "cx": 230,
        "cy": 10,
        "fill" : "red" 
     }
    ]
 };

var paper = new Raphael("holder", 700, 700)

for ( i=0;  i< blockDiagram.block.length; i++)
{
     ms = 500;
    width = blockDiagram.block[i].width;
    height = blockDiagram.block[i].height;
    text = blockDiagram.block[i].text;
    cx = blockDiagram.block[i].cx;
    cy = blockDiagram.block[i].cy;
    fill = blockDiagram.block[i].fill;
    p = paper.rect(cx,cy, width, height).attr({"fill": fill});
    txt = paper.text(cx ,cy, text).attr({fill: 'black', stroke: "none", opacity: 0, "font-size": 15});
    p.mouseover(function () {               
            txt.stop().animate({opacity: 1}, ms);
        }).mouseout(function () {
            txt.stop().animate({opacity: 0}, ms);
        });

 }

Answer 1

您可以使用Paper.set()

制作元素列表

var set = paper.set();

for(var i = 0; i< blockDiagram.block.length; i++) {
  var width = blockDiagram.block[i].width,
    height = blockDiagram.block[i].height,
    text = blockDiagram.block[i].text,
    cx = blockDiagram.block[i].cx,
    cy = blockDiagram.block[i].cy,
    fill = blockDiagram.block[i].fill;

  var p = paper.rect(cx,cy, width, height).attr({
    block: blockDiagram.block[i], // here the custom attribute gets set (block object)
    fill: fill
  });
  set.push(p);
}

我添加的属性block是使用Paper.customAttributes创建的自定义属性。因此，您可以将信息附加到任何元素。

这就是我创建block属性的方式：

paper.customAttributes.block = function(block) {
  return {
    block: block
  };
};

因此，当使用参数调用属性时，它将被设置，否则它将返回

之前设置的值

现在，最好的部分，我们可以将处理程序附加到整个集合，并在额外属性中获取信息集！

var txt;
set.mouseover(function (e) {
  var block = this.attr('block'); // getting the attribute (the block object with the data)

  txt = paper.text(block.cx ,block.cy, block.text).attr({fill: "black", stroke: "none", opacity: 0, "font-size": 15});
  txt.stop().animate({opacity: 1}, ms);
}).mouseout(function (e) {
    txt.stop().animate({opacity: 0}, ms);
});

我为fiddle做了检查。当然可以改进，但我希望你能得到这个想法。

Answer 2

基于this示例找到了另一种解决方案。对于其他可能感兴趣的人。

var blockDiagram = {
    "block" :[
     {
        "width": 100,
        "height": 200,
        "text" : "this is block 1",
        "cx": 10,
        "cy": 10,
        "fill" : "blue"
     },
     {
        "width": 100,
        "height": 100,
        "text" : "this is block 2",
        "cx": 120,
        "cy": 10,
        "fill" : "yellow" 
     },
     {
        "width": 100,
        "height": 100,
        "text" : "this is block 3",
        "cx": 230,
        "cy": 10,
        "fill" : "red" 
     }
    ]
 };


Raphael.fn.BlockDiagram = function (blockDiagram) {
var paper = this,      
    Blocks = this.set();

function square(cx, cy, width, height, params) {       
    return paper.rect(cx, cy, width,height).attr(params);
 }

var process = function (i) {
        var width = blockDiagram.block[i].width,
            height = blockDiagram.block[i].height,
            text = blockDiagram.block[i].text,
            cx = blockDiagram.block[i].cx,
            cy = blockDiagram.block[i].cy,
            fill = blockDiagram.block[i].fill,               
            ms = 500,                
            p = square(cx, cy, width, height,{fill: fill}),
            txt = paper.text(cx , cy, text).attr({fill: fill, stroke: "none", opacity: 0, "font-size": 20});
        p.mouseover(function () {
            p.stop().animate({transform: "s1.1 1.1 " + cx + " " + cy}, ms, "gradient");
            txt.stop().animate({opacity: 1}, ms, "gradient");
        }).mouseout(function () {
            p.stop().animate({transform: ""}, ms, "gradient");
            txt.stop().animate({opacity: 0}, ms);
        });
        Blocks.push(p);
        Blocks.push(txt);
    };

for (i = 0; i < blockDiagram.block.length; i++) {
    process(i);
}
return Blocks;
};

$(function () { 
Raphael("holder", 500, 500).BlockDiagram(blockDiagram);
});

为每个Raphael对象设置事件处理程序

2 个答案: