时间戳

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

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

问题描述

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

我有一个 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/

标签： htmlhtml5-canvasfabricjs

解决方案

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

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

推荐阅读