Fabric.js 鼠標右鍵單擊

Question

有沒有辦法在 Fabric.js 畫布上接收鼠標右鍵單擊事件？

以下代碼僅適用於左鍵單擊：

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

Answer 1

注意：上面的大多數答案都已過時； 此答案適用於最新的 Fabric 版本 2.7.0

---

只需為您的 Fabric 畫布啟用觸發右/中單擊事件

可以在此處為fireRightClick和此處為fireMiddleClick找到用於在畫布中觸發右鍵單擊和中間單擊事件的配置，並且默認設置為false 。 這意味着右鍵和中鍵單擊事​​件默認是禁用的。 可以在此處找到用於在右鍵單擊時停止上下文菜單顯示在畫布上的參數stopContextMenu

您可以通過在創建畫布時設置值來啟用這些：

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

如果要處理右鍵單擊（在畫布或其對象上），請在上畫布元素上設置上下文菜單偵聽器。 使用畫布方法 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

我這樣做的方法是監聽整個畫布上的右鍵單擊事件，並將單擊事件的 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 5

這是我所做的，它利用了一些內置的織物對象檢測代碼：

$('.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
        }
    });
});