処理中の絶対マウス位置

Question

これは、処理フォーラム（これまで回答がありませんでした）で作成した投稿のコピーペーストです。ここでも試してみてください。

処理は、特にWebページ専用の非常にクールな方法です。参照として http://processing.org

ねえ、私は処理に慣れていないので、フラッシュレスWebサイトを作成するために使用しているので、ほとんどキャンバスに描画しています。

マウスの位置に問題がありますが、座標を描くときは、左上の角を0,0の位置と見なします。実際のマウス座標では、0,0がブラウザウィンドウの左上隅であると見なされます。

だから私の問題は、ブラウザがサイズを変更するたびにキャンバスが中央のWebページで動作するため、キャンバス内のマウスの座標も同様に動作することです。

キャンバスを基準にしてマウスの座標を作成する方法はありますか？ブラウザウィンドウのサイズを変更できるように、マウス座標の左上隅は常に0,0になりますか？

それが問題です。stackoverflowでこれほど多くのpplがこれを経験したことはありませんが、誰かが私を助けてくれることを願っています：）

事前にスタックオーバーフローコミュニティに感謝します。

Answer 1

処理に慣れていませんが、ブラウザウィンドウの左上隅とキャンバスの左上隅の差を計算することはできませんか？
つまり（jqueryを使用）

$(window).onresize = function() {
 //offset return position realive to the document.
 var offset = $('#canvas').offset();
 window.canvasLeft = offset.left;
 window.canvasTop = offset.top;
}

その後、次のようなことができます：

 relativeMouseLeftPosition = mouseLeftPosition() - window.canvasLeft;

#canvasをキャンバス領域のcssセレクターに置き換える必要があります。

また、windowはグローバルオブジェクトであることに注意してください。ここでは、スコープの問題の可能性に対処するために使用します。

Answer 2

処理は、実際にはWebページの作成を目的としていません。サイトのFlashよりも悪いです（Javaアプレットであるスケッチの処理-Javaはあまり一般的ではなく、リソースを大量に消費し、読み込みが遅くなります。 ）

とはいえ、 processing.js は、Javascriptの処理ポートです。

蛇の例は、マウスにアクセスします。それはJavascriptであり、キャンバスはdivであるため、座標はJava（それ自体のVMの世界に住んでいる）よりも少し健全であるはずですが、私は間違っている可能性があります。

Answer 3

使用する前に、システムのキャリブレーションをユーザーに依頼できます。これは質問に対する完全な答えではなく、問題の解決策です。

画面の中央、左上、右下に赤い点を描くだけです。ユーザーにクリックして、座標を取得するように依頼します。そうすれば、画面の隅がどこにあるかがわかります。