在 Canvas 中单击形状（fabric.js 的对象）时显示自定义上下文菜单

Question

我正在使用 fabric.js 在 canvas 上创建形状。右键单击我要显示基于所选形状的上下文菜单的形状。我能够捕获右键单击事件并找到右键单击完成的对象。但我不知道如何从 javascript（类似于 contextmenu.show）显示上下文菜单。下面是我用来查找对象的代码。有哪位大侠帮忙啊

$('.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;
             // here need to set a customized context menu and show it
             // but dont now how to do so. 
        }
    });
});

Answer 1

使用 jquery-ui-contextmenu 您可以在 canvas 上实例化上下文菜单并根据目标修改菜单条目。

（请注意，代码未经测试，但它应该显示了想法。请查看 the API docs 了解详细信息。）

$(document).contextmenu({
    delegate: ".upper-canvas",
    menu: [...],  // default menu
    beforeOpen: function (event, ui) {
        var clickPoint = new fabric.Point(event.offsetX, event.offsetY);
        // find the clicked object and re-define the menu or
        // optionally return false, to prevent opening the menu:
//      return false;
        // En/disable single entries:
        $(document).contextmenu("enableEntry", ...);
        // Show/hide single entries:
        $(document).contextmenu("showEntry", ...);
        // Redefine the whole menu:
        $(document).contextmenu("replaceMenu", ...); 
    },
    select: function(event, ui) {
        // evaluate selected entry...
    }
});

在 Canvas 中单击形状（fabric.js 的对象）时显示自定义上下文菜单

Showing Customized Context Menu on clicking shapes(objects of fabric.js) in Canvas

javascript

jquery

html5-canvas

fabricjs

jquery-ui-contextmenu