Fabric.js 鼠标右键单击

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

以下代码仅适用于左键单击：

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

NOTE: 上面的大多数答案都已经过时了；此答案适用于最新的 Fabric 版本 2.7.0

只需为您的 Fabric 画布启用右键/中键单击事​​件

可以找到在画布中触发右键单击和中键单击事​​件的配置这里是为了fireRightClick https://github.com/fabricjs/fabric.js/blob/master/src/canvas.class.js#L327 and 这里是为了fireMiddleClick https://github.com/fabricjs/fabric.js/blob/master/src/canvas.class.js#L335并设置为false默认情况下。这意味着默认情况下禁用右键和中键单击事​​件。 参数stopContextMenu可以找到右键单击时停止上下文菜单显示在画布上的方法here https://github.com/fabricjs/fabric.js/blob/master/src/canvas.class.js#L319

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

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