在fabric.js中如何获取鼠标坐标相对于背景图像的位置，而不是canvas.getPointer

Question

如何获取鼠标指向的位置相对于背景图像的绝对坐标。

我有一张 1024 X 1035 的图像，缩放到 400x400 的画布

我想获取鼠标坐标相对于背景图像的位置（不是canvas.getPointer()）

    fabric.Image.fromURL(backgroundImageUrl, function(img) {
     // add background image
     canvas.setBackgroundImage(img, function() {
     canvas.requestRenderAll();
     imgWidth = img.width * img.scaleX;
     imgHeight = img.height * img.scaleY;
     }, {
        scaleX: canvas.width / img.width,
        scaleY: canvas.height / img.height
     });
  });

这是一个小提琴的链接来代表我所做的 https://jsfiddle.net/fnvwjxpu/34/

Answer 1

为什么不将背景图像转换为图像对象？我认为实现它的方法是从画布的顶部和左侧值中减去对象的顶部和左侧值。获得这些值后，您可以通过将其除以其比例值来找到原始图像上的鼠标坐标。

canvas.on('mouse:move', function(opt) {
    console.log('Absolute X coordinate: ' + opt.e.layerX);
    console.log('Absolute Y coordinate: ' + opt.e.layerY);

    if (opt.target !== null) {
        var objectMouseXRelativePosition = opt.e.layerX - opt.target.get("top");
        var objectMouseYRelativePosition = opt.e.layerY - opt.target.get("left");

        var objectMouseXAbsolutePosition = objectMouseXRelativePosition / opt.target.get("scaleX");
        var objectMouseYAbsolutePosition = objectMouseYRelativePosition / opt.target.get("scaleY");

        console.log('Current object X coordinate: ' + objectMouseXRelativePosition);
        console.log('Current object Y coordinate: ' + objectMouseYRelativePosition);

        console.log('Coordinate X on the original image: ' + objectMouseXAbsolutePosition);
        console.log('Coordinate Y on the original image: ' + objectMouseYAbsolutePosition);
    }
});

您可能需要进行一些检查，确保它没有设置高于原始图像的值，因为此计算是近似的。

请检查此工作示例：https://codesandbox.io/s/stackoverflow-60364941-fabric-js-362-0pc4d