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 ではなく 0.01 にする必要があります。) これはうまく機能しますが、私はこの解決策が好きではありません。ハッキーに感じられ、不要なオブジェクトでページが雑然とします。

代わりに、これをお勧めします。ホバーから 2 番目の機能を削除し、機能的にはマウスオーバー機能のみにします。長方形とラベルを描く前に、紙のサイズの長方形の「マット」を作成します。次に、ラベルを最小化する関数をマット上のマウスオーバーとしてアタッチします。言い換えれば、トリガーを箱から出してマウスを動かすことから、その外側の領域をマウスで動かすことに変更しています。

マットが機能していることを確認するために、マットに少し不透明度と色を残しました。色を背景色に変更するだけです。

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

ここで、すべての四角形のコンテナーを作成して、それらをループして最小化する必要があるものを確認できるようにします。対象のオブジェクトを含む「rectangles」というオブジェクトを作成しました。それで：

  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});                  
      }
    }
  });

次に、個々の長方形からマウスアウト機能を削除しました。

jsBin

明確にするために、これにはいくつかの欠点があります。マウスを非常に速く動かすと、同時に複数の長方形を展開できます。これは、マウスがマットに触れるとすぐに修正されます。機能性はかなりいいと思います。しかし、目に見えないマットは常にオプションです。

于 2013-01-14T16:55:43.780 に答える
0

hoverInBounds私は、この制限を解決するRaphael の小さな拡張機能 (と呼ばれる) を書きました。

デモ: 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 に答える