Получение текущей позиции курсора на выбранном объекте в Fabric.js - PullRequest
Новая
       7

Получение текущей позиции курсора на выбранном объекте в Fabric.js

0 голосов
/ 17 мая 2018

Я занимаюсь разработкой веб-приложения, которое включает функцию HTML canvas. Я использую Fabric.JS - http://fabricjs.com/ для визуализации объектов на нем. В Fabric.Js я могу реализовать прослушиватели событий для объекта, как в этой ссылке - http://fabricjs.com/.

Теперь я добавляю объект изображения на холст и реализую прослушиватель событий мыши для этого объекта изображения. При щелчке объекта изображения на холсте я хотел бы получить позицию (x, y) изображения, по которому щелкнули. Но он всегда возвращает ноль.

Я добавляю объект изображения на холст следующим образом: 

var imgInstance = new fabric.Image(js_left_temp_img, {
                        left: 0,
                        top: 0
                    });

                    imgInstance.scale(0.1)
                    imgInstance.selectable = false;
                    imgInstance.set('selectable', false)
                    $canvas.add(imgInstance);

Затем я настраиваю прослушиватель событий на объект изображения, подобный этому, и пытаюсь получить позицию щелчка объекта изображения, подобную этой. 

imgInstance.on('mousedown', function(e){
                        //alert('Image clicked')
                        console.log(e.target.left + " - " + e.target.top)

                    });

Когда я нажимаю на изображение, оно запускает событие, но левое и верхнее значения всегда возвращают ноль. Как я могу получить текущее нажатие левой и верхней или x и y позиции изображения в слушателе событий?

1 Ответ

0 голосов
/ 17 мая 2018

Использовать object.getLocalPointer ()

DEMO 

var canvas = new fabric.Canvas('canvas'),imgInstance;
canvas.on('object:selected', function(e) {
});

fabric.Image.fromURL('http://fabricjs.com/assets/pug.jpg', function(img) {
  img.set({
    left: 0,
    top: 0,
    scaleX: 0.3,
    scaleY: 0.3
  });
  canvas.add(img);
  img.on('mousedown',function(options){
   var pointer = this.getLocalPointer(options.e);
   console.log(pointer);
  })
});
canvas{
 border:2px solid #000;
}
<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>
...