각 Raphael 오브젝트에 대한 이벤트 핸들러 설정

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

당신은 내가 속성 block이 Paper.customAttributes 만든 사용자 지정 특성입니다로 추가 무엇 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 = 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); 
});