Fabric.js中获取图片对象点击位置返回0的问题求助

嘿，我明白你遇到的问题了——你现在打印的e.target.left和e.target.top是图片对象本身在画布上的左上角定位坐标（也就是你初始化时设置的left: 0, top: 0），并不是点击时的鼠标位置，所以自然一直返回0。下面给你两种常见需求的解决方案：

1. 获取点击点相对于画布的全局坐标 #

在Fabric.js的鼠标事件对象e里，自带一个pointer属性，它的x和y就是鼠标点击时相对于画布左上角的准确坐标：

imgInstance.on('mousedown', function(e){
  const canvasClickX = e.pointer.x;
  const canvasClickY = e.pointer.y;
  console.log(`点击位置（画布全局坐标）：${canvasClickX} - ${canvasClickY}`);
});

2. 获取点击点相对于图片自身的局部坐标 #

如果你需要的是点击点在图片内部的相对位置（比如相对于图片左上角的坐标，不受图片缩放、旋转的影响），可以用Fabric.js提供的toLocalPoint方法，把画布坐标转换为图片的局部坐标：

imgInstance.on('mousedown', function(e){
  // this 指向当前的图片对象
  const localPoint = this.toLocalPoint(e.pointer);
  console.log(`点击位置（图片局部坐标）：${localPoint.x} - ${localPoint.y}`);
});

补充：如果需要确认图片对象的当前画布位置 #

如果你其实是想获取图片对象在画布上的最新定位（比如后续可能拖拽或修改过图片位置），那你的原代码逻辑是对的，但要注意：

• 你初始化时设置了left: 0, top: 0，如果没有修改过图片位置，这两个值当然会一直是0
• 当你通过拖拽、代码调用set({left: ..., top: ...})等方式修改图片位置后，e.target.left和e.target.top会返回最新的坐标值

另外提一句，你代码里重复设置了selectable: false，只需要一次就够啦，可以简化成imgInstance.selectable = false;。

内容的提问来源于stack exchange，提问作者Wai Yan Hein