Question

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

所以我的问题就在于，当我转向某些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和其他一些解决方案，但它不起作用。

任何帮助都将不胜感激。

Answer 1

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

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

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

  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

要清楚，这将有一些缺点：如果人们快速运行鼠标，他们可以同时扩展几个矩形。只要鼠标接触到垫子，就可以解决这个问题。我认为功能看起来很不错。但是看不见的垫子总是一种选择。

Answer 2

我给拉斐尔写了一个小扩展名 - 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;
}

如何防止拉斐尔的徘徊？

2 个答案: