复制并粘贴到 fabric.js 2.0 beta6

Question

我在2.x beta6 fabric.js之前将这段代码与fabric.js一起使用来复制和粘贴内容，并且工作正常：

function copy() {
    var activeObject = canvas.getActiveObject(),
        activeGroup = canvas.getActiveGroup();

    if (activeGroup) {
        _clipboard = activeGroup;
    } else if (activeObject) {
        _clipboard = activeObject;
    }
    return false;
}

function paste() {
    var activeObject = canvas.getActiveObject(),
        activeGroup = canvas.getActiveGroup();
    canvas.discardActiveObject();
    if (_clipboard.size) {

        _clipboard.clone(function (clonedObj) {
            canvas.discardActiveGroup();
            clonedObj.set({
                left: clonedObj.left + 10,
                top: clonedObj.top + 10,
                evented: true
            });

            clonedObj.forEachObject(function (obj) {
                obj.set('active', true);
                canvas.add(obj);
            });

            canvas.setActiveGroup(clonedObj).renderAll();
        });
    } else {
        _clipboard.clone(function (clonedObj) {
            clonedObj
                .set("top", _clipboard.top + 5)
                .set("left", _clipboard.left + 5)
                .setCoords();

            canvas
                .add(clonedObj)
                .setActiveObject(clonedObj)
                .renderAll();
        });
    }
}

由于在新版本中，选择过程已大大简化，并且删除了一些方法（请参见此处）：

http://fabricjs.com/v2-break-changes-2

请参考此文档，一般参考此链接：

http://fabricjs.com/changelog

上述解决方案将不再适用。 所以我试图像这样将我的脚本采用到新的测试版中：

function copy() {
    var activeObject = canvas.getActiveObject();
        _clipboard = activeObject;
       console.log(_clipboard);
}


function paste() {
    var activeObject = canvas.getActiveObject();
    canvas.discardActiveObject();
    if (_clipboard.size) {

        _clipboard.clone(function (clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set({
                left: clonedObj.left + 10,
                top: clonedObj.top + 10,
                evented: true,
                active: true
            });

            clonedObj.forEachObject(function (obj) {
                obj.set('active', true);
                canvas.add(obj);
            });

            canvas.setActiveObject(clonedObj);
            canvas.requestRenderAll;
        });
    } else {
        _clipboard.clone(function (clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set("top", _clipboard.top + 5);
            clonedObj.set("left", _clipboard.left + 5);
            clonedObj.set('active', true);
            clonedObj.setCoords();



            canvas.add(clonedObj);
            canvas.setActiveObject(clonedObj);
            canvas.requestRenderAll;
        });
    }
}

我面临以下问题：

1. 我无法复制和粘贴多个选定（未分组）的对象
2. 复制和粘贴分组对象可以工作，但一旦取消选择粘贴的对象，就无法再次选择它。

看到这个小提琴： https : //jsfiddle.net/sharksinn/wta4pdpz/1/

编辑：这是工作和更新的小提琴：

https://jsfiddle.net/sharksinn/wta4pdpz/13/

Answer 1

我是来自fabricjs 问题跟踪器的 asturur。

那么有几点可以更好地理解选择过程。 文档中突出显示了一个，那就是在尝试使用它之前不应该丢弃 activeObject，即使您保存了引用。 activeSelection 就像取消选择时的自动销毁一样，因此引用它会返回对取消选择后为空的对象的引用。

这是一个建议：

function copy() {
// clone what are you copying since you may want copy and paste on different moment.
// and you do not want the changes happened later to reflect on the copy.
// maybe.
  canvas.getActiveObject().clone(function(cloned) {
    _clipboard = cloned;
  });
}

function paste() {
// clone again, so you can do multiple copies.
  _clipboard.clone(function(clonedObj) {
    canvas.discardActiveObject();
    clonedObj.set({
      left: clonedObj.left + 10,
      top: clonedObj.top + 10,
      evented: true,
    });
    if (clonedObj.type === 'activeSelection') {
        // active selection needs a reference to the canvas.
        clonedObj.canvas = canvas;
        clonedObj.forEachObject(function (obj) {
            canvas.add(obj);
        });
        // this should solve the unselectability
        clonedObj.setCoords();
    } else {
       canvas.add(clonedObj);
    }
    canvas.setActiveObject(clonedObj);
    canvas.requestRenderAll();
 });
}

虽然我无法尝试此代码，但我可以说这或多或少是正确的。 无论如何，当您粘贴设置您的位置时，如果您有 activeSelection 或其他东西，请拆分您的逻辑，然后执行 setActiveObject 并呈现请求。