本文簡介
Fabric.js 默認(rèn)沒提供 鼠標(biāo)右鍵事件，只有 鼠標(biāo)按鍵點(diǎn)擊 、鼠標(biāo)按鍵抬起 、鼠標(biāo)移動 等事件灯变。
但在工作中有可能需要用到 “右鍵” 事件，比如 “右鍵菜單” 捅膘。所以就有了本文添祸。
本文主要關(guān)注 Fabric.js 的主要 api 有：
-
fireRightClick：允許右鍵點(diǎn)擊 -
stopContextMenu：禁用默認(rèn)右鍵菜單 -
mouse:down：鼠標(biāo)點(diǎn)擊事件
file
如果不知道 Fabric.js 的同學(xué)，可以看 《Fabric.js 從入門到___》
本案例是使用原生方式開發(fā)篓跛，不基于 Vue 膝捞、React 等框架，所以不用太擔(dān)心運(yùn)行環(huán)境等問題愧沟。
案例代碼放了在文末~
環(huán)境和版本
Chrome瀏覽器版本：96.0.4664.45
Fabric.js版本：4.6.0
思路
先說說需求：
- 右鍵單擊元素蔬咬，彈出菜單；
- 彈出菜單分4種情況（菜單在鼠標(biāo)右側(cè)沐寺，菜單在鼠標(biāo)左側(cè)林艘，菜單在鼠標(biāo)上方，菜單在鼠標(biāo)下方）混坞；
- 左鍵單擊畫布其他地方狐援，隱藏菜單；
實(shí)現(xiàn)思路：
- 創(chuàng)建畫布究孕；
- 創(chuàng)建 “菜單” 的DOM元素啥酱；
- 去官網(wǎng)查找 “右鍵相關(guān)事件”；
- 右鍵單擊在元素上厨诸，根據(jù)鼠標(biāo)離畫布邊緣的距離镶殷，計(jì)算菜單要顯示的位置；
- 左鍵單擊在畫布上微酬，隱藏菜單绘趋；
實(shí)現(xiàn)
查文檔
在上面的思路中，其實(shí)難點(diǎn)只有 “右鍵相關(guān)事件” 颗管。
file
在 對象相關(guān)的文檔 里陷遮，關(guān)于鼠標(biāo)的事件好像沒有右鍵，稍微沾邊點(diǎn)的就是鼠標(biāo)點(diǎn)擊（這里我選了 mousedown）垦江。
于是我去 畫布的文檔 里找了下帽馋，發(fā)現(xiàn)這兩個(gè)屬性：
-
fireRightClick：畫布是否可以觸發(fā)右鍵事件 -
stopContextMenu：禁止默認(rèn)右鍵菜單
哈哈哈哈，發(fā)達(dá)了~
file
經(jīng)我仔細(xì)觀察比吭，發(fā)現(xiàn) mouse:down 事件里有個(gè) button 屬性：
-
左鍵：
button的值為 1 -
右鍵：
button的值為 3 -
中鍵（也就是點(diǎn)擊滾輪）茬斧，
button的值為 2，前提需要設(shè)置fireMiddleClick: true
動手開發(fā)
布局
<style>
/* 容器梗逮，相對定位 */
.box {
position: relative;
}
/* 畫布项秉，給個(gè)邊框 */
#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;
}
/* 菜單每個(gè)選項(xiàng) */
.menu-li {
box-sizing: border-box;
padding: 4px 8px;
border-bottom: 1px solid #ccc;
cursor: pointer;
}
/* 鼠標(biāo)經(jīng)過的選項(xiàng)，更改背景色 */
.menu-li:hover {
background-color: antiquewhite;
}
/* 第一個(gè)選項(xiàng)慷彤，頂部兩角是圓角 */
.menu-li:first-child {
border-top-left-radius: 4px;
border-top-right-radius: 4px;
}
/* 最后一個(gè)選項(xiàng)娄蔼，底部兩角是圓角，底部不需要邊框 */
.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>
<!-- 右鍵菜單（絕對定位底哗，且默認(rèn)是隱藏的） -->
<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
此時(shí)的效果如上圖所示岁诉。
初始化畫布，并生成圖形
<script>
// 文檔加載后執(zhí)行
window.onload = function() {
// 輸出當(dāng)前 fabric 版本
console.log(`Facrib.js版本：${fabric.version}`)
// 初始化畫布
init()
// 禁止在菜單上的默認(rèn)右鍵事件
menu.oncontextmenu = function(e) {
e.preventDefault()
}
}
// 初始化
function init() {
canvas = new fabric.Canvas('canvas', {
fireRightClick: true, // 啟用右鍵跋选，button的數(shù)字為3
stopContextMenu: true, // 禁止默認(rèn)右鍵菜單
})
// 矩形
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, // 底邊到定點(diǎn)的距離
fill: 'blue',
left: 500,
top: 480
})
// 將矩形添加到畫布中
canvas.add(rect1, rect2, circle, triangle)
}
</script>
file
添加點(diǎn)擊事件（判斷右鍵）
<script>
// 省略上面的部分代碼
function init() {
// 省略部分代碼......
// 將矩形添加到畫布中
canvas.add(rect1, rect2, circle, triangle)
// 按下鼠標(biāo)
canvas.on('mouse:down', canvasOnMouseDown)
}
// 鼠標(biāo)在畫布上的點(diǎn)擊事件
function canvasOnMouseDown(opt) {
// 判斷：右鍵涕癣，且在元素上右鍵
// opt.button: 1-左鍵；2-中鍵前标；3-右鍵
// 在畫布上點(diǎn)擊：opt.target 為 null
if (opt.button === 3 && opt.target) {
// 獲取當(dāng)前元素
activeEl = opt.target
menu.domReady = function() {
console.log(123)
}
// 顯示菜單坠韩，設(shè)置右鍵菜單位置
// 獲取菜單組件的寬高
const menuWidth = menu.offsetWidth
const menuHeight = menu.offsetHeight
// 當(dāng)前鼠標(biāo)位置
let pointX = opt.pointer.x
let pointY = opt.pointer.y
// 計(jì)算菜單出現(xiàn)的位置
// 如果鼠標(biāo)靠近畫布右側(cè)距潘，菜單就出現(xiàn)在鼠標(biāo)指針左側(cè)
if (canvas.width - pointX <= menuWidth) {
pointX -= menuWidth
}
// 如果鼠標(biāo)靠近畫布底部，菜單就出現(xiàn)在鼠標(biāo)指針上方
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 來判斷當(dāng)前點(diǎn)擊的對象音比。
opt.target === null ，就是點(diǎn)擊在畫布上（沒有點(diǎn)擊在圖形元素上）氢惋。
如果你的項(xiàng)目需求是右鍵點(diǎn)擊畫布也展示不同菜單洞翩，你可以修改上面代碼的判斷。
代碼倉庫
推薦
如果本文內(nèi)容對你有所幫助焰望，也請你幫我點(diǎn)個(gè)贊唄~
本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布骚亿！
