画板撤销

package.json

@@ -39,6 +39,7 @@
     "vue": "^2.6.14",
     "vue-esign": "^1.1.4",
     "vue-router": "^3.6.5",
+    "vue-signature-pad": "^2.0.5",
     "vuedraggable": "^2.24.3",
     "vuex": "^3.6.2"
   },

src/main.js

@@ -16,12 +16,17 @@ import '@/styles/element-variables.scss';
 import '@/utils/mathjax'; // 必须在引入mathjax前引入mathjax的配置文件
 import 'mathjax/es5/tex-mml-chtml';
 
+import VueSignaturePad from "vue-signature-pad";
+
+
 import { setupRouterGuard } from '@/router/guard';
 
 Vue.use(ElementUI, {
   size: 'small',
 });
 
+Vue.use(VueSignaturePad);
+
 setupRouterGuard(router);
 
 Vue.config.productionTip = false;

src/views/book/courseware/preview/components/drawing/DrawingPreview.vue

@@ -26,7 +26,7 @@
       </div>
       <!-- 如果是查看答案模式 v-if 下面画画的vue-esign不显示 -->
       <!-- <img :src="answer.answer_list[0].answer" alt="" /> -->
-      <vue-esign
+      <!-- <vue-esign
         ref="esign-drawing"
         class="esign-canvas"
         :width="data.image_width"
@@ -34,20 +34,27 @@
         :is-crop="isCrop"
         :line-width="lineWidth"
         :line-color="lineColor"
+      /> -->
+      <VueSignaturePad
+        class="esign-canvas"
+        :width="data.image_width + 'px'"
+        :height="data.image_height + 'px'"
+        ref="signaturePad"
+        :options="options"
       />
     </div>
     <div class="footer">
       <div class="pen">
         <!-- 选择颜色 -->
-        <el-color-picker v-model="lineColor"></el-color-picker>
+        <el-color-picker v-model="lineColor" @change="changeColor"></el-color-picker>
         <!-- 清除一笔 -->
-        <!-- <img @click="removeOne" class="clean-btn" src="@/assets/drawing-back.png" /> -->
+        <img @click="undo" class="clean-btn" src="@/assets/drawing-back.png" />
         <!-- 清空画板 -->
-        <img @click="handleReset" class="clean-btn" src="@/assets/icon-clean.png" />
-        <img :src="penIndex == 0 ? thinpenActive : thinpen" @click="changePen(0)" class="pen-img" />
-        <img :src="penIndex == 1 ? thickpenActive : thickpen" @click="changePen(1)" class="pen-img" />
-        <img :src="penIndex == 2 ? thicskpenActive : thicskpen" @click="changePen(2)" class="pen-img" />
-        <div class="save" @click="handleGenerate">Save</div>
+        <img @click="clear" class="clean-btn" src="@/assets/icon-clean.png" />
+        <img :src="penIndex == 0 ? thinpenActive : thinpen" @click="selSize(0)" class="pen-img" />
+        <img :src="penIndex == 1 ? thickpenActive : thickpen" @click="selSize(1)" class="pen-img" />
+        <img :src="penIndex == 2 ? thicskpenActive : thicskpen" @click="selSize(2)" class="pen-img" />
+        <div class="save" @click="save">Save</div>
       </div>
     </div>
   </div>
@@ -72,7 +79,7 @@ export default {
       lineColor: '#000000',
       bgColor: '#f7f8fa',
       isCrop: false,
-      weightList: [2, 4, 8],
+      weightList: [1, 2, 3],
       thinpen: require('@/assets/thin-pen.png'), //细笔
       thinpenActive: require('@/assets/thin-pen-active.png'),
       thickpen: require('@/assets/thick-pen.png'),
@@ -80,6 +87,18 @@ export default {
       thicskpen: require('@/assets/thicks-pen.png'),
       thicskpenActive: require('@/assets/thicks-pen-active.png'),
       resultImg: null,
+
+      panelTitle: '',
+      options: {
+        penColor: this.lineColor,
+        minWidth: 1, //控制画笔最小宽度
+        maxWidth: 1, //控制画笔最大宽度
+      },
+      isActive1: true,
+      isActive2: false,
+      isActive3: false,
+      imgSrc: '',
+      signData: null,
     };
   },
   created() {
@@ -87,6 +106,53 @@ export default {
   },
   mounted() {},
   methods: {
+    //撤销
+    undo() {
+      this.$refs.signaturePad.undoSignature();
+    },
+    //清除
+    clear() {
+      this.$refs.signaturePad.clearSignature();
+    },
+    //保存
+    save() {
+      this.signData = this.$refs.signaturePad.toData();
+      const { isEmpty, data } = this.$refs.signaturePad.saveSignature();
+      this.imgSrc = data;
+      this.answer.answer_list[0].answer = data;
+      this.$message.success('保存成功');
+    },
+    replay() {
+      const signaturePad = this.$refs.signaturePad;
+      const data = signaturePad.toData(); // 获取签名数据
+      signaturePad.clearSignature(); // 清空画布以开始新动画
+      data.forEach((item) => {
+        item.points.forEach((point, index) => {
+          setTimeout(() => {
+            signaturePad.lineTo(point.x, point.y); // 画线到指定点
+            if (index === data.points.length - 1) {
+            }
+          }, index * 10); // 控制播放速度，可以根据需要调整时间间隔
+        });
+      });
+    },
+    // 调节颜色
+    changeColor(val) {
+      this.options = {
+        penColor: val,
+        minWidth: this.weightList[this.penIndex],
+        maxWidth: this.weightList[this.penIndex],
+      };
+    },
+    //调节画笔粗细大小
+    selSize(index) {
+      this.penIndex = index;
+      this.options = {
+        penColor: this.lineColor,
+        minWidth: this.weightList[this.penIndex],
+        maxWidth: this.weightList[this.penIndex],
+      };
+    },
     initData() {
       if (!this.isJudgingRightWrong) {
         this.answer.answer_list = [];
@@ -104,7 +170,6 @@ export default {
     },
     // 保存图片
     handleGenerate() {
-      console.log(this.$refs['esign-drawing']);
       this.$refs['esign-drawing']
         .generate()
         .then((res) => {
@@ -140,6 +205,7 @@ export default {
 
 .img-set {
   position: relative;
+  z-index: 0;
   display: inline-grid;
   grid-template:
     ' . . . ' 2px
@@ -152,6 +218,13 @@ export default {
   }
 }
 
+.esign-canvas {
+  position: absolute;
+  top: 0;
+  left: 0;
+  z-index: 1;
+}
+
 .pen {
   display: flex;
   align-items: center;