2016-06-28 8 views
0

私は、CreateJSを使用してキャンバスに2つの図形を持っています。それぞれの形には、マウスオーバーリスナーを使って独自の形のヒット領域が含まれていました。 2つの形が上下に並んでいます。シェイプをクリックすると、2つのコールバックを受け取りました。表示される図形にのみコールバックを取得することは可能ですか? DOMと同様にCreateJSは可視要素のみをヒット

enter image description here

答えて

0

、マウス操作が動作する方法は、イベント対象の階層チェーンの一部ではない要素を除外し、表示リスト、アップバブルにあります。

これは、兄弟、または下にある他の表示リストの要素がイベントハンドラ(説明したとおり)を受け取らず、マウスイベントのターゲットではない要素に対してマウスイベントを受け取らないことを意味します。

しかし、getObjectsUnderPointを使用すると、マウスの下にあるものがわかります。ここで

stage.on("click", handleClick); 
function handleClick(event) { 
    var list = stage.getObjectsUnderPoint(event.localX, event.localY); 
    for (var i=0, l=list.length; i<l; i++) { 
    console.log(list[i]); 
    } 
} 

は、迅速なサンプルです: http://jsfiddle.net/y8jhb26x/

注あなたは(私は、ステージを使用)は、このチェックをトリガするオブジェクトをどのように制約したい任意のコンテナにマウスイベントを追加することができますが、呼び出すときgetObjectsUnderPointの場合は、をマウスの下に返します。あなただけの、そのコンテナ内の項目をチェックしたい場合は、不要な子供をフィルタリングするcontainsメソッドを使用することができます。

あなたはまた、マウスハンドラを持つアイテムをフィルタリングする getObjectsUnderPointに引数を使用するか、または mouseChildren/mouseEnabled財産を尊重することができます
for (var i=0, l=list.length; i<l; i++) { 
    if (someContainer.contains(list[i])) { 
    console.log(list[i]); 
    } 
} 

これは実際のマウスのやり取りがどのように機能するかです。

役に立てば幸い!

+0

私にとってはうまくいきます!ありがとう – RafelSanso

関連する問題