Fabric.js|Fabric.js 右键菜单 Fabric.js右键菜单

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

【Fabric.js|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

动手开发
布局

/* 容器，相对定位 */ .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; }什么都不做什么都不做什么都不做什么都不做删除