В fabri c. js как получить координаты мыши относительно фонового изображения, а не canvas.getPointer - PullRequest
Новая
       62

В fabri c. js как получить координаты мыши относительно фонового изображения, а не canvas.getPointer

0 голосов
/ 23 февраля 2020

Как получить абсолютные координаты того, где указана мышь относительно фонового изображения.

У меня есть изображение 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/

1 Ответ

1 голос
/ 24 февраля 2020

Почему бы не преобразовать фоновое изображение в объект изображения? Я думаю, что способ достичь этого - вычитать верхнее и левое значение объекта из верхнего, левого значений холста. Когда у вас есть эти значения, вы можете найти координату мыши на исходном изображении, разделив ее на значение масштаба. 

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

...