Fabric.js鼠标右键单击

Question

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

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

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

Answer 1

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

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

Answer 2

我这样做的方法是在整个画布上侦听右键单击事件，并将click事件的x，y坐标与当前位于给定位置的对象进行匹配。这个解决方案感觉有点像黑客，但嘿，它的工作原理！

$('#my_canvas').bind('contextmenu', function (env) {
    var x = env.offsetX;
    var y = env.offsetY;
    $.each (canvas._objects, function(i, e) {
        // e.left and e.top are the middle of the object use some "math" to find the outer edges
        var d = e.width / 2;
        var h = e.height / 2;
        if (x >= (e.left - d) && x <= (e.left+d)) {
            if(y >= (e.top - h) && y <= (e.top+h)) {
                console.log("clicked canvas obj #"+i);
                //TODO show custom menu at x, y
                return false; //in case the icons are stacked only take action on one.
            }
        }
    });
    return false; //stops the event propigation
});

Answer 3

如果要处理右键单击（在画布或其对象上），请在upper-canvas元素上设置上下文菜单侦听器。使用canvas方法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();
});

Answer 4

这就是我所做的，它使用了一些内置的结构对象检测代码：

$('.upper-canvas').bind('contextmenu', function (e) {
    var objectFound = false;
    var clickPoint = new fabric.Point(e.offsetX, e.offsetY);

    e.preventDefault();

    canvas.forEachObject(function (obj) {
        if (!objectFound && obj.containsPoint(clickPoint)) {
            objectFound = true;
            //TODO: whatever you want with the object
        }
    });
});

Answer 5

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

---

只需为Fabric画布启用右/中间点击事件即可

可以在画布中找到触发右键单击和中间单击事件的配置here for fireRightClick和here for fireMiddleClick，并默认设置为false。这意味着默认情况下禁用右键和中键单击事​​件。

您可以通过在创建画布时设置值来启用它们：

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

现在，您的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");
    }
}

---

要防止上下文菜单显示或阻止冒泡/传播到画布后面的其他元素，您可以添加：

if(event.button === 3){
    // event.e is the "real" DOM mouse event
    event.e.preventDefault();
    event.e.stopPropagation();
}

这将允许您在整个结构应用程序中使用右键和/或中键单击。