z-index = -1のときにキャンバス要素でマウスの位置を取得する
-
09-10-2019 - |
質問
これは簡単な問題のようです。 Processing.jsを使用して書いているCanvasアプリケーションがあり、Webページの背景に表示したいと考えています。これを達成するために、私は次のCSSを持っています:
#canvas-back {
position: absolute;
top: 0;
left: 0;
z-index: -1;
}
Canvas-Backは、実際のキャンバスを含むDIVのIDです。キャンバス自体は、HTMLボディ要素の幅と高さを持つように設定されています。これは私にとって正しくレンダリングされます(HTMLコンテンツの下の背景のキャンバス)が、MousexとMouseyの変数(Processing.jsがマウス座標を取得するために使用する変数)をキャプチャすることはできなくなりました。
この問題を修正するにはどうすればよいですか?それは異なるCSSの問題ですか、それともProcess.jsでマウス座標を取得する別の方法がありますか?ありがとう。
解決
誰かが同じ問題を抱えている場合に備えて、私の解決策を投稿したと思いました。 jqueryを使用していたので、先に進み、JmousexとJmouseyの新しい変数をマウスの位置に設定しました。
jQuery(document).ready(function(){
$(document).mousemove(function(e){
jmouseX = e.pageX;
jmouseY = e.pageY;
});
})
その後、ProcessingJSアプリでMousexまたはMouseyが必要なときはいつでも、JMousexとJMouseyを使用します。
他のヒント
さて、Z-Indexを-1に変更し、体がZ-Index Autoを持っているため、この場合は0と考えることができます。 。あなたの体はすべてのクリックなどを取得します。この場合、体自体にマウスイベントを登録する必要があります。
キャンバスをクリックする必要がある場合、私が提案できるこの唯一のことは、z-index = 1にして完全に透明にすることです。しかし、その場合、ボタン、リンク、テキストボックスなど、ボディにある要素をクリックすることはできません。それ以外の場合は、身体のイベントをキャプチャし、使用しているライブラリにコーディナを手動で提出する必要があります。