<template>
    <div class="boardBox" ref="boardBox">
        <canvas ref="board"
                @mousedown="pcStart"
                @mousemove="pcMove"
                @mouseup="pcEnd">
        </canvas>
        <div class="sign-btn">
            <div class="clear" @click="clear">
                清空
            </div>
            <div class="save" @click="save">
                保存
            </div>
        </div>
    </div>
</template>

<script>
export default {
  name: "signatureLine",
  components: {},
  data() {
    return {
      ctx: null,
      point: {
        x: 0,
        y: 0
      },
      moving: false, // 是否正在绘制中且移动
      board: "",
      flg:false,//识别用户是否画了
    };
  },
  mounted() {
    this.board = this.$refs.board; // 获取DOM
    this.board.width = this.$refs.boardBox.offsetWidth; // 设置画布宽
    this.board.height = this.$refs.boardBox.offsetHeight; // 设置画布高
    console.log(this.board.width,this.board.height)
    this.ctx = this.board.getContext("2d"); // 二维绘图
    this.ctx.strokeStyle = "#000000"; // 颜色
    this.ctx.lineWidth = 3; // 线条宽度
  },
  methods: {
    // 鼠标按下(开始)
    pcStart(e) {
      let x = e.offsetX,
          y = e.offsetY; // 获取鼠标在画板（canvas）的坐标
      this.point.x = x;
      this.point.y = y;
      this.ctx.beginPath();
      this.moving = true;
    },
    // 鼠标移动（移动中...）
    pcMove(e) {
      this.flg  = true
      if (this.moving) {
        let x = e.offsetX,
          y = e.offsetY; // 获取鼠标在画板（canvas）的坐标
        this.ctx.moveTo(this.point.x, this.point.y); // 把路径移动到画布中的指定点，不创建线条(起始点)
        this.ctx.lineTo(x, y); // 添加一个新点，然后创建从该点到画布中最后指定点的线条，不创建线条
        this.ctx.stroke(); // 绘制
        (this.point.x = x), (this.point.y = y); // 重置点坐标为上一个坐标
      }
    },
    // 鼠标松开（结束）
    pcEnd() {
      if (this.moving) {
        this.ctx.closePath(); // 停止绘制
        this.moving = false; // 关闭绘制开关
      }
    },
    clear() {
      this.flg=false
      this.ctx.clearRect(0, 0, this.board.width, this.board.height);
    },
    save() {
      if(this.flg){
        const imgBase64 = this.$refs.board.toDataURL();
        // console.log(imgBase64);
        console.log('画了')
      }else{
        console.log('没有画')
      }
    }
  }
};
</script>

<style scoped lang="scss">
.boardBox {
  margin: 100px auto 20px;
  //   width: 80vw;
  //   height: 35vh;
  width: 200px;
  height: 80px;
  background: #eee;
  canvas {
    border: 1px solid #298cff;
  }
}

.sign-btn div {
  width: 175px;
  text-align: center;
  height: 70px;
  line-height: 70px;
  color: #ffffff;
}
.sign-btn div:active {
  background-color: #cccccc;
  color: #333333;
}
.sign-btn .clear {
  background-color: #ff8f58;
}
.sign-btn .save {
  background-color: #0599d7;
}
</style>