本文簡介
Fabric.js 默認沒提供 鼠標右鍵事件，只有 鼠標按鍵點擊 、鼠標按鍵抬起 、鼠標移動 等事件。
但在工作中有可能需要用到 “右鍵” 事件，比如 “右鍵菜單” 。所以就有了本文。
本文主要關注 Fabric.js 的主要 api 有：
-
fireRightClick：允許右鍵點擊 -
stopContextMenu：禁用默認右鍵菜單 -
mouse:down：鼠標點擊事件
file
如果不知道 Fabric.js 的同學，可以看 《Fabric.js 從入門到___》
本案例是使用原生方式開發，不基于 Vue 、React 等框架，所以不用太擔心運行環境等問題。
案例代碼放了在文末~
環境和版本
Chrome瀏覽器版本：96.0.4664.45
Fabric.js版本：4.6.0
思路
先說說需求：
- 右鍵單擊元素，彈出菜單；
- 彈出菜單分4種情況（菜單在鼠標右側，菜單在鼠標左側，菜單在鼠標上方，菜單在鼠標下方）；
- 左鍵單擊畫布其他地方，隱藏菜單；
實現思路：
- 創建畫布；
- 創建 “菜單” 的DOM元素；
- 去官網查找 “右鍵相關事件”；
- 右鍵單擊在元素上，根據鼠標離畫布邊緣的距離，計算菜單要顯示的位置；
- 左鍵單擊在畫布上，隱藏菜單；
實現
查文檔
在上面的思路中，其實難點只有 “右鍵相關事件” 。
file
在 對象相關的文檔 里，關于鼠標的事件好像沒有右鍵，稍微沾邊點的就是鼠標點擊（這里我選了 mousedown）。
于是我去 畫布的文檔 里找了下，發現這兩個屬性：
-
fireRightClick：畫布是否可以觸發右鍵事件 -
stopContextMenu：禁止默認右鍵菜單
哈哈哈哈，發達了~
file
經我仔細觀察，發現 mouse:down 事件里有個 button 屬性：
-
左鍵：
button的值為 1 -
右鍵：
button的值為 3 -
中鍵（也就是點擊滾輪），
button的值為 2，前提需要設置fireMiddleClick: true
動手開發
布局
<style>
/* 容器，相對定位 */
.box {
position: relative;
}
/* 畫布，給個邊框 */
#canvas {
border: 1px solid #ccc;
}
/* 菜單 */
.menu-x {
visibility: hidden; /* 隱藏菜單 */
z-index: -100;
position: absolute;
top: 0;
left: 0;
box-sizing: border-box;
border-radius: 4px;
box-shadow: 0 0 4px rgba(0, 0, 0, 0.3);
background-color: #fff;
}
/* 菜單每個選項 */
.menu-li {
box-sizing: border-box;
padding: 4px 8px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
/* 鼠標經過的選項，更改背景色 */
.menu-li:hover {
background-color: antiquewhite;
}
/* 第一個選項，頂部兩角是圓角 */
.menu-li:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* 最后一個選項，底部兩角是圓角，底部不需要邊框 */
.menu-li:last-child {
border-bottom: none;
border-bottom-left-radius: 4px;
border-bottom-right-radius: 4px;
}
</style>
<!-- 容器（相對定位） -->
<div class="box">
<!-- 畫布 -->
<canvas id="canvas" width="600" height="600"></canvas>
<!-- 右鍵菜單（絕對定位，且默認是隱藏的） -->
<div
id="menu"
class="menu-x"
>
<div class="menu-li">什么都不做</div>
<div class="menu-li">什么都不做</div>
<div class="menu-li">什么都不做</div>
<div class="menu-li">什么都不做</div>
<div class="menu-li" onclick="delEl()">刪除</div>
</div>
</div>
file
此時的效果如上圖所示。
初始化畫布，并生成圖形
<script>
// 文檔加載后執行
window.onload = function() {
// 輸出當前 fabric 版本
console.log(`Facrib.js版本：${fabric.version}`)
// 初始化畫布
init()
// 禁止在菜單上的默認右鍵事件
menu.oncontextmenu = function(e) {
e.preventDefault()
}
}
// 初始化
function init() {
canvas = new fabric.Canvas('canvas', {
fireRightClick: true, // 啟用右鍵，button的數字為3
stopContextMenu: true, // 禁止默認右鍵菜單
})
// 矩形
const rect1 = new fabric.Rect({
left: 10,
top: 510,
fill: 'orange',
width: 40,
height: 40
})
// 圓角矩形
const rect2 = new fabric.Rect({
left: 510,
top: 10,
fill: 'pink',
width: 40,
height: 40,
rx: 10, // 圓角x
ry: 10, // 圓角y
})
// 圓形
const circle = new fabric.Circle({
radius: 30, // 半徑
fill: 'green',
left: 20,
top: 20,
})
// 三角形
let triangle = new fabric.Triangle({
width: 80, // 底邊寬度
height: 100, // 底邊到定點的距離
fill: 'blue',
left: 500,
top: 480
})
// 將矩形添加到畫布中
canvas.add(rect1, rect2, circle, triangle)
}
</script>
file
添加點擊事件（判斷右鍵）
<script>
// 省略上面的部分代碼
function init() {
// 省略部分代碼......
// 將矩形添加到畫布中
canvas.add(rect1, rect2, circle, triangle)
// 按下鼠標
canvas.on('mouse:down', canvasOnMouseDown)
}
// 鼠標在畫布上的點擊事件
function canvasOnMouseDown(opt) {
// 判斷：右鍵，且在元素上右鍵
// opt.button: 1-左鍵；2-中鍵；3-右鍵
// 在畫布上點擊：opt.target 為 null
if (opt.button === 3 && opt.target) {
// 獲取當前元素
activeEl = opt.target
menu.domReady = function() {
console.log(123)
}
// 顯示菜單，設置右鍵菜單位置
// 獲取菜單組件的寬高
const menuWidth = menu.offsetWidth
const menuHeight = menu.offsetHeight
// 當前鼠標位置
let pointX = opt.pointer.x
let pointY = opt.pointer.y
// 計算菜單出現的位置
// 如果鼠標靠近畫布右側，菜單就出現在鼠標指針左側
if (canvas.width - pointX <= menuWidth) {
pointX -= menuWidth
}
// 如果鼠標靠近畫布底部，菜單就出現在鼠標指針上方
if (canvas.height - pointY <= menuHeight) {
pointY -= menuHeight
}
// 將菜單展示出來
menu.style = `
visibility: visible;
left: ${pointX}px;
top: ${pointY}px;
z-index: 100;
`
} else {
hiddenMenu()
}
}
// 隱藏菜單
function hiddenMenu() {
menu.style = `
visibility: hidden;
left: 0;
top: 0;
z-index: -100;
`
activeEl = null
}
// 刪除元素
function delEl() {
canvas.remove(activeEl)
hiddenMenu()
}
</script>
file
上面的代碼中，通過 opt.target 是否為 null 來判斷當前點擊的對象。
opt.target === null ，就是點擊在畫布上（沒有點擊在圖形元素上）。
如果你的項目需求是右鍵點擊畫布也展示不同菜單，你可以修改上面代碼的判斷。
代碼倉庫
推薦
如果本文內容對你有所幫助，也請你幫我點個贊唄~
本文由博客一文多發平臺 OpenWrite 發布！
