Javascript 在复制/粘贴到FabricJS后，如何保持IText可编辑？

我想用FabricJS复制/粘贴对象，问题是当我复制和粘贴一个I文本时，它将变得不可编辑，我想使其可编辑

以下是JSFIDLE：

Javascript:

var canvas = new fabric.Canvas('paper');

// adding text on canvas
var text = new fabric.Text('Normal Uneditable Text', { 
  left: 100, 
  top: 150,
  fontFamily: 'Arial',
  fontSize: 15,
  fill: '#333'
});
canvas.add(text);

var text = new fabric.IText('IText : not editable anymore once copy/pasted why?', { 
  left: 10, 
  top: 50,
  fontFamily: 'Arial',
  fontSize: 20,
  fill: '#333'
});
canvas.add(text);


canvas.renderAll();


createListenersKeyboard();
function createListenersKeyboard() {
    document.onkeydown = onKeyDownHandler;
}

function onKeyDownHandler(event) {
    var key;
    if(window.event){
        key = window.event.keyCode;
    }
    else{
        key = event.keyCode;
    }

    switch(key){
        case 67: // Ctrl+C
                if(event.ctrlKey){
                    event.preventDefault();
                    copy();
                }
            break;
        case 86: // Ctrl+V
                if(event.ctrlKey){
                    event.preventDefault();
                    paste();
                }
            break;

        default:
            // TODO
            break;
    }
}

var copiedObject,
copiedObjects = new Array();
function copy(){
    copiedObjects = new Array();
    if(canvas.getActiveGroup()){
        canvas.getActiveGroup().getObjects().forEach(function(o){
            var object = fabric.util.object.clone(o);
            copiedObjects.push(object);
        });             
    }
    else if(canvas.getActiveObject()){
        var object = fabric.util.object.clone(canvas.getActiveObject());
        copiedObject = object;
        copiedObjects = new Array();
    }
}

function paste(){
    if(copiedObjects.length > 0){
        for(var i in copiedObjects){
            copiedObjects[i]=fabric.util.object.clone(copiedObjects[i]);
          copiedObjects[i].set("top", copiedObjects[i].top+100);
          copiedObjects[i].set("left", copiedObjects[i].left+100);
          canvas.add(copiedObjects[i]);
          canvas.item(canvas.size() - 1).hasControls = true;
        }                
    }
    else if(copiedObject){
        copiedObject= fabric.util.object.clone(copiedObject);
          copiedObject.set("top", 10);
        copiedObject.set("left", 10);
      canvas.add(copiedObject);
      canvas.item(canvas.size() - 1).hasControls = true;
    }
    canvas.renderAll();  
}

---

问题在哪里？我如何解决它，以便我也可以复制/粘贴Itext并保持它的原样，而不是将其转换为简单的文本？

如果不深入研究FabricJS代码，我无法回答“为什么”（我想这是你问题的一部分）-但我相信如果你真的想知道的话，你可以自己深入研究FabricJS代码

但是，这里有一个对代码的调整，可以让它为您工作：

function paste() {
  if (copiedObjects.length > 0) {
    for (var i in copiedObjects) {
      if (/text/.test(copiedObjects[i].type)) {
        canvas.add(new fabric.IText(copiedObjects[i].text, {
          left: copiedObjects[i].left + 100,
          top: copiedObjects[i].top + 100,
          fontFamily: copiedObjects[i].fontFamily,
          fontSize: copiedObjects[i].fontSize,
          fill: copiedObjects[i].fill
        }));
      } else {
        copiedObjects[i] = fabric.util.object.clone(copiedObjects[i]);
        copiedObjects[i].set("top", copiedObjects[i].top + 100);
        copiedObjects[i].set("left", copiedObjects[i].left + 100);
        canvas.add(copiedObjects[i]);
      }
      canvas.item(canvas.size() - 1).hasControls = true;
    }
  } else if (copiedObject) {
    if (/text/.test(copiedObject.type)) {
      canvas.add(new fabric.IText(copiedObject.text, {
        left: 10,
        top: 10,
        fontFamily: copiedObject.fontFamily,
        fontSize: copiedObject.fontSize,
        fill: copiedObject.fill
      }));
    } else {
      copiedObject = fabric.util.object.clone(copiedObject);
      copiedObject.set("top", 10);
      copiedObject.set("left", 10);
      canvas.add(copiedObject);
    }
    canvas.item(canvas.size() - 1).hasControls = true;
  }
  canvas.renderAll();
}

我猜，IText背后的底层对象实际上只是一个普通的旧文本对象，带有一个覆盖层，使其能够响应键盘/鼠标事件

这是您的JSFIDLE更新版

---

希望能有帮助，伙计

你做错了什么。

fabric.util.object.clone

旨在以一种简单的方式克隆普通javascript对象。并不意味着要复制实例

您必须使用

Object.toObject

创建对象的副本

var canvas = new fabric.Canvas('paper');

var copiedObject,
copiedObjects = new Array();

function copy(){
    copiedObjects = new Array();
    if(canvas.getActiveGroup()){
        canvas.getActiveGroup().getObjects().forEach(function(o){
            var object = o.toObject();
            copiedObjects.push(object);
        });             
    }
    else if(canvas.getActiveObject()){
        var object = canvas.getActiveObject().toObject();
        copiedObject = object;
        copiedObjects = new Array();
    }
}

function paste(){
    if(copiedObjects.length > 0){
        for(var i in copiedObjects){
          copiedObjects[i].top += 100;
          copiedObjects[i].left += 100;
          var className = copiedObjects[i].type.slice(0, 1).toUpperCase() + copiedObjects[i].type.slice(1);
          fabric[className].fromObject(copiedObjects[i], function() {
            canvas.add();
          });
        }                
    }
    else if(copiedObject){
       .... do the same without the the for loop ....
    }
}

---

有意思，但我也在尝试复制粘贴图像和形状，所以我不想让它受到影响，有没有办法设置一个条件，比如说如果…=Text或IText，然后执行此函数？我更新了我的答案，

/Text/.test（object.type））

是FabricJS上的厨房水槽示例使用的-查看它们的代码。事实上，这就是我用来怀疑我的观察结果的理由，即IText实际上是下面的文本——因为它们的测试结果是相同的。希望有帮助，伙计！别担心。如果可以的话，我很乐意进一步帮助你。享受生活！请检查备选答案。fabric.util.object.clone不应该以这种方式使用。只是尝试一下，我无法使它工作，我做错了什么吗？也许是我做错了。有机会我会查一查。