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

时间:2016-08-05 11:20:19

标签: javascript jquery html5-canvas fabricjs jquery-ui-contextmenu

我正在使用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. 
        }
    });
});

1 个答案:

答案 0 :(得分:2)

使用jquery-ui-contextmenu可以在画布上实例化上下文菜单,并根据目标修改菜单项。

(请注意,代码未经测试,但应显示出来。请查看the API docs了解详细信息。)

import itertools
object_list = ['distance', 'alpha1', 'alpha2', 'gamma']
new_list = list(itertools.combinations(object_list, 2))