fabric.js 中的复制/粘贴功能答案

【问题标题】：copy/paste functionality in fabric.jsfabric.js 中的复制/粘贴功能
【发布时间】：2017-11-10 01:16:44
【问题描述】：

目前我已经添加了用于在织物 js 中复制和粘贴对象的代码。但是在选择对象组时它不起作用。有没有办法使用fabric.js框架为画布上的一组对象实现复制/粘贴功能？

这是我的粘贴代码

pasteSelectedObjs: function() {
    cur_canvas = canvasObjArr[this.page];
    if (clipboard.length < 1) {
        return;
    }
    if (cur_canvas.getActiveObject()) {
        clipboard.set('active', true);
        cur_canvas.add(clipboard);
        cur_canvas.setActiveObject(clipboard);
    }
    clipboard = [];
}

【问题讨论】：

标签： jquery canvas fabricjs

【解决方案1】：

这就是我的做法。它检查它是否是一个对象或组，并且它不是一个路径组——它对被克隆不满意。

   /**
     * Will copy an object on the canvas
     */
    var copyObject;

    copy(){
        let o = canvas.getActiveObject();
        let t = o.get('type');

        if (o && t !== 'path-group'){
            let clone = o.clone();
            if (clone) {
                clone.set({
                    top: clone.top + 50,
                    left: clone.left + 50
                });
            }

            copyObject = clone;
        }
    }

    /**
     * Will clone an object to the canvas
     */
    paste(){
        if (copyObject){
            canvas.add(copyObject);
            canvas.deactivateAll().renderAll();
        }
    }

【讨论】：

这是完美的@Paul，但我的问题是我想复制/粘贴group of objects，问题就在这里。但请参阅我下面的代码。它正在工作。

【解决方案2】：

在这里我得到了正确的解决方案。

if (cur_canvas.getActiveGroup()) {
    cur_canvas.discardActiveGroup();
    clipboard.forEachObject(function(obj) {
        obj.set('active', true);
        cur_canvas.add(obj);
    });
    cur_canvas.setActiveGroup(clipboard).renderAll();
}

谢谢大家。

【讨论】：