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);

}

}

總結

以上是生活随笔為你收集整理的html添加鼠标右键菜单,Fabric.js - 添加鼠标右键点击事件响应（附：右键菜单）...的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。