Fabric.js - 添加鼠标右键点击事件响应(附:右键菜单)

Fabric.js 的 Canvas 有个 mouse:down 事件,通过它我们可以监听到鼠标按下的行为。不过该事件只对鼠标左键其作用,如果是右键按下则不会触发该事件。
而 Canvas 上又无法直接监听 contextmenu 事件,所以想要实现右键点击响应就需要换种方式实现。

1,实现原理
Fabric.js 的 Canvas 初始化完毕后,会自动在其上方覆盖一个 class 名为 upper-canvas 的 canvas。
我们可以在上层这个 canvas 上添加 contextmenu 事件监听。当右键按下时会触发该事件,然后将点击的坐标转换成底下实际的 canvas 里的坐标(坐标需要转换是因为下面 canvas 可能会被移动,缩放)。

2,效果图
默认情况下,鼠标左键点击对象即可选择中该对象。
这里增加个右键选中功能,即通过右键同样可以选中对象。
Fabric.js - 添加鼠标右键点击事件响应(附:右键菜单)_第1张图片
3,样例代码










    


附:添加一个自定义的右键菜单
1,实现原理
这里我们使用一个专门的第三方菜单组件(contextMenu)来实现,在上面的右键点击响应中将菜单弹出即可。
关于 contextMenu 更详细的用法,可以参考我之前的文章:jQuery - 右键菜单插件contextMenu使用详解1(安装配置、基本用法)

2,效果图
(1)当鼠标在对像上按下右键时,会出现个菜单。
Fabric.js - 添加鼠标右键点击事件响应(附:右键菜单)_第2张图片

(2)点击菜单里的“删除”项,即可将对象删除。
Fabric.js - 添加鼠标右键点击事件响应(附:右键菜单)_第3张图片

3,样例代码














    
    

你可能感兴趣的:(Fabric.js,右键菜单)