1

当我使用Raphael库来绘制一些项目时，我正在开发一些页面。

我的应用

所以我的问题是，当我移动到一些rect它长大时，但是当我的鼠标在定位在我的文本上时rect，它失去了他的悬停。您可以在我的应用示例中看到它。

var paper = new Raphael(document.getElementById('holder'), 500, object.length * 100);
drawLine(paper, aType.length, bType.length, cType.length, cellSize, padding);

process = function(i,label)
{ 
    txt = paper.text(390,((i+1)* cellSize) - 10,label.devRepo)
        .attr({ stroke: "none", opacity: 0, "font-size": 20});
    var a = paper.rect(200, ((i+1)* cellSize) - 25, rectWidth, rectHeight)
        .hover(function()
        {  
            this.animate({ transform : "s2"}, 1000, "elastic");
            this.prev.animate({opacity: 1}, 500, "elastic");
            this.next.attr({"font-size" : 30});
        }, 
        function()
        {       
            this.animate({ transform : "s1" }, 1000, "elastic");
            this.prev.animate({opacity: 0}, 500);
            this.next.attr({"font-size" : 15});
        });
}

我已经尝试过e.preventDefault();悬停this.next和其他一些解决方案，但它不起作用。

任何帮助，将不胜感激。

4

2 回答 2

3

大多数人会建议您在框和标签上放置一个透明矩形，然后将悬停功能附加到该矩形上。（如果有记忆，您必须将不透明度设置为 0.01 而不是 0 以防止对象丢失其附加事件。）这很好用，但我不喜欢这个解决方案；它感觉很hacky并且用不必要的对象使页面混乱。

相反，我建议这样做：从悬停中删除第二个功能，使其在功能上仅作为鼠标悬停功能。在绘制任何矩形和标签之前，先制作一个与纸张大小相同的矩形“垫子”。然后，将最小化标签的功能附加到垫子上作为鼠标悬停。换句话说，您正在将触发器从开箱即用鼠标更改为鼠标悬停在其外部区域上。

我在垫子上留下了一点不透明度和颜色，以确保它正常工作。您可以将颜色更改为背景颜色。

  var mat = paper.rect(0, 0, paper.width, paper.height).attr({fill: "#F00", opacity: 0.1});

现在，您想为所有矩形创建一个容器，以便您可以遍历它们以查看哪些需要最小化。我制作了一个名为“矩形”的对象，其中包含我们关注的对象。然后：

  mat.mouseover(function () {
    for (var c = 0; c < rectangles.length; c += 1) {
      //some measure to tell if rectangle is presently expanded
      if (rectangles[c].next.attr("font-size")) {
        rectangles[c].animate({                  
              transform : "s1"
            }, 1000, "elastic");
        rectangles[c].prev.animate({opacity: 0}, 500);
        rectangles[c].next.attr({"font-size" : 15});                  
      }
    }
  });

然后我刚刚从各个矩形中删除了 mouseout 功能。

jsBin

需要明确的是，这会有一些缺点：如果人们用鼠标移动的速度非常快，他们可以同时扩展几个矩形。一旦鼠标接触垫子，这种情况就会得到纠正。我认为功能看起来很不错。但隐形垫始终是一种选择。

于 2013-01-14T16:55:43.780 回答
0

我为 Raphael 写了一个小扩展 - 称为hoverInBounds- 解决了这个限制。

演示：http: //jsfiddle.net/amustill/Bh276/1

Raphael.el.hoverInBounds = function(inFunc, outFunc) {
    var inBounds = false;

    // Mouseover function. Only execute if `inBounds` is false.
    this.mouseover(function() {
        if (!inBounds) {
            inBounds = true;
            inFunc.call(this);
        }
    });

    // Mouseout function
    this.mouseout(function(e) {
        var x = e.offsetX || e.clientX,
            y = e.offsetY || e.clientY;

        // Return `false` if we're still inside the element's bounds
        if (this.isPointInside(x, y)) return false;

        inBounds = false;
        outFunc.call(this);
    });

    return this;
}
于 2013-01-14T21:19:00.327 回答