在fabric.js中复制/粘贴功能

时间:2017-06-08 10:54:41

标签: jquery canvas fabricjs

目前我已经在fabric js中添加了复制和粘贴对象的代码。但是在选择对象组时它不起作用。 有没有办法用canvas.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 = [];
}

2 个答案:

答案 0 :(得分:3)

这就是我做的方式。它检查它是否是一个对象或组,并且它不是一个路径组 - 对克隆它并不感到高兴。

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

答案 1 :(得分: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();
}

谢谢大家。