fabric.js获得IText对象的"编辑"状态

Don*_*nMB 4 javascript fabricjs

在fabric.js中,我想在画布上添加一些关键交互.如果选择了IText对象,我希望在按下"del"键时将其删除.我完成了这个:

$('html').keyup(function(e){
  if (e.keyCode == 46) {
    obj = canvas.getActiveObject();
    canvas.remove(obj);
  }
});
Run Code Online (Sandbox Code Playgroud)

现在的问题是,当我正在编辑IText并点击DEL键时,该对象显然也被删除了.我希望通过以下方式防止这种情况:

$('html').keyup(function(e){

  canvas.observe('text:editing:entered', editing = true);

  console.log(editing);

  if (editing == false) {
    if (e.keyCode == 46) {
      removeObject();
    }
  };

});
Run Code Online (Sandbox Code Playgroud)

=如果我不在编辑IText的中间,则仅删除对象

我在这里找到了这个火灾事件"编辑:输入":http://fabricjs.com/docs/fabric.IText.html 所以我试着用上面的代码来捕捉这个.但是,当我选择文本并且没有真正开始编辑它时,看起来这个事件已经触发了.

任何想法如何解决这个问题,并检查我是否真的只是编辑IText?

Swa*_*ain 8

IText对象具有一个名为的属性isEditing,可用于检查对象中的文本是否正在编辑.

要实现您所说的内容,您需要做的就是在从画布中删除对象之前检查此属性.代码如下所示:

document.onkeyup = function (e) {
    if (e.keyCode == 46) {
        obj = canvas.getActiveObject();
        if (!obj.isEditing) {
            canvas.remove(obj);
        }
    }
};
Run Code Online (Sandbox Code Playgroud)

这是小提琴:http://jsfiddle.net/bdgnrnxf/1/并链接到文档.