右键单击 fabric js select 对象

Question

我试图使单击鼠标右键的行为与单击对象时的鼠标左键相同。这是我一直在玩的代码：

$(".upper-canvas").bind('contextmenu', function (env) {
    canvas.on('mouse:over', function(e) {
        canvas.setActiveObject(e.target);
    });
    return false;
})

但它的行为并不像我想象的那样。右键单击某个对象后，它不会 select 该对象，但随后会连续 select 悬停元素。

我可能天真地假设悬停事件只会在右键单击时激活一次。

Answer 1

只要您只处理对象，这应该可行：

$(".upper-canvas").bind('contextmenu', function(ev) {
    var pointer = canvas.getPointer(ev.originalEvent);
    var objects = canvas.getObjects();
    for (var i = objects.length - 1; i >= 0; i--) {
        if (objects[i].containsPoint(pointer)) {
            canvas.setActiveObject(objects[i]);
            break;
        }
    }

    if (i < 0) {
        canvas.deactivateAll();
    }

    canvas.renderAll();

    ev.preventDefault();
    return false;
});

当用户在 canvas 中单击鼠标右键时，它会获取单击的 (x, y) 坐标。然后它会查看 canvas 和 select 中的所有对象，如果它包含该点。我相信 fabric 在对象列表中以相反的顺序保留 z-order，所以这应该尊重它，因为它向后遍历列表。如果点击没有 select 任何对象，那么它将删除 select 任何 select 对象。最后，它阻止了 default 和 returns false 以防止发生正常的右键单击弹出。

这应该适用于对象，但它可能无法很好地适用于组。

右键单击 fabric js select 对象

fabric js select object on right click

events

mouseevent

fabricjs