Fabric.js 右键菜单，让画布操作更便捷！

使用 Fabric.js 创建右键菜单

1. 创建 Canvas 元素

首先，您需要创建一个 Canvas 元素，以便您可以在其中绘制图形。您可以使用以下代码来创建 Canvas 元素：

<canvas id="canvas" width="500" height="500"></canvas>

2. 初始化 Fabric.js

接下来，您需要初始化 Fabric.js。您可以使用以下代码来初始化 Fabric.js：

const canvas = document.getElementById('canvas');
const fabric = new fabric.Canvas('canvas');

3. 创建右键菜单

现在，您可以创建右键菜单了。您可以使用以下代码来创建右键菜单：

const menu = new fabric.ContextMenu(canvas);

4. 添加菜单项

接下来，您需要向右键菜单添加菜单项。您可以使用以下代码向右键菜单添加菜单项：

menu.addMenuItem({
  label: '复制',
  click: function() {
    const activeObject = canvas.getActiveObject();
    if (activeObject) {
      activeObject.clone(function(clonedObj) {
        canvas.add(clonedObj);
      });
    }
  }
});

menu.addMenuItem({
  label: '粘贴',
  click: function() {
    canvas.paste();
  }
});

menu.addMenuItem({
  label: '删除',
  click: function() {
    const activeObject = canvas.getActiveObject();
    if (activeObject) {
      canvas.remove(activeObject);
    }
  }
});

5. 绑定右键菜单

最后，您需要将右键菜单绑定到 Canvas 元素。您可以使用以下代码将右键菜单绑定到 Canvas 元素：

canvas.on('mouse:down', function(e) {
  if (e.button === 2) {
    menu.show(e.pointer);
  }
});

总结

通过以上步骤，您就可以在 Fabric.js 中创建右键菜单了。右键菜单可以帮助您更轻松地进行画布操作，以便您更轻松地编辑和处理画布上的图形。