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

<!-- eslint-disable vue/no-v-html -->
<template>
  <div class="drawimg-preview" :style="[getAreaStyle(), getComponentStyle()]">
    <SerialNumberPosition v-if="isEnable(data.property.sn_display_mode)" :property="data.property" />

    <div
      class="img-box"
      :style="{
        background: image_url ? '' : '#DCDFE6',
        width: isMobile ? '100%' : data.image_width + 'px',
        height: isMobile ? mobileHeight + 'px' : data.image_height + 'px',
        border: '1px dotted #DCDFE6',
      }"
    >
      <div
        v-if="image_url"
        class="img-set"
        :style="{ top: `${data.imgData.top - 9}px`, left: `${data.imgData.left}px` }"
      >
        <img
          :src="image_url"
          draggable="false"
          :alt="convertText('背景图')"
          :style="{
            width: isMobile ? '100%' : `${data.imgData.width}px`,
            height: isMobile ? mobileHeight + 'px' : `${data.imgData.height}px`,
          }"
        />
      </div>
      <!-- 如果是查看答案模式 v-if 下面画画的vue-esign不显示 -->
      <!-- <img :src="answer.answer_list[0].answer" alt="" /> -->
      <!-- <vue-esign
        ref="esign-drawing"
        class="esign-canvas"
        :width="data.image_width"
        :height="data.image_height"
        :is-crop="isCrop"
        :line-width="lineWidth"
        :line-color="lineColor"
      /> -->
      <VueSignaturePad
        ref="signaturePad"
        class="esign-canvas"
        :width="isMobile ? '100%' : data.image_width + 'px'"
        :height="isMobile ? mobileHeight + 'px' : data.image_height + 'px'"
        :options="options"
      />
    </div>
    <div class="footer">
      <div class="pen">
        <!-- 选择颜色 -->
        <el-color-picker v-model="lineColor" @change="changeColor" />
        <!-- 清除一笔 -->
        <img class="clean-btn" src="@/assets/drawing-back.png" @click="undo" />
        <!-- 清空画板 -->
        <img class="clean-btn" src="@/assets/icon-clean.png" @click="clear" />
        <img :src="penIndex == 0 ? thinpenActive : thinpen" class="pen-img" @click="selSize(0)" />
        <img :src="penIndex == 1 ? thickpenActive : thickpen" class="pen-img" @click="selSize(1)" />
        <img :src="penIndex == 2 ? thicskpenActive : thicskpen" class="pen-img" @click="selSize(2)" />
        <div class="save" @click="save">Save</div>
      </div>
    </div>
  </div>
</template>

<script>
import PreviewMixin from '../common/PreviewMixin';
import { getDrawingData } from '@/views/book/courseware/data/drawing';

export default {
  name: 'DrawingPreview',
  mixins: [PreviewMixin],
  props: {
    isMobile: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      data: getDrawingData(),
      penIndex: 0,
      image_url: '',
      lineWidth: 2,
      lineColor: '#000000',
      bgColor: '#f7f8fa',
      isCrop: false,
      weightList: [1, 2, 3],
      thinpen: require('@/assets/thin-pen.png'), // 细笔
      thinpenActive: require('@/assets/thin-pen-active.png'),
      thickpen: require('@/assets/thick-pen.png'),
      thickpenActive: require('@/assets/thick-pen-active.png'),
      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,
      mobileHeight: 0,
    };
  },
  created() {
    this.initData();
  },
  mounted() {},
  methods: {
    // 撤销
    undo() {
      this.$refs.signaturePad.undoSignature();
    },
    // 清除
    clear() {
      this.$refs.signaturePad.clearSignature();
    },
    // 保存
    save() {
      this.signData = this.$refs.signaturePad.toData();
      const { data } = this.$refs.signaturePad.saveSignature();
      this.imgSrc = data;
      this.answer.answer_list[0].answer = data;
      this.$message.success(this.convertText('保存成功'));
    },
    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 = [];
        let obj = {
          answer: '',
        };
        this.answer.answer_list.push(obj);
      }

      this.data.image_list.forEach((item) => {
        this.image_url = item.file_url;
        // GetFileURLMap({ file_id_list: [item.file_id] }).then(({ url_map }) => {
        //   this.image_url = url_map[item.file_id];
        // });
      });
      if (this.isMobile) {
        setTimeout(() => {
          let totalWidth = document.querySelector('.drawimg-preview').offsetWidth;
          this.mobileHeight = (totalWidth / this.data.image_width) * this.data.image_height;
        }, 50);
      }
    },
    // 保存图片
    handleGenerate() {
      this.$refs['esign-drawing']
        .generate()
        .then((res) => {
          this.resultImg = res;
          this.answer.answer_list[0].answer = res;
          this.$message.success('保存成功');
        })
        .catch((err) => {});
    },
    changePen(index) {
      this.penIndex = index;
      this.lineWidth = this.weightList[this.penIndex];
    },
    handleReset() {
      this.$refs['esign-drawing'].reset(false);
    },
    // 删除最后一笔
    removeOne() {
      // this.$refs['esign-drawing'].removelastOne();
    },
  },
};
</script>

<style lang="scss" scoped>
@use '@/styles/mixin.scss' as *;

.img-box {
  position: relative;
  margin: 20px auto;
}

.img-set {
  position: relative;
  z-index: 0;
  display: inline-grid;
  grid-template:
    ' . . . ' 2px
    ' . img . ' auto
    ' . . . ' 2px
    / 2px auto 2px;

  img {
    object-fit: cover;
  }
}

.esign-canvas {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 1;
}

.pen {
  display: flex;
  align-items: center;
  justify-content: flex-end;

  .save {
    box-sizing: border-box;
    width: 65px;
    height: 32px;
    margin-left: 16px;
    font-size: 16px;
    font-weight: 400;
    line-height: 32px;
    color: #000;
    text-align: center;
    cursor: pointer;
    background: rgba(0, 0, 0, 5%);
    border: 1px solid rgba(0, 0, 0, 10%);
    border-radius: 6px;
  }

  .save:hover {
    background: rgba(0, 0, 0, 25%);
  }

  > img {
    width: 24px;
    height: 24px;
    margin: 0 8px;
    cursor: pointer;
  }
}
</style>