vue2 + fabric.js 实现撤销恢复效果

Posted 2023-05-16 Ли Вэньлун

原生js参考版本

全部代码

<template>
  <div>
    <canvas id="canvas"   ></canvas>
    <button :disabled="!canUndo" @click="historyState(stateIndex - 1)">
      撤销
    </button>
    <button :disabled="!canRedo" @click="historyState(stateIndex + 1)">
      恢复
    </button>
  </div>
</template>

<script>
import  fabric  from "fabric";
export default 
  data() 
    return 
      canvas: null,
      isLoadCanvas: false,
      canvasState: [],
      stateIndex: -1,
    ;
  ,
  mounted() 
    this.canvas = new fabric.Canvas("canvas", 
      backgroundColor: "#f5deb3",
    );
    this.canvas.on("object:modified", this.updateCanvasState);
    this.canvas.on("object:added", this.updateCanvasState);
    this.addObject();
  ,
  computed: 
    canUndo() 
      return this.stateIndex > 0;
    ,
    canRedo() 
      return this.stateIndex < this.canvasState.length - 1;
    ,
  ,
  methods: 
    addObject() 
      const rect = new fabric.Rect(
        left: 100,
        top: 100,
        fill: "red",
        width: 200,
        height: 200,
      );
      this.canvas.add(rect);
      this.canvas.renderAll();
    ,

    updateCanvasState() 
      if (!this.isLoadCanvas) 
        const canvasAsJson = JSON.stringify(this.canvas.toJSON());
        this.canvasState.splice(this.stateIndex + 1);
        this.canvasState.push(canvasAsJson);
        this.stateIndex = this.canvasState.length - 1;
       else 
        this.isLoadCanvas = false;
      
    ,

    historyState(index) 
      if (this.canUndo || this.canRedo) 
        this.isLoadCanvas = true;
        this.canvas.loadFromJSON(this.canvasState[index], () => 
          this.canvas.renderAll();
          this.stateIndex = index;
        );
      
    ,
  ,
;
</script>

完结～

NX4.0的撤销恢复功能基于UG/OPEN GRIP二次开发实现的代码

NX4.0版本在使用中可以撤销，却不能进行撤销恢复，这点很让人头疼，据说NX6.0及之后的版本有该功能，想问一下谁知道关于该功能的函数文件是哪个，想试试用新版本的函数用二次开发实现NX4的该功能

参考技术A 没有必要麻烦，直接去学NX8，版本越高，功能越全。能解决复杂的部件