contract/src/views/drawSign.vue

<template>
  <multi-color-background>
    <h1 class="title">手绘签名</h1>
    <div class="inner draw" >
      <div class="canvas-container" @mousemove="beginPath($event)">
        <canvas
          id="canvas"
          class="fl"
          :width="canvasWidth"
          :height="canvasHeight"
          @mousedown="canvasDown($event)"
          @mouseup="canvasUp($event)"
          @mousemove="canvasMove($event)"
          @touchstart="canvasDown($event)"
          @touchend="canvasUp($event)"
          @touchmove="canvasMove($event)"
        >
        </canvas>
      </div>

        <div class="control">
          <!--画笔颜色-->
          <div class="canvas-color clearfix">
            <ul>
              <li
                v-for="item in colors"
                class="color-shower"
                :class="{'active':config.lineColor === item}"
                :style="{ background: item }"
                @click="setColor(item)"
              ></li>
            </ul>
          </div>

          <!--操作-->
          <div class="canvas-control clearfix">
            <button class="go-prev action-button" @click="controlCanvas('prev')"><-</button>
            <button class="go-next action-button"  @click="controlCanvas('next')">-></button>
          </div>
          <!-- 生成图像-->



        </div>
      <button class="draw-image" @click="getImage()">预览</button>
      <!--存放图片-->
    </div>
  </multi-color-background>
</template>
<script>
  import MultiColorBackground from "../components/multiColorBackground";
  export default {
    components: {MultiColorBackground},
    data () {
      return {
        colors: ['#333333','#1491e2','#df4848'],
        context: {},
        imgUrl: [],
        canvasMoveUse: true,
        // 存储当前表面状态数组-上一步
        preDrawAry: [],
        // 存储当前表面状态数组-下一步
        nextDrawAry: [],
        // 中间数组
        middleAry: [],
        // 配置参数
        config: {
          lineWidth: 1,
          lineColor: '#333333',
          shadowBlur: 2
        },
        canvasHeight:0,
        canvasWidth:0
      }
    },
    created () {
    },
    mounted () {
      const canvas = document.querySelector('#canvas')
      this.canvasHeight=parseFloat(window.getComputedStyle(canvas).getPropertyValue('height'));
      this.canvasWidth=parseFloat(window.getComputedStyle(canvas).getPropertyValue('width'));
      this.context = canvas.getContext('2d')
      this.initDraw()
      this.setCanvasStyle()
      // document.querySelector('#footer').classList.add('hide-footer')
      // document.querySelector('body').classList.add('fix-body')
    },
    destroyed () {
      // document.querySelector('#footer').classList.remove('hide-footer')
      // document.querySelector('body').classList.remove('fix-body')
    },
    computed: {
      controls () {
        return [{
          title: '上一步',
          action: 'prev',
          className: this.preDrawAry.length ? 'active fa fa-reply' : 'fa fa-reply'
        }, {
          title: '下一步',
          action: 'next',
          className: this.nextDrawAry.length ? 'active fa fa-share' : 'fa fa-share'
        }, {
          title: '清除',
          action: 'clear',
          className: (this.preDrawAry.length || this.nextDrawAry.length) ? 'active fa fa-trash' : 'fa fa-trash'
        }]
      }
    },
    methods: {
      isPc () {
        const userAgentInfo = navigator.userAgent
        const Agents = ['Android', 'iPhone', 'SymbianOS', 'Windows Phone', 'iPad', 'iPod']
        let flag = true
        for (let v = 0; v < Agents.length; v++) {
          if (userAgentInfo.indexOf(Agents[v]) > 0) {
            flag = false
            break
          }
        }
        return flag
      },
      removeImg (src) {
        this.imgUrl = this.imgUrl.filter(item => item !== src)
      },
      initDraw () {
        const preData = this.context.getImageData(0, 0, this.canvasWidth, this.canvasHeight)
        // 空绘图表面进栈
        this.middleAry.push(preData)
      },
      canvasMove (e) {
        if (this.canvasMoveUse) {
          console.log('canvasMove')
          const t = e.target
          let canvasX
          let canvasY
          if (this.isPc()) {
            canvasX = e.clientX - t.parentNode.offsetLeft
            canvasY = e.clientY - t.parentNode.offsetTop
          } else {
            canvasX = e.changedTouches[0].clientX - t.parentNode.offsetLeft
            canvasY = e.changedTouches[0].clientY - t.parentNode.offsetTop
          }
          this.context.lineTo(canvasX, canvasY)
          this.context.stroke()
        }
      },
      beginPath (e) {
        const canvas = document.querySelector('#canvas')
        if (e.target !== canvas) {
          console.log('beginPath')
          this.context.beginPath()
        }
      },
      // mouseup
      canvasUp (e) {
        console.log('canvasUp')
        const preData = this.context.getImageData(0, 0, 600, 400)
        if (!this.nextDrawAry.length) {
          // 当前绘图表面进栈
          this.middleAry.push(preData)
        } else {
          this.middleAry = []
          this.middleAry = this.middleAry.concat(this.preDrawAry)
          this.middleAry.push(preData)
          this.nextDrawAry = []
        }
        this.canvasMoveUse = false
      },
      // mousedown
      canvasDown (e) {
        console.log('canvasDown')
        this.canvasMoveUse = true
        // client是基于整个页面的坐标
        // offset是cavas距离顶部以及左边的距离
        const canvasX = e.clientX - e.target.parentNode.offsetLeft
        const canvasY = e.clientY - e.target.parentNode.offsetTop
        this.setCanvasStyle()
        // 清除子路径
        this.context.beginPath()
        this.context.moveTo(canvasX, canvasY)
        console.log('moveTo', canvasX, canvasY)
        // 当前绘图表面状态
        const preData = this.context.getImageData(0, 0, 600, 400)
        // 当前绘图表面进栈
        this.preDrawAry.push(preData)
      },
      // 设置颜色
      setColor (color) {
        // console.log(111)
        this.config.lineColor = color
      },
      // 操作
      controlCanvas (action) {
        switch (action) {
          case 'prev':
            if (this.preDrawAry.length) {
              const popData = this.preDrawAry.pop()
              const midData = this.middleAry[this.preDrawAry.length + 1]
              this.nextDrawAry.push(midData)
              this.context.putImageData(popData, 0, 0)
            }
            break
          case 'next':
            if (this.nextDrawAry.length) {
              const popData = this.nextDrawAry.pop()
              const midData = this.middleAry[this.middleAry.length - this.nextDrawAry.length - 2]
              this.preDrawAry.push(midData)
              this.context.putImageData(popData, 0, 0)
            }
            break
          case 'clear':
            this.context.clearRect(0, 0, this.context.canvas.width, this.context.canvas.height)
            this.preDrawAry = []
            this.nextDrawAry = []
            this.middleAry = [this.middleAry[0]]
            break
        }
      },
      // 生成图片
      getImage () {
        const canvas = document.querySelector('#canvas')
        const src = canvas.toDataURL('image/png')
        this.imgUrl.push(src)
        console.log(src);
      },
      // 设置绘画配置
      setCanvasStyle () {
        this.context.lineWidth = this.config.lineWidth
        this.context.shadowBlur = this.config.shadowBlur
        this.context.shadowColor = this.config.lineColor
        this.context.strokeStyle = this.config.lineColor
      }
    }
  }
</script>
<style >
  .title{
  color:white;
  font-size: 0.5rem;
  margin-top: 0.6rem;
  }
  .control{

    width: 100%;
    margin-top: 0.6rem;

  }
  .draw-image{
    width: 100%;
    height: 1.1rem;
    border-radius: 0.6rem;
    border: none;
    background-color: #60c0ff;
    color: #fff;
    font-size: 0.4rem;
    margin-top: 0.6rem;
  }
  .canvas-container{
    padding: 1px;
    width: 100%;
    height: 11.1rem;
  }

  .inner{
      margin: 0.4rem 0.4rem 0;
      width: 9.2rem;

      }
  .color-shower{
    width: 0.4rem;
    height: 0.4rem;
    border-radius: 0.2rem;
    float: left;
    margin-right: 0.6rem;
    margin-top: 0.1rem;
  }
  .color-shower.active{
    width: 0.6rem;
    height: 0.6rem;
    border-radius: 0.3rem;
    margin-top: 0;
  }
  .canvas-color{
    margin-top: 0.25rem;
    float: left;
    width: 50%;
  }
  .canvas-control{
    float: right;
    width: 50%;
    text-align: right;
  }
  #canvas{
      width: 100%;
    /*width: 100%;*/
      height: 11.1rem;
      background-color: white;
      border-radius: 0.1rem;
      }
  .action-button{
    width: 1.1rem;
    height: 1.1rem;
    border: none;
    border-radius: 100%;
    background-color: #60c0ff;
    color: white;
    font-size: 0.4rem;
  }
  .go-prev{
    margin-right: 0.7rem;
  }
</style>
<!--<template>-->

    <!--<multi-color-background top-height="2.7">-->
      <!--<h1 class="title">手绘签名</h1>-->
      <!--<div class="main" >-->
        <!--<canvas class="draw-area" id="draw-area">-->

        <!--</canvas>-->
      <!--</div>-->
    <!--</multi-color-background>-->

<!--</template>-->

<!--<script>-->
    <!--import Draw from '../components/drawing.js';-->

    <!--import MultiColorBackground from "../components/multiColorBackground";-->
    <!--export default {-->
        <!--name: "drawSign",-->
      <!--components: {MultiColorBackground},-->
      <!--mounted(){-->
        <!--let draw = new Draw('draw-area')-->
      <!--}-->
    <!--}-->
<!--</script>-->

<!--<style scoped>-->
  <!--.title{-->
    <!--color:white;-->
    <!--font-size: 0.5rem;-->
    <!--margin-top: 0.6rem;-->
  <!--}-->
  <!--.main .input-container{-->
    <!--background-color: white;-->
    <!--border: 1px  white solid;-->
    <!--border-radius: 10px;-->
  <!--}-->
  <!--.main{-->
    <!--margin: 0.4rem 0.4rem 0;-->

  <!--}-->
  <!--.draw-area{-->
    <!--width: 100%;-->
    <!--height: 11.1rem;-->
    <!--background-color: white;-->
    <!--border-radius: 0.1rem;-->
  <!--}-->
<!--</style>-->