如何防止拉斐尔的徘徊？ [英] How to prevent loss hover in Raphael?

问题描述

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

I'm developing some page when I use Raphael liblary to draw some items.

我的应用程序

所以我的问题是因为当我移动到某个 rect 时，它会长大，但当我的鼠标位于我的 rect <上的文本上时/ code>，它丢失了他的悬停。您可以在我的应用示例中看到它。

So my problem is in that when I'm moving to some rect it growing up but when my mouse is on text which is positioning on my rect, it loss his hover. You can see it on my app example.

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 和其他一些解决方案，但它不起作用。

I have tried e.preventDefault(); on hover of this.next and some other solutions but it's doesn't work.

任何帮助将不胜感激。

推荐答案

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

Most people will suggest you place a transparent rectangle over the box and the labels and attach the hover functions to that instead. (If memory serves, you have to make the opacity 0.01 instead of 0 to prevent the object from losing its attached events.) This works fine, but I don't love this solution; it feels hacky and clutters the page with unnecessary objects.

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

Instead, I recommend this: Remove the second function from the hover, making it functionally a mouseover function only. Before you draw any of the rectangles and labels, make a rectangular "mat" the size of the paper. Then, attach the function that minimizes the label as a mouseover on the mat. In other words, you're changing the trigger from mousing out of the box to mousing over the area outside of it.

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

I left a tiny bit of opacity and color on the mat to be sure it's working. You can just change the color to your background color.

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

现在，你想为所有矩形制作一个容器，这样你就可以遍历它们了解哪个需要最小化。我制作了一个名为矩形的对象，其中包含我们关注的对象。然后：

Now, you want to make a container for all the rectangles so you can loop through them to see which need to be minimized. I made an object called "rectangles" that contains the objects we're concerned with. Then:

  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函数。

Then I just removed the mouseout function from the individual rectangles.

jsBin

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

To be clear, this will have some downsides: If people run the mouse around really fast, they can expand several rectangles at the same time. This is remedied as soon as the mouse touches the mat. I think the functionality looks pretty nice. But the invisible mats is always an option.

这篇关于如何防止拉斐尔的徘徊？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！