javascript - 在 Fabric.js 中获取被点击对象的当前光标位置

Question

我正在开发一个涉及 HTML Canvas 功能的 Web 应用程序。我正在使用 Fabric.JS - http://fabricjs.com/在其上渲染对象。在 Fabric.Js 中，我可以实现对象的事件监听器，如此链接- http://fabricjs.com/ .

我现在正在向 Canvas 添加一个图像对象，并为该图像对象实现鼠标事件监听器。单击 Canvas 上的图像对象时，我想检索单击图像的位置 (x, y)。但它总是返回零。

我像这样将图像对象添加到 Canvas 中:

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 位置？

Answer 1

使用object.getLocalPointer()

演示

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>