Fabric.js的 Canvas有个mouse:down 事件，通过它我们可以监听到鼠标按下的行为。不过该事件只对鼠标左键其作用，如果是右键按下则不会触发该事件。

而 Canvas上又无法直接监听 contextmenu事件，所以想要实现右键点击响应就需要换种方式实现。

1，实现原理

Fabric.js 的 Canvas初始化完毕后，会自动在其上方覆盖一个 class名为upper-canvas的 canvas。

我们可以在上层这个 canvas上添加 contextmenu事件监听。当右键按下时会触发该事件，然后将点击的坐标转换成底下实际的 canvas里的坐标(坐标需要转换是因为下面 canvas 可能会被移动，缩放)。

2，效果图

默认情况下，鼠标左键点击对象即可选择中该对象。

这里增加个右键选中功能，即通过右键同样可以选中对象。

3，样例代码

canvas {

border: 1px dashed black;

}

var canvas;

window.onload = function() {

canvas = new fabric.Canvas('canvas');

var rect1 = new fabric.Rect({top: 50, left: 50, width: 70, height: 70, fill: 'red'});

canvas.add(rect1);

var rect2 = new fabric.Rect({top: 50, left: 150, width: 70, height: 70, fill: 'red'});

canvas.add(rect2);

var rect3 = new fabric.Rect({top: 50, left: 250, width: 70, height: 70, fill: 'red'});

canvas.add(rect3);

//在canvas上层对象上添加右键事件监听

$(".upper-canvas").contextmenu(onContextmenu);

}

//右键点击事件响应

var onContextmenu = function(event) {

var pointer = canvas.getPointer(event.originalEvent);

var objects = canvas.getObjects();

for (var i = objects.length - 1; i >= 0; i--) {

var object = objects[i];

//判断该对象是否在鼠标点击处

if (canvas.containsPoint(event, object)) {

//选中该对象

canvas.setActiveObject(object);

}

}

//阻止系统右键菜单

event.preventDefault();

return false;

}

附：添加一个自定义的右键菜单

1，实现原理

这里我们使用一个专门的第三方菜单组件(contextMenu)来实现，在上面的右键点击响应中将菜单弹出即可。

2，效果图

(1)当鼠标在对像上按下右键时，会出现个菜单。

(2)点击菜单里的“删除”项，即可将对象删除。

3，样例代码

canvas {

border: 1px dashed black;

}

var canvas;

//菜单项

var contextMenuItems;

window.onload = function() {

canvas = new fabric.Canvas('canvas');

var rect1 = new fabric.Rect({top: 50, left: 50, width: 70, height: 70, fill: 'red'});

canvas.add(rect1);

var rect2 = new fabric.Rect({top: 50, left: 150, width: 70, height: 70, fill: 'red'});

canvas.add(rect2);

var rect3 = new fabric.Rect({top: 50, left: 250, width: 70, height: 70, fill: 'red'});

canvas.add(rect3);

//在canvas上层对象上添加右键事件监听

$(".upper-canvas").contextmenu(onContextmenu);

//初始化右键菜单

$.contextMenu({

selector: '#contextmenu-output',

trigger: 'none',

build: function($trigger, e) {

//构建菜单项build方法在每次右键点击会执行

return {

callback: contextMenuClick,

items: contextMenuItems

};

},

});

}

//右键点击事件响应

function onContextmenu(event) {

var pointer = canvas.getPointer(event.originalEvent);

var objects = canvas.getObjects();

for (var i = objects.length - 1; i >= 0; i--) {

var object = objects[i];

//判断该对象是否在鼠标点击处

if (canvas.containsPoint(event, object)) {

//选中该对象

canvas.setActiveObject(object);

//显示菜单

showContextMenu(event, object);

continue;

}

}

//阻止系统右键菜单

event.preventDefault();

return false;

}

//右键菜单项点击

function showContextMenu(event, object) {

//定义右键菜单项

contextMenuItems = {

"delete": {name: "删除", icon: "delete", data: object},

};

//右键菜单显示位置

var position = {

x: event.clientX,

y: event.clientY

}

$('#contextmenu-output').contextMenu(position);

}

//右键菜单项点击

function contextMenuClick(key, options) {

if(key == "delete") {

//得到对应的object并删除

var object = contextMenuItems[key].data;

canvas.remove(object);

}

}