sulibao-mini/tuniao-ui/components/tn-sign-board/tn-sign-board.vue

<template>
  <view v-if="show" class="tn-sign-board-class tn-sign-board" :style="{top: `${customBarHeight}px`, height: `calc(100% - ${customBarHeight}px)`}">
    <!-- 签名canvas -->
    <view class="tn-sign-board__content">
      <view class="tn-sign-board__content__wrapper">
        <canvas class="tn-sign-board__content__canvas" :canvas-id="canvasName" :disableScroll="true" @touchstart="onTouchStart" @touchmove="onTouchMove" @touchend="onTouchEnd"></canvas>
      </view>
    </view>
    
    <!-- 底部工具栏 -->
    <view class="tn-sign-board__tools">
      <!-- 可选颜色 -->
      <view class="tn-sign-board__tools__color">
        <view
          v-for="(item, index) in signSelectColor"
          :key="index"
          class="tn-sign-board__tools__color__item"
          :class="[{'tn-sign-board__tools__color__item--active': currentSelectColor === item}]"
          :style="{backgroundColor: item}"
          @tap="colorSwitch(item)"
        ></view>
      </view>
      
      <!-- 按钮 -->
      <view class="tn-sign-board__tools__button">
        <view class="tn-sign-board__tools__button__item tn-bg-red" @tap="reDraw">清除</view>
        <view class="tn-sign-board__tools__button__item tn-bg-blue" @tap="save">保存</view>
        <view class="tn-sign-board__tools__button__item tn-bg-indigo" @tap="previewImage">预览</view>
        <view class="tn-sign-board__tools__button__item tn-bg-orange" @tap="closeBoard">关闭</view>
      </view>
    </view>
    
    <!-- 伪全屏生成旋转图片canvas容器，不在页面上展示 -->
    <view style="position: fixed; left: -2000px;width: 0;height: 0;overflow: hidden;">
      <canvas canvas-id="temp-tn-sign-canvas" :style="{width: `${canvasHeight}px`, height: `${canvasHeight}px`}"></canvas>
    </view>
  </view>
</template>

<script>
  export default {
    name: 'tn-sign-board',
    props: {
      // 是否显示
      show: {
        type: Boolean,
        default: false
      },
      // 可选签名颜色
      signSelectColor: {
        type: Array,
        default() {
          return ['#080808', '#E83A30']
        }
      },
      // 是否旋转输出图片
      rotate: {
        type: Boolean,
        default: true
      },
      // 自定义顶栏的高度
      customBarHeight: {
        type: [String, Number],
        default: 0
      }
    },
    data() {
      return {
        canvasName: 'tn-sign-canvas',
        ctx: null,
        canvasWidth: 0,
        canvasHeight: 0,
        currentSelectColor: this.signSelectColor[0],
        // 第一次触摸
        firstTouch: false,
        // 透明度
        transparent: 1,
        // 笔迹倍数
        lineSize: 1.5,
        // 最小画笔半径
        minLine: 0.5,
        // 最大画笔半径
        maxLine: 4,
        // 画笔压力
        pressure: 1,
        // 顺滑度，用60的距离来计算速度
        smoothness: 60,
        // 当前触摸的点
        currentPoint: {},
        // 当前线条
        currentLine: [],
        // 画笔圆半径
        radius: 1,
        // 裁剪区域
        cutArea: {
          top: 0,
          right: 0,
          bottom: 0,
          left: 0
        },
        // 所有线条， 生成贝塞尔点
        // bethelPoint: [],
        // 上一个点
        lastPoint: 0,
        // 笔迹
        chirography: [],
        // 当前笔迹
        // currentChirography: {},
        // 画线轨迹，生成线条的实际点
        linePrack: []
      }
    },
    watch: {
      show(value) {
        if (value && this.canvasWidth === 0 && this.canvasHeight === 0) {
          this.$nextTick(() => {
            this.getCanvasInfo()
          })
        }
      },
      signSelectColor(value) {
        if (value.length > 0) {
          this.currentSelectColor = value[0]
        }
      }
    },
    created() {
      // 创建canvas
      this.ctx = uni.createCanvasContext(this.canvasName, this)
    },
    mounted() {
      // 获取画板的相关信息
      // this.$nextTick(() => {
      //   this.getCanvasInfo()
      // })
    },
    methods: {
      // 获取画板的相关信息
      getCanvasInfo() {
        this._tGetRect('.tn-sign-board__content__canvas').then(res => {
         this.canvasWidth = res.width
         this.canvasHeight = res.height
         
         // 初始化Canvas
         this.$nextTick(() => {
           this.initCanvas('#FFFFFF')
         })
        })
      },
      // 初始化Canvas
      initCanvas(color) {
        /* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
        // rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
        // 矩形的宽高需要减去边框的宽度
        this.ctx.rect(0, 0, this.canvasWidth - uni.upx2px(4), this.canvasHeight - uni.upx2px(4))
        this.ctx.setFillStyle(color)
        this.ctx.fill()
        this.ctx.draw()
      },
      // 开始画
      onTouchStart(e) {
        if (e.type != 'touchstart') return false
        
        // 设置线条颜色
        this.ctx.setFillStyle(this.currentSelectColor)
        // 设置透明度
        this.ctx.setGlobalAlpha(this.transparent)
        let currentPoint = {
          x: e.touches[0].x,
          y: e.touches[0].y
        }
        let currentLine = this.currentLine
        currentLine.unshift({
          time: new Date().getTime(),
          dis: 0,
          x: currentPoint.x,
          y: currentPoint.y
        })
        this.currentPoint = currentPoint
        
        if (this.firstTouch) {
          this.cutArea = {
            top: currentPoint.y,
            right: currentPoint.x,
            bottom: currentPoint.y,
            left: currentPoint.x
          }
          this.firstTouch = false
        }
        
        this.pointToLine(currentLine)
      },
      // 正在画
      onTouchMove(e) {
        if (e.type != 'touchmove') return false
        if (e.cancelable) {
          // 判断默认行为是否已经被禁用
          if (!e.defaultPrevented) {
            e.preventDefault()
          }
        }
        let point = {
          x: e.touches[0].x,
          y: e.touches[0].y
        }
        
        if (point.y < this.cutArea.top) {
          this.cutArea.top = point.y
        }
        if (point.y < 0) this.cutArea.top = 0
        
        if (point.x < this.cutArea.right) {
          this.cutArea.right = point.x
        }
        if (this.canvasWidth - point.x <= 0) {
          this.cutArea.right = this.canvasWidth
        }
        if (point.y > this.cutArea.bottom) {
          this.cutArea.bottom = this.canvasHeight
        }
        if (this.canvasHeight - point.y <= 0) {
          this.cutArea.bottom = this.canvasHeight
        }
        if (point.x < this.cutArea.left) {
          this.cutArea.left = point.x
        }
        if (point.x < 0) this.cutArea.left = 0
        
        this.lastPoint = this.currentPoint
        this.currentPoint = point
        
        let currentLine = this.currentLine
        currentLine.unshift({
          time: new Date().getTime(),
          dis: this.distance(this.currentPoint, this.lastPoint),
          x: point.x,
          y: point.y
        })
        
        this.pointToLine(currentLine)
      },
      // 移动结束
      onTouchEnd(e) {
        if (e.type != 'touchend') return false
        let point = {
          x: e.changedTouches[0].x,
          y: e.changedTouches[0].y
        }
        this.lastPoint = this.currentPoint
        this.currentPoint = point
        
        let currentLine = this.currentLine
        currentLine.unshift({
          time: new Date().getTime(),
          dis: this.distance(this.currentPoint, this.lastPoint),
          x: point.x,
          y: point.y
        })
        
        //一笔结束，保存笔迹的坐标点，清空，当前笔迹
        //增加判断是否在手写区域
        this.pointToLine(currentLine)
        let currentChirography = {
          lineSize: this.lineSize,
          lineColor: this.currentSelectColor
        }
        
        let chirography = this.chirography
        chirography.unshift(currentChirography)
        this.chirography = chirography
        
        let linePrack = this.linePrack
        linePrack.unshift(this.currentLine)
        this.linePrack = linePrack
        this.currentLine = []
      },
      // 重置绘画板
      reDraw() {
        this.initCanvas('#FFFFFF')
      },
      // 保存
      save() {
        // 在组件内使用需要第二个参数this
        uni.canvasToTempFilePath({
          canvasId: this.canvasName,
          fileType: 'png',
          quality: 1,
          success: (res) => {
            if (this.rotate) {
              this.getRotateImage(res.tempFilePath).then((res) => {
                this.$emit('save', res)
              }).catch(err => {
                this.$t.message.toast('旋转图片失败')
              })
            } else {
              this.$emit('save', res.tempFilePath)
            }
          },
          fail: () => {
            this.$t.message.toast('保存失败')
          }
        }, this)
      },
      // 预览图片
      previewImage() {
        // 在组件内使用需要第二个参数this
        uni.canvasToTempFilePath({
          canvasId: this.canvasName,
          fileType: 'png',
          quality: 1,
          success: (res) => {
            if (this.rotate) {
              this.getRotateImage(res.tempFilePath).then((res) => {
                uni.previewImage({
                  urls: [res]
                })
              }).catch(err => {
                this.$t.message.toast('旋转图片失败')
              })
            } else {
              uni.previewImage({
                urls: [res.tempFilePath]
              })
            }
          },
          fail: (e) => {
            this.$t.message.toast('预览失败')
          }
        }, this)
      },
      // 关闭签名板
      closeBoard() {
        this.$t.message.modal('提示信息','关闭后内容将被清除，是否确认关闭',() => {
          this.$emit('closed')
        }, true)
      },
      // 切换画笔颜色
      colorSwitch(color) {
        this.currentSelectColor = color
      },
      // 绘制两点之间的线条
      pointToLine(line) {
        this.calcBethelLine(line)
      },
      // 计算插值，让线条更加圆滑
      calcBethelLine(line) {
        if (line.length <= 1) {
          line[0].r = this.radius
          return
        }
        let x0,
          x1,
          x2,
          y0,
          y1,
          y2,
          r0,
          r1,
          r2,
          len,
          lastRadius,
          dis = 0,
          time = 0,
          curveValue = 0.5;
        if (line.length <= 2) {
          x0 = line[1].x
          y0 = line[1].y
          x2 = line[1].x + (line[0].x - line[1].x) * curveValue
          y2 = line[1].y + (line[0].y - line[1].y) * curveValue
          x1 = x0 + (x2 - x0) * curveValue
          y1 = y0 + (y2 - y0) * curveValue
        } else {
          x0 = line[2].x + (line[1].x - line[2].x) * curveValue
          y0 = line[2].y + (line[1].y - line[2].y) * curveValue
          x1 = line[1].x
          y1 = line[1].y
          x2 = x1 + (line[0].x - x1) * curveValue
          y2 = y1 + (line[0].y - y1) * curveValue
        }
        // 三个点分别是(x0,y0),(x1,y1),(x2,y2) ；(x1,y1)这个是控制点，控制点不会落在曲线上；实际上，这个点还会手写获取的实际点，却落在曲线上
        len = this.distance({
          x: x2,
          y: y2
        }, {
          x: x0,
          y: y0
        })
        lastRadius = this.radius
        for (let i = 0; i < line.length - 1; i++) {
          dis += line[i].dis
          time += line[i].time - line[i + 1].time
          if (dis > this.smoothness) break
        }
        
        this.radius = Math.min((time / len) * this.pressure + this.minLine, this.maxLine) * this.lineSize
        line[0].r = this.radius
        // 计算笔迹半径
        if (line.length <= 2) {
          r0 = (lastRadius + this.radius) / 2
          r1 = r0
          r2 = r1
        } else {
          r0 = (line[2].r + line[1].r) / 2
          r1 = line[1].r
          r2 = (line[1].r + line[0].r) / 2
        }
        let n = 5
        let point = []
        for (let i = 0; i < n; i++) {
          let t = i / (n - 1)
          let x = (1 - t) * (1 - t) * x0 + 2 * t * (1 - t) * x1 + t * t * x2
          let y = (1 - t) * (1 - t) * y0 + 2 * t * (1 - t) * y1 + t * t * y2
          let r = lastRadius + ((this.radius - lastRadius) / n) * i
          point.push({
            x,
            y,
            r
          })
          if (point.length === 3) {
            let a = this.ctaCalc(point[0].x, point[0].y, point[0].r, point[1].x, point[1].y, point[1].r, point[2].x, point[2].y, point[2].r)
            a[0].color = this.currentSelectColor
            
            this.drawBethel(a, true)
            point = [{
              x,
              y,
              r
            }]
          }
        }
        this.currentLine = line
      },
      // 求两点之间的距离
      distance(a, b) {
        let x = b.x - a.x
        let y = b.y - a.y
        return Math.sqrt(x * x + y * y)
      },
      // 计算点信息
      ctaCalc(x0, y0, r0, x1, y1, r1, x2, y2, r2) {
        let a = [],
          vx01,
          vy01,
          norm,
          n_x0,
          n_y0,
          vx21,
          vy21,
          n_x2,
          n_y2;
        vx01 = x1 - x0
        vy01 = y1 - y0
        norm = Math.sqrt(vx01 * vx01 + vy01 * vy01 + 0.0001) * 2
        vx01 = (vx01 / norm) * r0
        vy01 = (vy01 / norm) * r0
        n_x0 = vy01
        n_y0 = -vx01
        vx21 = x1 - x2
        vy21 = y1 - y2
        norm = Math.sqrt(vx21 * vx21 + vy21 * vy21 + 0.0001) * 2
        vx21 = (vx21 / norm) * r2
        vy21 = (vy21 / norm) * r2
        n_x2 = -vy21
        n_y2 = vx21
        a.push({
          mx: x0 + n_x0,
          my: y0 + n_y0,
          color: '#080808'
        })
        a.push({
          c1x: x1 + n_x0,
          c1y: y1 + n_y0,
          c2x: x1 + n_x2,
          c2y: y1 + n_y2,
          ex: x2 + n_x2,
          ey: y2 + n_y2
        })
        a.push({
          c1x: x2 + n_x2 - vx21,
          c1y: y2 + n_y2 - vy21,
          c2x: x2 - n_x2 - vx21,
          c2y: y2 - n_y2 - vy21,
          ex: x2 - n_x2,
          ey: y2 - n_y2
        })
        a.push({
          c1x: x1 - n_x2,
          c1y: y1 - n_y2,
          c2x: x1 - n_x0,
          c2y: y1 - n_y0,
          ex: x0 - n_x0,
          ey: y0 - n_y0
        })
        a.push({
          c1x: x0 - n_x0 - vx01,
          c1y: y0 - n_y0 - vy01,
          c2x: x0 + n_x0 - vx01,
          c2y: y0 + n_y0 - vy01,
          ex: x0 + n_x0,
          ey: y0 + n_y0
        })
        a[0].mx = a[0].mx.toFixed(1)
        a[0].mx = parseFloat(a[0].mx)
        a[0].my = a[0].my.toFixed(1)
        a[0].my = parseFloat(a[0].my)
        for (let i = 1; i < a.length; i++) {
          a[i].c1x = a[i].c1x.toFixed(1)
          a[i].c1x = parseFloat(a[i].c1x)
          a[i].c1y = a[i].c1y.toFixed(1)
          a[i].c1y = parseFloat(a[i].c1y)
          a[i].c2x = a[i].c2x.toFixed(1)
          a[i].c2x = parseFloat(a[i].c2x)
          a[i].c2y = a[i].c2y.toFixed(1)
          a[i].c2y = parseFloat(a[i].c2y)
          a[i].ex = a[i].ex.toFixed(1)
          a[i].ex = parseFloat(a[i].ex)
          a[i].ey = a[i].ey.toFixed(1)
          a[i].ey = parseFloat(a[i].ey)
        }
        return a
      },
      // 绘制贝塞尔曲线
      drawBethel(point, is_fill, color) {
        this.ctx.beginPath()
        this.ctx.moveTo(point[0].mx, point[0].my)
        if (color != undefined) {
          this.ctx.setFillStyle(color)
          this.ctx.setStrokeStyle(color)
        } else {
          this.ctx.setFillStyle(point[0].color)
          this.ctx.setStrokeStyle(point[0].color)
        }
        for (let i = 1; i < point.length; i++) {
          this.ctx.bezierCurveTo(point[i].c1x, point[i].c1y, point[i].c2x, point[i].c2y, point[i].ex, point[i].ey)
        }
        this.ctx.stroke()
        if (is_fill != undefined) {
          //填充图形 ( 后绘制的图形会覆盖前面的图形, 绘制时注意先后顺序 )
          this.ctx.fill()
        }
        this.ctx.draw(true)
      },
      // 旋转图片
      async getRotateImage(dataUrl) {
        // const url = await this.base64ToPath(dataUrl)
        const url = dataUrl
        
        // 创建新画布
        const tempCtx = uni.createCanvasContext('temp-tn-sign-canvas', this)
        const width = this.canvasWidth
        const height = this.canvasHeight
        tempCtx.restore()
        tempCtx.save()
        tempCtx.translate(0, height)
        tempCtx.rotate(270 * Math.PI / 180)
        tempCtx.drawImage(url, 0, 0, width, height)
        tempCtx.draw()
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            uni.canvasToTempFilePath({
              canvasId: 'temp-tn-sign-canvas',
              fileType: 'png',
              x: 0,
              y: height - width,
              width: height,
              height: width,
              success: res => resolve(res.tempFilePath),
              fail: reject
            }, this)
          }, 50)
        })
      },
      // 将base64转换为本地
      base64ToPath(dataUrl) {
        return new Promise((resolve, reject) => {
          // 判断地址是否包含bas64字样，不包含直接返回
          if (dataUrl.indexOf('base64') !== -1) {
            const data = uni.base64ToArrayBuffer(dataUrl.replace(/^data:image\/\w+;base64,/, ''))
            // #ifdef MP-WEIXIN
            const filePath = `${wx.env.USER_DATA_PATH}/${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
            // #endif
            // #ifndef MP-WEIXIN
            const filePath = `${new Date().getTime()}-${Math.random().toString(32).slice(2)}.png`
            // #endif
            uni.getFileSystemManager().writeFile({
              filePath,
              data,
              encoding: 'base64',
              success: () => resolve(filePath),
              fail: reject
            })
          } else {
            resolve(dataUrl)
          }
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  
  .tn-sign-board {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    width: 100%;
    height: 100%;
    background-color: #E6E6E6;
    z-index: 997;
    display: flex;
    flex-direction: row-reverse;
    
    &__content {
      width: 84%;
      height: 100%;
      
      &__wrapper {
        width: calc(100% - 60rpx);
        height: calc(100% - 60rpx);
        margin: 30rpx;
        border-radius: 20rpx;
        border: 2rpx dotted #AAAAAA;
        overflow: hidden;
      }
      
      &__canvas {
        width: 100%;
        height: 100%;
        background-color: #FFFFFF;
      }
    }
    
    &__tools {
      width: 16%;
      height: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      
      &__color {
        margin-top: 30rpx;
        
        &__item {
          width: 70rpx;
          height: 70rpx;
          border-radius: 100rpx;
          margin: 20rpx auto;
          
          &--active {
            position: relative;
            
            &::after {
              content: '';
              position: absolute;
              top: 50%;
              left: 50%;
              width: 40%;
              height: 40%;
              border-radius: 100rpx;
              background-color: #FFFFFF;
              transform: translate(-50%, -50%);
            }
          }
        }
      }
      
      &__button {
        margin-bottom: 30rpx;
        display: flex;
        flex-direction: column;
        
        &__item {
          width: 130rpx;
          height: 60rpx;
          line-height: 60rpx;
          text-align: center;
          margin: 60rpx auto;
          border-radius: 10rpx;
          color: #FFFFFF;
          transform-origin: center center;
          transform: rotateZ(90deg);
        }
      }
    }
  }
</style>