Блог

Главная - Вопросы по программированию - Raphael.js Новичок: Как удалить элемент при нажатии мыши «еще где»?

Raphael.js Новичок: Как удалить элемент при нажатии мыши «еще где»?

#javascript #raphael

#javascript #рафаэль

Вопрос:

Я отрисовал прямоугольную :

 var paper = Raphael("notepad", 320, 200);

var rect = paper.rect(10, 10, 50, 50);

Я реализовал функцию, которая при щелчке мышью по прямоугольному элементу появляется круг:

 rect .click(function(evt){
   var circle=paper.circle(50, 50, 40);
});

Я хотел бы реализовать еще функцию, которая при щелчке мыши «еще где» всплывающий круг исчезает. «else-where» означает paper или любой элемент на paper .

Но у paper него нет события click, как я могу тогда реализовать эту функцию? Кто-нибудь может подсказать мне способ избавиться от него? Спасибо.

Ответ №1:

Чтобы удалить круг в Raphael, вы можете использовать команду remove, например, так:

 circle.remove();

Чтобы определить щелчок в другом месте, вы можете использовать событие щелчка в теге body:

 document.body.onclick = function(){
  circle.remove();
}

Вы можете добавить return false; к своему событию щелчка по прямоугольнику, чтобы оно не переходило в событие щелчка по телу:

 rect.click(function(evt){
  circle = paper.circle(50, 50, 40);
  return false;
});

Ответ №2:

С добавлением jQuery (просто потому, что):

 <html>
<head>
<title>test</title>
</head>
<body>
<div id="notepad" style="width: 320px; height: 200px;border: 1px solid black"></div>
</body>
<script src="raphael-min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.2/jquery.min.js" type="text/javascript"></script>
<script type="text/javascript">
   jQuery(document).ready(function(){
       var paper = Raphael("notepad", 320, 200);
       var rect = paper.rect(10, 10, 50, 50);
       var circle = false;
       rect.attr("fill","red");
       jQuery(rect.node).click(function(evt){
           circle = paper.circle(100, 100, 40);
           return false;
         });
       jQuery("#notepad").click(function(evt){
           if(circle amp;amp; evt.target.nodeName != "circle"){
             if(circle){
               circle.remove();
               circle = false;
             }
           }
         });
     });
</script>
</html>

Ответ №3:

Вот как я это сделал, но это не идеально.

 var graph = this.paper.path(path).attr({"stroke": "rgb(" color ")","stroke-width": "5"});
graph.hover(
function(){
    this.glow = this.paper.path(path).attr({"stroke": "rgb(" color ")","opacity":"0.4","stroke-width": "5"}).glow({color: "rgb(" color ")", width: 10});
},
function(){
    this.glow.remove();
}   
)

Итак, ключ в том, что мы создаем двойной путь с большей шириной и непрозрачностью поверх исходного пути. Для удвоения пути я использую те же path и color переменные, которые были объявлены ранее для исходного пути и для его тени и свечения. Он отлично удаляется при наведении курсора мыши.