2013-04-04 33 views
6

私はHTML5 CanvasとKineticJSのプロジェクトに取り組んでいます。半透明のオーバーレイ(KineticJSグループまたはレイヤー)がシーン全体に配置されます。問題は次のとおりです。このオーバーレイの下にあるKineticJSオブジェクトにバインドされたマウスイベントは処理されません。マウスイベントのオブジェクトを「透過的」にするには?

このオーバーレイ(または他のオブジェクト)をマウスイベントに対して「トランスペアレント」にするにはどうすればよいですか?

注:質問はキャンバスについてのみであり、それに干渉する他のHTML要素はありません。 (下記頼まれた明確なものを作るために)

答えて

7

あなたがキャンバスの上に配置されているHTML要素を意味すると仮定すると、ポインタイベントを見てみてください:pointer events at MDN

例えば

#foo { 
    pointer-events:none; 
} 
+0

私もこれを使用しますが、ブラウザ間で互換性の問題があることに注意してください。あなたの答えは – Rodik

+0

Thxです。しかし、最初の記事で編集したように、私はHTML要素を意味するものではありません。 – Michael

+0

ああ、それは理にかなっています。ドキュメントを見ると、APIを使用してこれを行う方法はすぐにはわかりません。このオーバーレイは残りのシーンと同じキャンバス要素にある必要がありますか? – Graham

1

はい、あなたは、クリックスルーすることができ、トップノード下にポインタイベントに類似ノード:なし

は、あなただけのイベントをリッスンしていない、あなたの一番上のオブジェクトを教えてくれない...このように:

myTopObject.setListening(false); 

これですべてのマウスイベントがボトムオブジェクトにバブルダウンします。

これはSOコードとフィドルのために答えてください:層レベルでpointer-events in Kineticjs

+0

jQueryや通常のJavascriptでこれを行う方法はありますか? 'pointer-events:none'は私にとっても解決策ではありません。 – RaisinBranCrunch

1

設定の不透明度は、オブジェクトレベルに不透明度を設定します。

layer.setOpacity(0.1); 

"このオーバーレイでKineticJSオブジェクトにバインドされたマウスイベントは処理されません。"

あなたのオーバーレイ(レイヤー)の不透明度は0ですが、オブジェクトにバインドされたマウスイベントが処理されます。これは正常に動作しているようですが、私はあなたが何であるか分かりません。

「このオーバーレイ(または他のオブジェクト)をマウスイベントに対して「透明」にするにはどうすればよいですか? 私の場合、mouseover/mouseoutはレイヤーレベルでうまく動作し、半透明にします。

layer.on('mouseover', function() { 
    this.setOpacity(0.5); 
    this.draw(); 
    }); 

    layer.on('mouseout', function() { 
    this.setOpacity(1); 
    this.draw(); 
    }); 

layer.draw()はありますか?

関連する問題