fabric.js 翻转,复制粘贴,隐藏, 删除,历史记录,撤销, 剪切, 图层,组合打散,锁定等功能...

用vue写的

显示,隐藏
hide(){
        this.canvas.getActiveObject().set('opacity', 0).setCoords();
        this.canvas.requestRenderAll()
    },
    display(){
        this.canvas.getActiveObject().set('opacity', 1).setCoords();
        this.canvas.requestRenderAll()
    },

翻转 水平    垂直用scaleY
flip(){
        this.canvas.getActiveObject().set('scaleX', -1).setCoords();
        this.canvas.requestRenderAll();
    },

克隆(复制粘贴)

paste(_clipboard){
        // clone again, so you can do multiple copies.
        let canvas = this.canvas;
        _clipboard.clone(function(clonedObj) {
            canvas.discardActiveObject();
            clonedObj.set({
                left: clonedObj.left + 20,
                top: clonedObj.top + 20,
                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);
            }
            _clipboard.top += 20;
            _clipboard.left += 20;
            canvas.setActiveObject(clonedObj);
            // canvas.requestRenderAll();
        });
    }, 
    copy(){
       let canvas = this.canvas;
       var _self = this;
        ca

你可能感兴趣的:(javascript,json,ViewUI)