获取 canvas 中的光标位置

Question

我试图在单击时获取 canavs 中的光标位置，但我的控制台弹出以下错误

Uncaught TypeError: canvas.getBoundingClientRect is not a function

这是我的代码：

$(".canvas-wrapper").click(function getCursorPosition(canvas, event) {
  var rectangle = canvas.getBoundingClientRect();
    var x = event.clientX - rectangle.left;
    var y = event.clientY - rectangle.top;
    console.log("x: " + x + " y: " + y);
});

我简直无法理解哪里出了问题。有帮助吗？

Answer 1

jQuery 传递给回调函数的第一个参数不是元素而是事件对象。可以通过 this.

访问该元素

来自jQuery docs：

handler

Type: Function( Event eventObject )
A function to execute each time the event is triggered.

您可以将代码更改为：

$(".canvas-wrapper").click(function getCursorPosition(event) {
  var rectangle = this.getBoundingClientRect();
    var x = event.clientX - rectangle.left;
    var y = event.clientY - rectangle.top;
    console.log("x: " + x + " y: " + y);
});

获取 canvas 中的光标位置

Get cursor position in canvas

javascript

jquery

fabricjs

handler