盤旋在Raphaeljs的一組元素

Question

我有一個只包含一個矩形的集合。

var hoverTrigger = this.paper.set();
var outline = this.paper.rect();
outline.attr({
...
hoverTrigger.push(outline)
this.sprite.push(hoverTrigger);

懸停時，矩形應該展開，並添加一些鏈接，鼠標關閉后，鏈接消失，矩形再次變小。

hoverTrigger.hover(function () {
  var link = this.paper.text();
  hoverTrigger.push(link);
  outline.animate({
  ...
}, function() {
  link.remove();
  outline.animate({
  ...
});

但是，似乎懸停功能單獨應用於集合中的每個項目，而不是整個集合，因為當您將鼠標懸停在鏈接上時，懸停功能將觸發，鏈接將消失。 有時盒子會懸停在快速連續和spazzes上的事件中。

有沒有辦法將懸停應用於一組事物，以便在集合中的兩件事之間進行鼠標懸停不會觸發懸停？

Answer 1

我最近自己面對這個限制，我決定給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;
}

在創建Raphael紙張對象之前放置上面的代碼塊。

Answer 2

我之前遇到過這個問題。 我找到了2個解決方案

在不透明度設置為0的其他元素上創建一個矩形

var paper = new Raphael( 0, 0, 100, 100 );
var rect = paper.rect( 0, 0, 100, 100 ).attr({ opacity: 0 });
rect.hover( func_in, func_out );

這僅適用於具有單擊操作等1個整體操作的元素。

另一種選擇是在將鼠標懸停在一組元素上時取消懸停功能

var funcOutTimer;

set.hover( function( ) {
    if( funcOutTimer ) { // Hovered into this element in less than 100 milliseconds => cancel
        window.clearTimeout( funcOutTimer);
    } else {
    // do stuff
    }
},
function( ) {
    funcOutTimer = setTimeout( function( ) {
        // do stuff
    }, 100 ); // wait for 100 milliseconds before executing hover out function
});

基本上，函數中的懸停僅在第一次首次輸入一組元素時執行，而懸停輸出函數只會執行一次，因為最后您懸停的元素不是該組的一部分。

Answer 3

我發現這適用於以下內容

myCircleElement.hover (
    function(e) { myTextElement.animate({opacity:1}, 800); },
    function(e) {
        var x = e.layerX || e.x,
        y = e.layerY || e.y;
        // Return `false` if we're still inside the element's bounds                                        
        if (this.isPointInside(x, y)) return false;
        // otherwise do something here.. eg below
        myTextElement.animate({opacity:0}, 800); //
    }
);

Answer 4

Bruno詳細信息的方法有這個小問題：

如果在其他元素上創建矩形，如果其他元素是文本，則無法在網頁中選擇這些文本。 但它的確有效。

順便說一下屬性“不透明度”：0是不夠的，我不得不在我的情況下添加“填充”：“白色”屬性。

您需要將對象放在前面，如下所示：obj.toFront（）; obj是像“rect”等的raphael形狀。

我在mouseover和mouseout事件上測試了它並且它可以工作。

在這里查看我的小提琴： 鏈接到小提琴

function withArray(x,y){
    var rect = paper.rect(x, y, 100, 60).attr({
        fill: "green"
    });
    rect.text = paper.text(x+(100/2), y + 30, 'rect w/array').attr({
        'font-size': 12,
        "fill": "white"
    });
    var rectover = paper.rect(x,y,100,60).attr({
        fill: "white",
        opacity: 0
    });
    var myArray = paper.set();
    myArray.push(rect, rect.text, rectover);
    myArray.mouseover(function() {
    var anim = Raphael.animation({
    transform: ['S', 1.5, 1.5, (rect.attr("x")), (rect.attr("y"))]
        }, 100, "backOut", function() {
    });
    myArray.animate(anim);
    }).mouseout(function() {
        var anim = Raphael.animation({
            transform: [""]
        }, 50, "backOut", function() {
   });
   myArray.stop().animate(anim);
});
}