1

配列から複数の 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);
        });

 }
4

2 に答える 2

2

で要素リストを作成できます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);
});

私はあなたがそれをチェックするためにフィドルを作りました。もちろん改善することもできますが、ご理解いただければ幸いです。

于 2012-07-10T20:01:04.790 に答える
0

この例に基づいて別の解決策を見つけました。興味があるかもしれない他の人のために。

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);
});
于 2012-07-10T21:41:41.447 に答える