HTMLページ上のマウス座標

Question

私は、ボクセルペインター1のthree.jsページの例を使用しようとしています。この例では、マウス座標を使用して、クリック後にボックスが配置される位置を示すロールオーバーヘルパーを移動します。

mouse.set((event.clientX/window.innerWidth)*2-1, -(event.clientY/window.innerHeight)*2+1); 

このコードは、ページ全体のマウスの位置を計算します。 webGLキャンバスのスペースの合計がページ内のスペースの総量と異なるように、ページに他のdiv要素を追加しました。webGLキャンバスの新しい寸法は、全高の95％で、85％総幅の

私のwebGL canavas上のマウス位置は明らかに異なります。したがって、ロールオーバーヘルパーはマウスの位置と重複しません。どのように私は上記のコードを修正する必要がありますか？

Answer 1

あなたが渡された任意のjQueryオブジェクトをオフに動作し、マウスの位置を検出するためのjQueryを使用することができますそれに。

$(function() { 
    var xCoord, yCoord; 
    $(document).on("mousemove", function(event) { 
    xCoord = event.pageX; 
    yCoord = event.pageY; 
    console.log("x: "+ xCoord+ ", y: "+ yCoord); 
    }); 
}); 

jQueryセレクタをキャンバスに変更するだけで、jQueryが残りの部分を処理します。

希望すると便利です。

Answer 2

あなたのページ上のマウスカーソルのグローバルな位置をしたい場合、あなたはかなりのページを使用する必要がありますが、このように座標：

は

event.pageX 
event.pageY