dvcp_v2_wxcp_app/library/components/pages/sealDrawer.vue

<template>
  <section class="sealDrawer">
    <slot name="tools"/>
    <div v-if="drawPlaceholder" class="placeholder">{{ placeholder }}</div>
    <canvas disable-scroll type="canvas" canvas-id="drawer" id="drawer" @mousedown.stop="handleDrawStart"
            @mouseup.stop="handleDrawEnd" @mouseleave="handleDrawEnd" @mousemove.stop="handleDrawing"
            @touchstart.stop="handleDrawStart" @touchend.stop="handleDrawEnd" @touchmove="handleDrawing"/>
    <AiBottomBtn v-if="isVertical">
      <div flex>
        <div class="fill text reset" @click.stop="handleClean">重写</div>
        <div class="fill text" @click.stop="submit">提交</div>
      </div>
    </AiBottomBtn>
    <template v-else>
      <div class="resetSignature left" @click.stop="handleClean">重写</div>
      <div class="resetSignature" @click.stop="submit">提交</div>
    </template>
  </section>
</template>

<script>
export default {
  name: "sealDrawer",
  appName: "签名",
  props: {
    placeholder: {type: String, default: "请在此处清晰书写你的签名"},
  },
  data() {
    return {
      drawing: false,//判断是否处于绘画中
      drawer: {},
      drawPlaceholder: true,
      isVertical: true
    }
  },
  watch: {
    drawing() {
      this.drawPlaceholder = false
    }
  },
  mounted() {
    window.onresize = () => {
      this.isVertical = ![90, -90].includes(window.orientation)
    }
    this.initDrawer()
  },
  methods: {
    initDrawer() {
      this.$nextTick(() => {
        let canvas = uni.createCanvasContext("drawer")
        if (canvas) {
          this.drawer = canvas
          this.drawer.setLineWidth(3)
          this.drawer.setShadow(0, 0, 2, '#333')
          this.drawer.setStrokeStyle('#333')
        }
      })
    },
    handleDrawStart(e) {
      this.drawing = true
      const {x, y} = e.changedTouches?.[0] || {}
      this.drawer?.beginPath()
      this.drawer?.moveTo(x, y)
    },
    handleDrawEnd() {
      this.drawing = false
    },
    handleDrawing(e) {
      if (this.drawing) {
        const {x, y} = e.changedTouches?.[0] || {}
        // // 连接到移动的位置并上色
        this.drawer.lineTo(x, y)
        this.drawer.stroke()
        this.drawer.draw(true)
        this.drawer?.beginPath()
        this.drawer?.moveTo(x, y)
      }
    },
    handleClean() {
      this.drawer.clearRect(0, 0, document.body.clientWidth, document.body.clientHeight)
      this.drawer.draw()
      this.drawPlaceholder = true
    },
    submit() {
      uni.canvasToTempFilePath({
        canvasId: 'drawer',
        quality: 1,
        success: res => {
          // 在H5平台下，tempFilePath 为 base64
          const result = res.tempFilePath
          uni.navigateBack({
            success: () => {
              uni.$emit("pagePicker:custom", result)
            }
          })
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.sealDrawer {
  height: 100vh;
  width: 100vw;
  overflow: hidden;
  background: #F7F7F7;
  position: relative;

  #drawer {
    width: 100%;
    height: 100%;
    display: block;
    cursor: crosshair;
  }

  .resetSignature {
    position: absolute;
    width: 152px;
    height: 64px;
    background: rgba(#000, .5);
    border-radius: 32px;
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    cursor: pointer;
    right: 16px;
    top: 16px;
    font-size: 32px;
    z-index: 2;

    &.left {
      right: unset;
      left: 16px;
    }
  }

  .placeholder {
    pointer-events: none;
    position: absolute;
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    max-width: 407px;
    text-align: center;
    font-size: 64px;
    color: #DDDDDD;
  }

  ::v-deep.reset {
    background-color: #fff;
    color: #333;
  }
}
</style>