javascript - FabricJS 剪贴板实现(复制/粘贴)

Question

我在 fabricjs 中实现剪贴板时遇到问题。当我克隆组时，boundingBox/Controls 位于正确的位置，但对象被扔到 Canvas 的左上角，我只能移动控件。

到目前为止，这是我的实现:

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;
            });
        }
    }
}

我对这些方法的实现和我的逻辑可能是多余的，它们可能是一种更好、更小、更有效的方法(请告诉我)。

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

更新:这是一个jsfiddle问题(将对象分组并复制/粘贴)

Answer 1

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

不知道是正常现象还是setActiveGroup函数有什么bug。但后来我尝试在 Canvas 中手动添加组对象，而不是一次添加整个组。我已将您的第 48 行 fiddle 替换为以下内容。

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

canvas.deactivateAll();

现在它起作用了。看这个fiddle .

是的，为了安全起见，如果您想手动设置事件组或对象，请使用 canvas.deactivateAll()。您也可以根据需要使用 canvas.discardActiveGroup() 或 canvas.discardActiveObject()。

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