JavaScript ペイント アプリの要素に対するマウスの位置を取得するにはどうすればよいですか?

ペイント アプリの要素に対するマウスの位置を確認する

要素に対するマウスの位置を決定することは、次のような対話型アプリケーションを作成する場合に重要です。ペイントアプリとして。これをキャンバス上で実行するには、正しい JavaScript コードを使用する必要があります。

解決策:

jQuery を使用しないソリューションはすぐに利用できなかったため、ここに代替案を示します。アプローチ:

<code class="js">document.getElementById('clickme').onclick = function(e) {
  // e = Mouse click event
  var rect = e.target.getBoundingClientRect();
  var x = e.clientX - rect.left; // x position within the element
  var y = e.clientY - rect.top; // y position within the element
  console.log("Left? : " + x + " ; Top? : " + y + ".");
}</code>

使用法:

このコードは、getBoundingClientRect() メソッドを使用して、ドキュメントに対する要素の境界を取得します。次に、マウス イベントの clientX プロパティと clientY プロパティを使用して、要素内のマウスの位置が計算されます。

HTML と CSS:

コードをテストするには、次の HTML および CSS を含む要素:

<code class="html"><div id="clickme">
  Click Me -<br>
  (this box has margin-left: 100px; margin-top: 20px;)
</div></code>

<code class="css">#clickme {
  margin-top: 20px;
  margin-left: 100px;
  border: 1px solid black;
  cursor: pointer;
}</code>

「Click Me」要素をクリックすると、コンソールには要素の左上隅を基準としたマウスの位置が表示されます。この情報は、ペイント アプリケーション内でのマウスの動きやインタラクションを正確にキャプチャするために不可欠です。

以上がJavaScript ペイント アプリの要素に対するマウスの位置を取得するにはどうすればよいですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。