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

Question

我使用fabric.js在画布上创建形状。右键单击我想要根据所选形状显示上下文菜单的形状。我可以捕获右键单击事件并找到右键单击完成的对象。但我不知道如何显示一个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您可以在画布上实例化上下文菜单，并根据目标修改菜单条目。

（请注意，代码是未经测试，但它应该表现出的主意。看一看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... 
    } 
});