javascript - 复制并粘贴到fabric.js 2.0 beta6

Question

在 2.x beta6 之前，我将此代码与 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-breaking-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. 可以复制和粘贴分组对象，但一旦取消选择粘贴的对象，就无法再次选择该对象。

看到这个 fiddle :https://jsfiddle.net/sharksinn/wta4pdpz/1/

编辑:这是工作和更新的 fiddle :

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 和渲染请求。