如何在 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中文网其他相关文章！