復制並粘貼到 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 並呈現請求。