fabricjs中对象的上下文菜单答案

【问题标题】：Contextmenu on the objects in fabricjsfabricjs中对象的上下文菜单
【发布时间】：2016-03-11 04:42:54
【问题描述】：

你能帮我在织物对象上创建一个上下文菜单吗？我用谷歌搜索了很多，但找不到确切的解决方案。我在织物上创建了如下两个对象。如何将上下文菜单绑定到结构对象？小提琴链接：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
}));

提前致谢。

【问题讨论】：

叹息...你看起来有多努力？ :-( 我用谷歌搜索了“fabricJS 上下文菜单”，this relevant Stackoverflow post 创建 FabricJS 上下文菜单就在最上面。
Fabric.js right mouse click的可能重复

标签： javascript canvas contextmenu fabricjs

【解决方案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,
    });
}

【讨论】：