Question

我正在开发一个涉及HTML画布功能的Web应用程序。我正在使用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位置？

Answer 1

使用object.getLocalPointer()

<强> 样本

＆＃13;

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);
  })
});

＆＃13;

canvas{
 border:2px solid #000;
}

＆＃13;

<script src="https://rawgit.com/kangax/fabric.js/master/dist/fabric.js"></script>
<canvas id='canvas' width=500 height=400>

＆＃13;

获取Fabric.js中单击对象的当前光标位置

1 个答案: