fabricjs 删除object对象

fabricjs

对于学习过fabric的人来说,对于canvas的操作,算是相当简化了,一些基础的操作我在这里就不多少了,网上有很多介绍,而且官网也是很详细的。

下面我说一下删除fabricjs中canvas的对象。

对于删除canvas 中的对象,fabricjs也提供了一个方法,remove(),可以移除指定对象。

但是,有一个小小的问题,我们在什么情境下或者什么条件下,执行移除操作呢。(虽然是小问题,我还是纠结了很久,想找一个不是很反人类的操作方式)

本来我是想为canvas的对象添加鼠标右键事件,以达到删除的目的,有了想法就去实现,不过我发现有一个坑,需要借助一些插件,

例子:

"utf-8" >
"contextMenu/jquery.contextMenu.css"  rel= "stylesheet"  type= "text/css"  />
     "canvas"  width= "450"  height= "200" >
    
"contextmenu-output" >

具体可以参考:http://www.hangge.com/blog/cache/detail_1856.html

麻烦归麻烦,但是封装一下还是可以使用的,但是还需要引入插件,对于我来说有点不可以接受,所以我只能换个思路。

第二个方法,我是不是可以结合键盘操作,当我选中一个对象时,点击键盘的backspace,执行删除操作,虽然操作不是很反人类(还是有点反人类的),思路有了那就实现吧。

首选,要做的是要选中对象,可以调用fabric的object:selected方法,然后调用键盘的监听事件

代码:

    // 删除对象
    removeObject: function (that) {
      // 监控canvas的object:selected事件
      that.fabricCanvas.on('object:selected', function (option) {
        // 监控页面的键盘事件
        document.onkeydown = function (e) {
          // 是否点击delete
          if (e.keyCode === 8) {
            // 移除当前所选对象
            that.fabricCanvas.remove(option.target)
          }
        }
      })
    }

发现了bug,怎么在多个对象之间切换选中,没有执行事件呢。

经过我的测试,发现不管你选中那个对象,他都执行的是对象选中事件,也就是说,这个事件只会执行一次,除非你每次执行完,都移开,取消选中,但这有点太反人类了。

那就换个事件实施,用mouse:down,鼠标点击就执行,这总可以了吧。

代码:

// 删除对象
    removeObject: function (that) {
      // 监控canvas的mouse:down事件
      that.fabricCanvas.on('mouse:down', function (option) {
        // 监控页面的键盘事件
        document.onkeydown = function (e) {
          // 是否点击delete
          if (e.keyCode === 8) {
            // 移除当前所选对象
            that.fabricCanvas.remove(option.target)
          }
        }
      })
    }

试了一下,真的可以,确实删除了,不过操作的方式肯定没有鼠标右键删除的方式好,但也算一个方式吧。

最后希望fabricjs尽快支持鼠标右键吧。

你可能感兴趣的:(web)