Fabric.js 右鍵菜單

本文簡介

Fabric.js 默認(rèn)沒提供 鼠標(biāo)右鍵事件，只有 鼠標(biāo)按鍵點(diǎn)擊 、鼠標(biāo)按鍵抬起 、鼠標(biāo)移動(dòng) 等事件。
但在工作中有可能需要用到 “右鍵” 事件，比如 “右鍵菜單” 。所以就有了本文。


本文主要關(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è)屬性：

哈哈哈哈，發(fā)達(dá)了~

file


經(jīng)我仔細(xì)觀察，發(fā)現(xiàn) mouse:down 事件里有個(gè) button 屬性：

  • 左鍵：button 的值為 1
  • 右鍵：button 的值為 3
  • 中鍵（也就是點(diǎn)擊滾輪），button 的值為 2，前提需要設(shè)置 fireMiddleClick: true


動(dòng)手開發(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)擊畫布也展示不同菜單，你可以修改上面代碼的判斷。



代碼倉庫



推薦

《Fabric.js 從入門到膨脹》

《Fabric.js 漸變效果（包括徑向漸變）》




如果本文內(nèi)容對你有所幫助，也請你幫我點(diǎn)個(gè)贊唄~

本文由博客一文多發(fā)平臺 OpenWrite 發(fā)布！

?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請聯(lián)系作者
【社區(qū)內(nèi)容提示】社區(qū)部分內(nèi)容疑似由AI輔助生成，瀏覽時(shí)請結(jié)合常識與多方信息審慎甄別。
平臺聲明：文章內(nèi)容（如有圖片或視頻亦包括在內(nèi)）由作者上傳并發(fā)布，文章內(nèi)容僅代表作者本人觀點(diǎn)，簡書系信息發(fā)布平臺，僅提供信息存儲(chǔ)服務(wù)。

相關(guān)閱讀更多精彩內(nèi)容

友情鏈接更多精彩內(nèi)容