copy/paste fabric.js 中的功能

Question

目前我已经添加了在结构中复制和粘贴对象的代码js.But，同时选择对象组不起作用。有什么方法可以使用 fabric.js 框架为 canvas 上的对象组实现 copy/paste 功能？

这是我的粘贴代码

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 = [];
}

Answer 1

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

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

谢谢大家

Answer 2

我是这样做的。它会检查它是一个对象还是组，如果不是路径组 - 这对被克隆并不满意。

   /**
     * 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();
        }
    }

copy/paste fabric.js 中的功能

copy/paste functionality in fabric.js

jquery

canvas

fabricjs