javascript - fabricjs 中对象的上下文菜单

Question

你能帮我在织物对象上创建一个上下文菜单吗？我用谷歌搜索了很多但找不到确切的解决方案。我在织物上创建了两个对象，如下所示。如何将上下文菜单绑定(bind)到结构对象？ fiddle 链接:http://jsfiddle.net/fabricjs/S9sLu/

canvas.add(new fabric.Rect({ 
  left: 100, 
  top: 100, 
  width: 50, 
  height: 50, 
  fill: '#faa', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

canvas.add(new fabric.Circle({ 
  left: 300, 
  top: 300, 
  radius: 50, 
  fill: '#9f9', 
  originX: 'left', 
  originY: 'top',
  centeredRotation: true
}));

提前致谢。

Answer 1

我正在使用 contextMenu.js ，这应该让你开始:

function contextMenu () {
    var ctxTarget = null;

    var menu = [{
        name: 'Select Object',
        img: '',
        title: 'Select Object',
        fun: function (o, jqEvent) {
            canvas.setActiveObject(ctxTarget);
            console.log(ctxTarget);
        }
    }];

    $('.upper-canvas').on('contextmenu', function (e) {
        e.preventDefault();
        ctxTarget = canvas.findTarget(e.originalEvent);
    });

    $('.upper-canvas').contextMenu(menu, {
        triggerOn: 'contextmenu',
        closeOnClick: true,
    });
}