0

私は、カーソルを合わせると展開して画像とテキストを表示するボタンに取り組んでいます。これらは、クリックイベントに別の方法で反応する必要があります。Raphael は、セット内の項目を変更するときにマウスのイン/アウトを検出するため、一連のものの上に単一のホバー イベントを作成するには、注意が必要な回避策が必要であることが判明しました。(元の質問: Raphaeljs の一連の要素にカーソルを合わせる)

前述の質問で受け入れられた回答は、isPointInside関数を使用して、マウスのイン/アウトが実際にセット全体に出入りしているかどうかを判断します。それは彼らのデモでうまく機能します：（青い丸は修正あり、赤は修正なし）

http://jsfiddle.net/amustill/Bh276/1

ただし、この例に表示されている赤い四角は私のイメージを表しており、マウスを赤い四角と青い四角の間ですばやく移動すると、ホバー アウト イベントが捕捉されません。さらに、赤い四角の境界線にマウスを合わせると、しばしばグリッチが発生します。

http://jsfiddle.net/wTUex/

isPointInside が正しく返されないように見えるのはなぜですか? これに使用できるより正確な関数はありますか?

4

1 に答える 1

0

更新された回答（以下の元）

コメントの会話ごとに、ボックスに ID を割り当ててから、マウスアウト時に、マウスの下の新しいオブジェクトが赤い四角形であるかどうかを次のようにテストすることもできます。

var Paper = new Raphael(0, 0, 400, 300);
var mat = Paper.rect(0, 0, 400, 300).attr({fill: "#CCC"});
mat.node.id = "mat";
// Hover in function
function hoverIn() {
  newBox.show();
  this.text.toFront();
  this.animate({
    height: 140,
    width: 140,
    x: 130,
    y: 80
  }, 100);
}

// Hover out function
function hoverOut(e) {
  console.log(e, e.toElement);
  if (e.toElement.id !== "redbox") {
      newBox.hide();
      this.animate({
          height: 100,
          width: 100,
          x: 150,
          y: 100
      }, 100);
  }
}

var rect = Paper.rect(150, 100, 100, 100).attr({fill: 'blue' });
rect.node.id = "bluebox";
var newBox = Paper.rect(140, 90, 120, 120).attr({fill: 'red'}).hide();
newBox.node.id = "redbox";
rect.attr({r:5});    
rect.text = Paper.text(200, 150, 'Hover me!').attr('font-size', 12);
rect.hover(hoverIn, hoverOut);

jsフィドル

元の回答 私は常に別の解決策をお勧めします。複雑な状況で hoverOut をトリガーする代わりに、マウスがボックスの外側の領域に入ったときにトリガーするだけです。

参照: Raphael でロス ホバーを防ぐには?

var Paper = new Raphael(0, 0, 400, 300);
//this should be colored white -- leaving as gray for clarity
var mat = Paper.rect(0, 0, 400, 300).attr({fill: "#CCC"});
// Hover in function
function hoverIn() {
    console.log(newBox);
    newBox.show();
  rect.text.toFront();
  rect.animate({
    height: 140,
    width: 140,
    x: 130,
    y: 80
  }, 100);
}    

// Hover out function
//notice "this" was replaced with "rect" since "this" now refers to mat
function hoverOut() {
  newBox.hide();
  rect.animate({
    height: 100,
    width: 100,
    x: 150,
    y: 100
  }, 100);
}

var rect = Paper.rect(150, 100, 100, 100).attr('fill', 'blue');
var newBox = Paper.rect(140, 90, 120, 120).attr({fill: 'red'}).hide();


rect.attr({r:5});

rect.text = Paper.text(200, 150, 'Hover me!').attr('font-size', 12);
rect.mouseover(hoverIn);
mat.mouseover(hoverOut);

jsフィドル

于 2013-01-18T19:31:09.820 に答える