拉斐尔设置事件

Question

我有一篇包含多个集合的拉斐尔论文。每个集合都有一个rect，一个在rect之上的路径和两个文本，其中一个是不可见的，另一个在rect内部。我想在鼠标悬停在整个矩形(包括文本)上时更改光标。如果我对text和rect使用不同的事件处理程序，并将两者中的光标更改为相同的值，则鼠标移出文本时会显示闪烁。这种闪烁会使鼠标悬停变得不那么平滑。

我想让光标在鼠标经过时变成手形，光标中的整个set.once都会改变，并且不会闪烁，直到矩形边界再次交叉。

如果您有任何解决方案请帮助我，Kavita

Answer 1

假设你想要悬停效果覆盖整个集合，包括你的rect，你在rect上的路径和两个文本...

var container = $(id to your Raphael container);
var yourSet = paper.set();  //assuming you have pushed all four elements into your set....
yourSet.mouseover(function(){
        container.css('cursor','pointer');
}
yourSet.mouseout(function(){
        container.css('cursor','default');
}

希望它能帮到你...

Answer 2

为了避免在将鼠标从文本移动到周围框时出现闪烁，我建议使用处理mouseover事件的overlay元素。

当您已经有了一个包含所有元素的集合时，您可以很容易地使用来自集合的getBBox中的信息创建一个新的覆盖元素。

这是一个如何工作的小片段。

<script type="text/javascript">
        function drawPreview(){
            var preview = Raphael("preview", 200, 100);
            var box1 = preview.rect(20,20,160,40);
            box1.attr({'fill':'#ccc','stroke-opacity' : 0, 'opacity':0.5});
            var box2 = preview.rect(50,10,30,80);
            box2.attr({'fill':'#999','stroke-opacity' : 0, 'opacity':0.5});
            var line = preview.text(100, 30, "My Text");

            var mySet = preview.set();
            mySet.push(box1,box2,line);

            var bb = mySet.getBBox();
            var overlay = preview.rect(bb.x,bb.y,bb.width,bb.height);
            overlay.attr({'fill':'#fff','stroke-opacity' : 0, 'opacity':0});
            overlay.mouseover(function(){
                this.attr({'cursor':'pointer'});
            });
            overlay.mouseout(function(){
                this.attr({'cursor':'default'});
            });
        }
</script>

​

​