JavaScriptRaphaël，共享相同功能的多個陣列

Question

JavaScript新手，使用Raphaël庫。我正在使用的SVG圖像有一堆不同的彩色正方形。我想爲每種顏色設置不同的集合（例如，bluepath，pinkpath）並共享相同的懸停和點擊功能。彈出框工作正常，但我不知道如何加入多個數組共享相同的懸停和點擊功能。我會很感激，如果有人會好心地幫我... :)

arr = new Array(); 
for (var block in bluepaths) { 
    var obj = r.path(bluepaths[block].path); 
    obj.attr(attributes); 
    arr[obj.id] = block, attributes = { 
     fill: '#00CCFF', 
     stroke: '#3899E6', 
     'stroke-width': 1, 
     'stroke-linejoin': 'round' 
    } 
} 

arr = new Array(); 
for (var blocktwo in pinkpaths) { 
    var obj = r.path(pinkpaths[blocktwo].path); 
    obj.attr(attributes); 
    arr[obj.id] = blocktwo, attributes = { 
     fill: '#00F', 
     stroke: '#3899E6', 
     'stroke-width': 1, 
     'stroke-linejoin': 'round' 
    } 

    obj.hover(function() { 
     this.animate({ fill: '#fff' }, 300); 
    }, function() { 
     this.animate({ fill: attributes.fill }, 300); 
    }).click(function() { 
     document.location.hash = arr[this.id]; 
     var point = this.getBBox(0); 

     $('#map').next('.point').remove(); 
     $('#map').after($('<div />').addClass('point')); 

     $('.point').html(bluepaths[arr[this.id]].name).prepend(
      $('<a />').attr('href', '#').addClass('close').text('Close') 
     ).prepend(
      $('<img />').attr('src', 'flags/' + arr[this.id] + '.png') 
     ).css({ 
      left: point.x + (point.width/2) - 80, 
      top: point.y + (point.height/2) - 20 
     }).fadeIn(); 
    }); 

    $('.point').find('.close').live('click', function() { 
     var t = $(this), 
     parent = t.parent('.point'); 

     parent.fadeOut(function() { 
      parent.remove(); 
     }); 

     return false; 
    }); 

Answer 1

退房拉斐爾的set，它能夠獲得多種形狀的邏輯組，以及專爲操縱許多的目的只需一個電話即可這似乎很適合你的需求。

實施例：

你可以使用set S表示的事件處理程序結合幾種形狀，像這樣：

var set = paper.set(); 

set.push(
    r.circle(240, 120, 60), 
    r.rect(50,100,60,60), 
    r.path('m160 200 l60 80 l-120 0 z') 
);  

set.hover(
    function() { 
     // use the magic of hover in! 
    }, 
    function() { 
     // do some crazy stuff on hover out! 
    } 
); 

demo on jsFiddle

參考：

• Set on the Raphaël official docs