fabricjs 自定义右键菜单

最新推荐文章于 2024-03-27 15:45:03 发布

约瑟夫驴

最新推荐文章于 2024-03-27 15:45:03 发布

阅读量783

点赞数

文章标签： javascript fabric 开发语言

本文链接：https://blog.youkuaiyun.com/qq_41299637/article/details/121206158

版权

本文介绍了如何在fabricjs库中，由于缺乏内置右键事件，通过监听mouse:move并在页面全局捕获右键点击，实现在图形上进行右键操作，如高亮和菜单显示。作者详细展示了如何在鼠标移动和右键点击时切换选中对象，并定位上下文菜单的位置。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

fabricjs 并未自带右击事件，因此可以通过 mouse：move 加上页面的右击事件来做
that.canvas.on(‘mouse:move’, (options) => {
if (!this.rightClick && !that.isDrawing && options.target) {
// 因为 fabricjs 没有右键事件
// 因此通过监听整个页面来实现右键事件
// 当鼠标滑动到图形上时记录当前对象，当右键点击时将当前对象高亮
// 记录下当前划过的图形
this.moveOption = options
}
// 当鼠标继续移动时清除右击状态
this.rightClick = false

})

监听页面右键事件这里省略。。

rightClickFun(ev) {
if (this.moveOption && !this.rightClick) {
// // 右键点击前如果之前右键点击过了，将之前点击的对象的选中框四个角显示出来
if (this.oldmoveOption) {
// this.oldmoveOption.target.set(‘backgroundColor’,’’)
}
// 重新渲染所有对象，目的是设置当前选中的对象背景颜色为黑色，目前未找到单独渲染某个对象的方法，就选择渲染所有了
this.canvas.renderAll()
// 将当前对象储存为 old
this.oldmoveOption = this.moveOption
this.rightClick = true
console.log(‘evvvvv’, ev, this.oldmoveOption)

    document.getElementById('fabriccontextMenu').style.left = ev.clientX + 'px'
    document.getElementById('fabriccontextMenu').style.top = ev.clientY + 'px'
    this.contextMenuShow = true
  }

  // 阻止 浏览器默认右击事件
  ev.preventDefault()
},