关于前端:Fabricjs-右键菜单

本文简介

Fabric.js 默认 没提供 鼠标右键事件 ，只有 鼠标按键点击 、 鼠标按键抬起 、 鼠标挪动 等事件。
但在工作中有可能须要用到“右键”事件，比方“右键菜单”。所以就有了本文。

本文次要关注 Fabric.js 的次要 api 有：

• fireRightClick：容许右键点击
• stopContextMenu：禁用默认右键菜单
• mouse:down：鼠标点击事件

如果不晓得 Fabric.js 的同学，能够看《Fabric.js 从入门到___》

本案例是应用原生形式开发，不基于 Vue、React 等框架，所以不必太放心运行环境等问题。

案例代码放了在文末~

环境和版本

Chrome 浏览器版本：96.0.4664.45

Fabric.js 版本：4.6.0

思路

先说说需要：

• 右键单击元素，弹出菜单；
• 弹出菜单分 4 种状况（菜单在鼠标右侧，菜单在鼠标左侧，菜单在鼠标上方，菜单在鼠标下方）；
• 左键单击画布其余中央，暗藏菜单；

实现思路：

• 创立画布；
• 创立“菜单”的 DOM 元素；
• 去官网查找“右键相干事件”；
• 右键单击在元素上，依据鼠标离画布边缘的间隔，计算菜单要显示的地位；
• 左键单击在画布上，暗藏菜单；

实现

查文档

在下面的思路中，其实难点只有“右键相干事件”。

在 对象相干的文档 里，对于鼠标的事件如同没有右键，略微沾边点的就是鼠标点击（这里我选了 mousedown）。

于是我去 画布的文档 里找了下，发现这两个属性：

• fireRightClick：画布是否能够触发右键事件
• stopContextMenu：禁止默认右键菜单

哈哈哈哈，发达了~

经我仔细观察，发现 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>

此时的成果如上图所示。

初始化画布，并生成图形

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

增加点击事件（判断右键）

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

下面的代码中，通过 opt.target 是否为 null 来判断以后点击的对象。

opt.target === null，就是点击在画布上（没有点击在图形元素上）。

如果你的我的项目需要是右键点击画布也展现不同菜单，你能够批改下面代码的判断。

代码仓库

• 原生形式实现 Fabric 右键菜单
• 在 Vue3 中应用 Fabric 实现右键菜单性能

举荐

《Fabric.js 从入门到收缩》

《Fabric.js 突变成果（包含径向突变）》

如果本文内容对你有所帮忙，也请你帮我点个赞呗~

本文由博客一文多发平台 OpenWrite 公布！