Javascript FabricJS剪贴板实现（复制/粘贴）

关于在fabricjs中实现剪贴板，我遇到了一个问题。克隆组时，边界框/控件处于正确的位置，但对象被抛出画布的左上角，我只能移动控件

以下是我迄今为止的实施情况：

var canvas = new fabric.Canvas("c");
var clipboard = null;

function Copy() {
    // Single Object
    if(canvas.getActiveObject()) {
        // Does this object require an async clone?
        if(!fabric.util.getKlass(canvas.getActiveObject().type).async) {
            clipboard = canvas.getActiveObject().clone();
        } else {
            canvas.getActiveObject().clone(function(clone) {
                clipboard= clone;
            });
        }
    }

    // Group of Objects (all groups require async clone)
    if(canvas.getActiveGroup()) {
        canvas.getActiveGroup().clone(function(clone) {
            clipboard = clone;
        });
    }
}


function Paste() {
    // Do we have an object in our clipboard?
    if(clipboard) {
        // Lets see if we need to clone async 
        if(!fabric.util.getKlass(clipboard.type).async) {
            var obj = clipboard.clone();
            obj.setTop(obj.top += 10);
            obj.setLeft(obj.left += 10);            
            canvas.add(obj);
            // We do not need to clone async, all groups require async clone
            canvas.setActiveObject(obj);
            clipboard = obj;
        }  else {
            clipboard.clone(function(clone) {
                clone.setTop(clone.top += 10);
                clone.setLeft(clone.left += 10);
                canvas.add(clone);

                // We need to clone async, but this doesnt mean its a group
                if(clipboard.isType("group")) {
                    canvas.setActiveGroup(clone);
                } else {
                    canvas.setActiveObject(clone);
                }
                clipboard = clone;
            });
        }
    }
}

我对这些方法和逻辑的实现可能是多余的，它们可能是更好、更小、更有效的方法（请让我知道）

我不确定这是一个bug还是我做错了什么。请记住，我不知道可以克隆哪些对象，这就是为什么我需要知道是否需要使用异步克隆，这是我找到的唯一方法

---

更新：这是一个问题的解决方案（将对象分组并复制/粘贴）

看起来问题出在setActiveGroup函数中。看看这个。在第49和54行中，我编写了console.log（）。在控制台中查看结果，您可以看到_objects属性长度为0。这意味着组中没有对象。现在只需删除setActiveGroup函数。现在_objects属性长度为2

我不知道这是正常的还是setActiveGroup函数中有任何错误。 但后来我尝试在画布中手动添加组对象，而不是一次添加完整的组。我已将您的小提琴线48替换为以下内容

clone.forEachObject(function(obj){
    canvas.add(obj);
});

canvas.deactivateAll();

现在它成功了。看这个

为安全起见，如果要手动设置活动组或对象，请使用canvas.deactivateAll（）。您还可以根据需要使用canvas.discardActiveGroup（）或canvas.discardActiveObject（）

---

我认为我们不能将克隆组直接添加到画布上。相反，我们必须单独添加该组的每个对象。请其他人确认。

我最近遇到了同样的问题；克隆对象被抛出画布的原因是，当计算要克隆的对象的左侧时，得到的是组内的左侧位置，而不是画布。让画布相关的对象在这里是如何为我工作

var cloneGroup = canvas.getActiveGroup();
if (cloneGroup) {
            var objectsInGroup = cloneGroup.getObjects();
            objectsInGroup.forEach(function (object) {
                var cloneobj = object.clone();
                cloneobj.set({
                    left: ((object.left + object.group.left )+20),// added 20 to add some gap
                    top: ((object.top + object.group.top) + 20),
                    width: object.get('width'),
                    height: object.get('height'),
                });
                canvas.add(cloneobj);
            });
        }
 canvas.renderAll();

---

你解决问题了吗？？我不会像您指定的那样在您的小提琴中遇到任何问题。@JayadrathaMondal每当我尝试粘贴组时，我复制的所有内容都会中断。这是一个很好的答案，但我将提交一份错误报告，以查看这是否是错误，谢谢@亨特米切尔：是的，你应该这么做。我还想看看它是否真的是一个bug。@Huntermichell你确定过这是否是一个bug吗？制定自己的复制/粘贴实现并遇到相同的问题。