Fabric.js 右键菜单

本文简介

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


本文主要关注 Fabric.js 的主要 api 有:

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


Fabric.js 右键菜单_第1张图片


如果不知道 Fabric.js 的同学,可以看 《Fabric.js 从入门到___》


本案例是使用原生方式开发,不基于 VueReact 等框架,所以不用太担心运行环境等问题。


案例代码放了在文末~




环境和版本

Chrome浏览器版本:96.0.4664.45

Fabric.js版本:4.6.0



思路

先说说需求:

  • 右键单击元素,弹出菜单;
  • 弹出菜单分4种情况(菜单在鼠标右侧,菜单在鼠标左侧,菜单在鼠标上方,菜单在鼠标下方);
  • 左键单击画布其他地方,隐藏菜单;


实现思路:

  • 创建画布;
  • 创建 “菜单” 的DOM元素;
  • 去官网查找 “右键相关事件”;
  • 右键单击在元素上,根据鼠标离画布边缘的距离,计算菜单要显示的位置;
  • 左键单击在画布上,隐藏菜单;




实现

查文档

在上面的思路中,其实难点只有 “右键相关事件” 。

Fabric.js 右键菜单_第2张图片

对象相关的文档 里,关于鼠标的事件好像没有右键,稍微沾边点的就是鼠标点击(这里我选了 mousedown)。


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

哈哈哈哈,发达了~

Fabric.js 右键菜单_第3张图片


经我仔细观察,发现 mouse:down 事件里有个 button 属性:

  • 左键button 的值为 1
  • 右键button 的值为 3
  • 中键(也就是点击滚轮),button 的值为 2,前提需要设置 fireMiddleClick: true


动手开发

布局




Fabric.js 右键菜单_第4张图片

此时的效果如上图所示。


初始化画布,并生成图形

Fabric.js 右键菜单_第5张图片


添加点击事件(判断右键)

Fabric.js 右键菜单_第6张图片


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

opt.target === null ,就是点击在画布上(没有点击在图形元素上)。

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



代码仓库



推荐

《Fabric.js 从入门到膨胀》

《Fabric.js 渐变效果(包括径向渐变)》




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

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

你可能感兴趣的