Могу ли я иметь обработчик щелчка и клавиатуры для событий холста RaphaelJS? - PullRequest
Новая
       12

Могу ли я иметь обработчик щелчка и клавиатуры для событий холста RaphaelJS?

3 голосов
/ 16 ноября 2009

Я новичок в RaphaelJS. Я пытаюсь добавить слушателя щелчка и слушателя клавиатуры на холст безуспешно. Может кто-нибудь, пожалуйста, объясните, как использовать слушателя щелчка и слушателя клавиатуры на Рафаэле. Небольшой пример очень поможет.

Спасибо.

1 Ответ

2 голосов
/ 17 ноября 2009

Вот пример щелчка и наведения мыши, вы можете использовать больше 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>
...