Question

我渲染了一个矩形：

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没有点击事件，那么我该如何实现此功能呢？任何人都可以为我提供摆脱它的方法吗？谢谢。

Answer 1

要删除Raphael中的圈子，您可以使用remove command，如下所示：

circle.remove();

要在其他地方定义点击，您可以在正文标记上使用点击事件：

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

您可以在矩形点击事件中添加return false;，以防止它冒泡到身体点击事件：

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

Answer 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 && evt.target.nodeName != "circle"){
             if(circle){
               circle.remove();
               circle = false;
             }
           }
         });
     });
</script>
</html>

Answer 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变量以及它的阴影和光晕。它在mouseover上删除就好了。

Raphael.js新手：当鼠标单击“否则在哪里”时如何删除元素？

3 个答案: