我正在开发一个涉及 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 位置?
最佳答案
演示
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>
关于javascript - 在 Fabric.js 中获取被点击对象的当前光标位置,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/50388770/