Fabric.js鼠标右键单击

Question

有没有办法在Fabric.js画布上接收鼠标右键单击事件？

以下代码仅在单击鼠标左键时有效：

canvas.observe('mouse:down', function(){console.log('mouse down'));

Answer 1

注意：上面的大多数答案都已过时；此答案适用于最新的Fabric版本2.7.0

只需为Fabric canvas启用触发鼠标右键/中键事件

在画布中触发鼠标右键和鼠标中键事件的配置可以在here for fireRightClick和here for fireMiddleClick中找到，并且默认情况下设置为false。这意味着鼠标右键和中键单击事件在默认情况下是禁用的。右击时停止快捷菜单在画布上显示的参数stopContextMenu可以在here找到

只需在创建画布时设置值，即可启用这些功能：

var canvas = new fabric.Canvas('canvas', {
  height: height,
  width: width,
  fireRightClick: true,  // <-- enable firing of right click events
  fireMiddleClick: true, // <-- enable firing of middle click events
  stopContextMenu: true, // <--  prevent context menu from showing
});

现在，您的mousedown事件将为所有单击触发，您可以通过使用事件上的按钮标识符来区分它们：

对于画布：

canvas.on('mouse:down', (event) => {
    if(event.button === 1) {
        console.log("left click");
    }
    if(event.button === 2) {
        console.log("middle click");
    }
    if(event.button === 3) {
        console.log("right click");
    }
}

对于对象：

object.on('mousedown', (event) => {
    if(event.button === 1) {
        console.log("left click");
    }
    if(event.button === 2) {
        console.log("middle click");
    }
    if(event.button === 3) {
        console.log("right click");
    }
}

当点击对象时，你可以通过event.e到达“真正的”鼠标dom事件：

if(event.button === 3){
  console.log(event.e);
}

Answer 2

我通过扩展fabric.Canvas类实现了右键单击。看一下_onMouseDown方法。

基本上，在fabricjs中对象的鼠标右键按下事件在默认情况下是禁用的。

Answer 3

如果您希望处理右键单击(在canvas或其对象上)，则在上方-canvas元素上设置上下文菜单listener。使用画布方法findTarget，您可以检查是否有任何目标被单击，如果是，您可以检查目标的类型。

let scope = this;
jQuery(".upper-canvas").on('contextmenu', function (options: any) {
    let target: any = scope.canvas.findTarget(options, false);
    if (target) {
        let type: string = target.type;
        if (type === "group") {
            console.log('right click on group');
        } else {
            scope.canvas.setActiveObject(target);
            console.log('right click on target, type: ' + type);
        }
    } else {
        scope.canvas.discardActiveObject();
        scope.canvas.discardActiveGroup();
        scope.canvas.renderAll();
        console.log('right click on canvas');
    }
    options.preventDefault();
});