Question

我试图抓住用户点击组内的图片。层次结构如下

var canvas = new fabric.Canvas('c');
var group = new fabric.Group();
var myImage;
new fabric.Image.fromURL(url, function(oImg){
    myImage = oImg
    group.add(myImage);
    canvas.add(group);
    group.selectable = false;
    canvas.renderAll();
});


myImage.on('mouse:down', function (e){
    console.log(e);
});

但它不起作用。如果将我的代码更改为

canvas.on('mouse:down' function (e){

    console.log(e);
});

它有效，但我希望能够限制图像上的点击次数。我做错了吗？

Answer 1

我认为canvas需要将myImage添加为canvas.add(myImage);。因此，以下代码将成功运行。

var canvas = new fabric.Canvas('c');
var group = new fabric.Group();
var myImage;
new fabric.Image.fromURL(url, function(oImg){
    myImage = oImg
    canvas.add(myImage);
    group.addWithUpdate(myImage);
    canvas.add(group);
    group.selectable = false;
    myImage.on('mouse:down', function (e){
        console.log(e);
    });
    canvas.renderAll();
});

Answer 2

我相信Fabric.Object的事件是＆＃39;事件：mousedown＆＃39;或者只是＆＃39; mousedown＆＃39; （没有冒号）

请参阅fabric object docs

fabricjs组，不通过鼠标捕获事件

2 个答案: