Fabric.js 右键菜单

本文简介

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

动手开发

布局

  
  

  
  

    
什么都不做
    
什么都不做
    
什么都不做
    
什么都不做
    
删除
  

file

此时的效果如上图所示。

初始化画布，并生成图形

file

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

file

上面的代码中，通过 opt.target 是否为 null 来判断当前点击的对象。

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

如果你的项目需求是右键点击画布也展示不同菜单，你可以修改上面代码的判断。

代码仓库

• 原生方式实现Fabric右键菜单
• 在Vue3中使用Fabric实现右键菜单功能

推荐

《Fabric.js 从入门到膨胀》

《Fabric.js 渐变效果（包括径向渐变）》

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

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