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

为画布实例设置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>

如何在鼠标右键的“ contextmenu”事件上选择对象

1 个答案: