Raphael.js單擊事件

我正在嘗試爲地圖使用Raphael.js。我希望能夠點擊地圖外的一個按鈕來獲得一組狀態以變成不同的顏色。我已經嘗試過調整jsfiddle（見下文）一段時間，但只是無法讓它工作。我錯過了什麼？Raphael.js單擊事件

HTML

<button id="show">Show</button>

var paper = Raphael(10, 50, 960, 560); 
var attr = {fill: 'blue', 
stroke: '#000', 
'stroke-width': 5, 
cursor: 'pointer'}; 

var elementSet = paper.set(); 
var cn = {}; 
    cn.a = paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z").attr(attr); 
    cn.b = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z").attr(attr); 
    cn.c = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z").attr(attr); 

elementSet.push(cn.a, cn.b); //define what is in the set 


$('#show').on('click', function() { 
    elementSet.animate({ 
      fill: '#000' 
    }, 500); 
});

的JS小提琴是here。

謝謝你的任何建議

來源

2013-07-01 Ryan Wegner

目前，你只測試你的代碼的jsfiddle？如果是這樣，您的代碼無法評估'$'，因爲沒有加載像Prototype或jQuery這樣的庫。 – FredericK

這是一個很好的觀點。謝謝 –

試試這個：

var paper = Raphael(10, 50, 960, 560); 
var attr = { 
    fill: 'blue', 
    stroke: '#000', 
     'stroke-width': 5, 
    cursor: 'pointer' 
}; 

var elementSet = paper.set(); 
var cn = {}; 
cn.a =  paper.path("M339.098,175.503c0,0-55.555,58.823-16.34,75.163s227.451,49.02,227.451,49.02s67.321-25.49,47.713-50.98s-71.896-78.432-71.896-78.432L339.098,175.503z").attr(attr); 
cn.b = paper.path("M548.902,306.876c0,0-209.15-32.026-228.758-46.405s-27.451-27.451-20.262-42.484s26.797-44.444,26.797-44.444l-41.83-86.928l-76.471,77.125c0,0-25.49,169.935,48.366,171.242s292.157-4.575,292.157-4.575V306.876z").attr(attr); 
cn.c = paper.path("M296.614,86.614l38.562,83.66l194.771-7.843l75.817,81.7c0,0,130.066-84.967,73.203-118.301S503.15,48.706,463.935,51.974S296.614,86.614,296.614,86.614z").attr(attr); 

elementSet.push(cn.a, cn.b); //define what is in the set 

var button = document.getElementById('show'); 

button.onclick = function() { 
    elementSet.animate({ 
     fill: '#000' 
    }, 500); 
};

來源

2013-07-01 14:22:52 FredericK

這個完美的作品。謝謝！！！ –

接受的答案將不勝感激:) – FredericK

Raphael.js單擊事件

回答

相關問題