我可以爲RaphaelJS的畫布事件設置點擊和鍵盤處理程序嗎？

我是RaphaelJS的新手。我正在嘗試將單擊偵聽器和鍵盤偵聽器添加到畫布上，但沒有成功。有人可以解釋如何使用Raphael上的點擊監聽器和鍵盤監聽器。一個小例子會有很大的幫助。我可以爲RaphaelJS的畫布事件設置點擊和鍵盤處理程序嗎？

謝謝。

來源

2009-11-16 suprasad

這是一個click和mouseover示例，您可以在那裏使用更多的jQuery來簡化它，但我只是想使用文檔就緒函數。在那裏添加鍵盤事件不應該太多：

<html> 
    <head> 
     <script type="text/javascript" src="http://github.com/DmitryBaranovskiy/raphael/blob/master/raphael-min.js?raw=true"></script> 
     <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> 
     <script type="text/javascript"> 
      $(document).ready(function() 
      { 
       var paper = new Raphael(document.getElementById('canvas_container'), 500, 500); 
       var circ = paper.circle(250, 250, 40); 
       circ.node.onmouseover = function() 
       { 
        this.style.cursor = 'pointer'; 
       }; 

       circ.node.onclick = function() 
       {  
        circ.animate({opacity: 0}, 2000, function() 
        {     
         this.remove(); 
        }); 
       } 
      }); 
     </script> 
     <style type="text/css"> 
      #canvas_container 
      { 
       width: 500px; 
       border: 1px solid #aaa; 
      } 
     </style> 
    </head> 
    <body>              
     <div id="canvas_container"></div> 
    </body> 
</html>

來源

2009-11-16 23:25:03 SimonDever

不錯 - 但事件只在圓圈的邊界上觸發。（因爲它不是實心的圓形） – jantimon 2009-11-16 23:28:45

用以下方式很容易修改：circ.attr（'fill'，'red'）; – SimonDever 2009-11-16 23:36:55

嘿，非常感謝，它工作正常。有沒有辦法將它包含到使用raphaeljs組件創建的小部件中？ – suprasad 2009-11-17 01:06:15

我可以爲RaphaelJS的畫布事件設置點擊和鍵盤處理程序嗎？

回答

相關問題