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;
        canvas.getActiveObject().clone(function(cloned){
            // let _clipboard = cloned;
              _self.paste(cloned);
            
        })
    },    

历史记录，回退撤销

data 初始化
config : {
            canvasState             : [],
            currentStateIndex       : -1,
            redoStatus              : false, //撤销状态
            undoStatus              : false,  // 重做状态
            undoFinishedStatus      : 1,
            redoFinishedStatus      : 1,
            undoButton              : this.$refs.undo,  //得不到  在 mounted 得到
            redoButton              : this.$refs.redo,
        }

记录事件
canvasDataChange(){
      let _self = this;
      this.canvas.on('object:modified', function(){
          _self.updateCanvasState();
      });
      this.canvas.on('object:added', function(){
          _self.updateCanvasState()
      });
      this.canvas.on('object:removed', function(){
          _self.updateCanvasState()
      });
      this.canvas.on('object:rotating', function(){
          _self.updateCanvasState()
      });
    },


 undo() {
        let _self =this;
		if(this.config.undoFinishedStatus){
			if(this.config.currentStateIndex == -1){
	    	    this.config.undoStatus = false;
			}
			else{
		        if (this.config.canvasState.length >= 1) {
        	        this.config.undoFinishedStatus = 0;
                    if(this.config.currentStateIndex != 0){
                        this.config.undoStatus = true;
                        this.canvas.loadFromJSON(this.config.canvasState[this.config.currentStateIndex-1],function(){
                                var jsonData = JSON.parse(_self.config.canvasState[_self.config.currentStateIndex-1]);
                                _self.canvas.renderAll();
                                _self.config.undoStatus = false;
                                _self.config.currentStateIndex -= 1;
                                    // _self.config.undoButton.removeAttribute("disabled");
                                    // _self.config.undoButton.disabled = false;
                                    if(_self.config.currentStateIndex !== _self.config.canvasState.length-1){
                                        // _self.config.redoButton.removeAttribute('disabled');
                                        // _self.config.redoButton.disabled = false;
                                    }
                                _self.config.undoFinishedStatus = 1;
                        });
                    }
                    else if(_self.config.currentStateIndex == 0){
                        _self.canvas.clear();
                        _self.config.undoFinishedStatus = 1;
                        // _self.config.undoButton.disabled= "disabled";
                        // _self.config.redoButton.removeAttribute('disabled');
                        // _self.config.redoButton.disabled = false;
                        _self.config.currentStateIndex -= 1;
                    }
                }
			}
		}
    },
    redo() {
        let _self = this;
		if(this.config.redoFinishedStatus){
			if((this.config.currentStateIndex == this.config.canvasState.length-1) && this.config.currentStateIndex != -1){
				// this.config.redoButton.disabled= true;
			}else{
		  	if(this.config.canvasState.length > this.config.currentStateIndex && this.config.canvasState.length != 0){
                this.config.redoFinishedStatus = 0;
                this.config.redoStatus = true;
                this.canvas.loadFromJSON(this.config.canvasState[this.config.currentStateIndex+1],function(){
                    var jsonData = JSON.parse(_self.config.canvasState[_self.config.currentStateIndex+1]);
                    _self.canvas.renderAll();
                    _self.config.redoStatus = false;
                    _self.config.currentStateIndex += 1;
                    if(_self.config.currentStateIndex != -1){
                    //    _self.config.redoButton.disabled = false;
                    }
                    _self.config.redoFinishedStatus = 1;
                    if((_self.config.currentStateIndex == _self.config.canvasState.length-1) && _self.config.currentStateIndex != -1){
                        // _self.config.redoButton.disabled= true;
                    }
		      });
		    }
			}
		}
	},

删除
del() {
      var el = this.canvas.getActiveObject();
      this.canvas.remove(el);
    },

格式化 数据
toJson(){
   
      console.log(JSON.stringify(this.canvas.toJSON()));
    },
    toSVG(){
      // return this.canvas.toSVG()
      console.log(this.canvas.toSVG());
    },


canvas导出为图片并下载

canvasToImage(){
      var MIME_TYPE = "image/png";
      //转换成base64
      var imgURL = this.canvas.toDataURL(MIME_TYPE);
  　　//创建一个a链接，模拟点击下载
  　　var dlLink = document.createElement('a');
      var filename = '个人画板_' + (new Date()).getTime() + '.png';
  　　dlLink.download = filename;
  　　dlLink.href = imgURL;
  　　dlLink.dataset.downloadurl = [MIME_TYPE, dlLink.download, dlLink.href].join(':');
  　　document.body.appendChild(dlLink);
  　　dlLink.click();
  　　document.body.removeChild(dlLink);  
    },

或者
downloadimage(event){
      // 图片导出为 png 格式
      var type = 'png';
      // 返回一个包含JPG图片的<img>元素
      var img_png_src = this.canvas.toDataURL("image/png");  //将画板保存为图片格式的函数
      var imgData = img_png_src.replace(this._fixType(type),'image/octet-stream');
     
      var filename = '个人画板_' + (new Date()).getTime() + '.' + type;

      this.saveFile(imgData,filename);
    },

    saveFile(data, filename){
      var save_link = document.createElementNS('http://www.w3.org/1999/xhtml', 'a');
      save_link.href = data;
      save_link.download = filename;
      var event = document.createEvent('MouseEvents');
      event.initMouseEvent('click', true, false, window, 0, 0, 0, 0, 0, false, false, false, false, 0, null);
      save_link.dispatchEvent(event);
    },

    _fixType(type) {
      type = type.toLowerCase().replace(/jpg/i, 'jpeg');
      var r = type.match(/png|jpeg|bmp|gif/)[0];
      return 'image/' + r;
    },


组合 打散
group() {
      this.fabricAction.fabricObjGroup(this);
    },
    ungroup() {
      this.fabricAction.fabricObjUnGroup(this);
    },

锁定
lock() {
      this.fabricAction.lockOption(this);
    },

　　

转载于:https://www.cnblogs.com/lfqcode/p/8601605.html