包括拉斐爾功能labelPath用於onmousedown事件

Question

澳大利亞地圖的拉斐爾例子有以下腳本（修改，包括對形狀路徑頂部的文本標籤名稱）：

 <script type="text/javascript" charset="utf-8"> 
     window.onload = function() { 
      var R = Raphael("paper", 800, 600); 
      var attr = { 
       fill: "#eee", 
       stroke: "#666", 
       "stroke-width": 1, 
       "stroke-linejoin": "round" 
      }; 
function labelPath(pathObj, text, textattr) 
{ 
    if (textattr == undefined) 
     textattr = { 'font-size': 11, fill: '#000', stroke: 'none', 'font-family': 'Arial,Helvetica,sans-serif', 'font-weight': 40 }; 

    var bbox = pathObj.getBBox(); 
    var textObj = pathObj.paper.text(bbox.x + bbox.width/2, bbox.y + bbox.height/2, text).attr(textattr); 
    return textObj; 

} 
      var alb = {}; 
     alb.cudhi = R.path("m 619.04203,203.24913 -3.9,5.4 -4.2,3.6 -8.7,5.4 -6.9,8.1 -3,2.7 -5.1,5.4 -2.7,0 -2.1,0 -6,2.7 -3,0 -3.9,-5.4 -5.7,-9 -3,-7.2 3,-5.4 0,-6.3 -8.1,-13.5 -1.8,-4.5 0,-3.6 -6.9,-5.4 -5.1,7.2 -4.8,-7.2 -6,-12.6 -3.9,-8.1 -3.9,-9 3,-8.1 0,-8.1 0,-6.3 -9,-8.1 -4.8,-8.1 -5.1,-5.4 -0.9,-6.3 -1.2,-9 -3.9,0 -8.7,-4.5 -10.8,-6.3 -5.1,-7.2 -1.8,-10.8 -1.2,-6.3 -3.9,-9 0,-9.9 -1.8,-13.5 1.8,-4.5 2.1,-3.6 4.8,0 6,-2.7 6,-2.7 4.8,7.2 9,14.4 9.9,13.5 9.6,6.3 4.2,1.8 10.8,0.9 18.6,-5.4 5.1,3.6 4.8,4.5 9.9,9.9 0.9,0.9 5.1,5.4 5.7,6.3 6.9,9.9 0,9.9 9,2.7 3,0.9 10.8,9.9 7.8,11.7 1.2,0.9 9.9,9 8.7,0.9 0.9,6.3 -0.9,10.8 -0.9,11.7 -2.1,4.5 -3,5.4 -7.8,6.3 -1.8,7.2 0,2.7 -1.2,3.6 -0.9,4.5 -3.9,2.7 -3.9,6.3 z").data('id', 'alb["cudhi"]').attr(attr); 
     alb.kruje = R.path("m 447.14203,127.64913 -4.8,-9.9 -6,-6.3 -3.9,-6.3 -3.9,-5.4 -6,-6.3 -3.9,-7.2 -1.8,-9 -5.1,-9 -3,-9.9 3,-2.7 6,0 10.8,2.7 3.9,0 6,0 9.9,-5.4 9.9,-4.5 11.7,-5.4 3.9,9 1.2,6.3 1.8,10.8 5.1,7.2 10.8,6.3 8.7,4.5 3.9,0 1.2,9 0.9,6.3 5.1,5.4 4.8,8.1 9,8.1 0,6.3 0,8.1 -3,8.1 3.9,9 3.9,8.1 6,12.6 4.8,7.2 -6.9,4.5 -7.8,6.3 -9,7.2 -3.9,6.3 -3.9,4.5 -3.9,7.2 -2.1,-3.6 -3,-4.5 -5.7,-0.9 -6,0 0,-12.6 4.8,1.8 3,-0.9 0.9,-3.6 -2.7,-9.9 -2.1,-5.4 -3,-3.6 -10.8,-4.5 -9,-6.3 -4.8,-5.4 -9.9,-6.3 -3.9,-8.1 -2.1,-9.9 -3,-8.1 z").data('id', 'alb["kruje"]').attr(attr); 

labelPath(alb["cudhi"], "Cudhi"); 
labelPath(alb["kruje"], "Kruje"); 


      var current = null; 
      for (var state in alb) { 
       alb[state].color = Raphael.getColor(); 
       (function (st, state) { 
        st[0].style.cursor = "pointer"; 
        st[0].onmousedown = function() { 
         current && alb[current].animate({fill: "#eee", stroke: "#666"}, 500) && (document.getElementById(current).style.display = ""); 
         st.animate({fill: st.color, stroke: "#ccc"}, 500); 
         st.toBack(); 
         R.safari(); 
         document.getElementById(state).style.display = "block"; 
         current = state; 
        }; 
        if (state == "durres") { 
         st[0].onmousedown(); 
        } 
       })(alb[state], state); 
      } 
     }; 
     </script> 

現在，「onmousedown事件」功能工作時指針位於路徑上，但是，當鼠標懸停在文本/標籤路徑上時它不起作用。

有沒有一種方法，我可以通過修改「for (var state in alb)」迴路包括labelPath以及添加此功能？

Answer 1

有許多的解決這一途徑。您可以使alb對象的成員爲集而不是路徑，然後將標籤添加到這些集 - 這樣，標籤和路徑將共享相同的點擊處理程序。不幸的是，這也會使您的路徑動畫也適用於標籤，因此可能不可行。

或者，您可以將data（使用Raphael的內置Element.data方法）分配給特定的鍵，對於屬於一起的項目使用相同的值。例如，路徑AND標籤都會有數據'click-group'='Cudhi'。然後，您可以使用Paper.forEach來識別每個配對在一起的元素，併爲其分配適當的點擊處理程序。

這裏有一個fiddle demonstrating such a mechanism。

我敢肯定還有其他的方法來做到這一點的！使用Paper.forEach和Element.data或Element.id對我來說似乎是特別有前景的工具。