javascript - 如何在鼠标右键的 "contextmenu"事件上选择对象

Question

我正在尝试在单击鼠标右键时添加自定义上下文菜单，以便用户可以删除对象。

我已经设法访问“contextmenu”事件，但要触发removeObject函数，我必须使对象处于事件状态。

const upperCanvas = document.getElementsByClassName("upper-canvas")[0];

upperCanvas.addEventListener("contextmenu", function(e) {
    e.preventDefault();
    canvas.selection = true;
});

之后我尝试调用 canvas.fire('mouse:click') 但似乎不起作用。

Answer 1

为 Canvas 实例设置 fireRightClick: true 并在鼠标弹起事件中检查按钮值 3(用于右键单击)。然后使用canvas.remove(object)删除目标。

var canvas = new fabric.Canvas('c', {
  stopContextMenu: true,
  fireRightClick: true
});
var textbox = new fabric.Textbox('FABRICJS')
canvas.add(textbox)
canvas.on('mouse:up', function(options) {
  if (options.button == 3) {
    canvas.remove(options.target);
  }
})

canvas{
  border:1px solid;
}

<script src="http://cdnjs.cloudflare.com/ajax/libs/fabric.js/2.6.0/fabric.js"></script>
<canvas id='c' width=400 height=400></canvas>