<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; // 設(shè)置畫布寬
    this.board.height = this.$refs.boardBox.offsetHeight; // 設(shè)置畫布高
    console.log(this.board.width,this.board.height)
    this.ctx = this.board.getContext("2d"); // 二維繪圖
    this.ctx.strokeStyle = "#000000"; // 顏色
    this.ctx.lineWidth = 3; // 線條寬度
  },
  methods: {
    // 鼠標(biāo)按下(開始)
    pcStart(e) {
      let x = e.offsetX,
          y = e.offsetY; // 獲取鼠標(biāo)在畫板（canvas）的坐標(biāo)
      this.point.x = x;
      this.point.y = y;
      this.ctx.beginPath();
      this.moving = true;
    },
    // 鼠標(biāo)移動（移動中...）
    pcMove(e) {
      this.flg  = true
      if (this.moving) {
        let x = e.offsetX,
          y = e.offsetY; // 獲取鼠標(biāo)在畫板（canvas）的坐標(biāo)
        this.ctx.moveTo(this.point.x, this.point.y); // 把路徑移動到畫布中的指定點歧寺，不創(chuàng)建線條(起始點)
        this.ctx.lineTo(x, y); // 添加一個新點部逮，然后創(chuàng)建從該點到畫布中最后指定點的線條哮幢，不創(chuàng)建線條
        this.ctx.stroke(); // 繪制
        (this.point.x = x), (this.point.y = y); // 重置點坐標(biāo)為上一個坐標(biāo)
      }
    },
    // 鼠標(biāo)松開（結(jié)束）
    pcEnd() {
      if (this.moving) {
        this.ctx.closePath(); // 停止繪制
        this.moving = false; // 關(guān)閉繪制開關(guān)
      }
    },
    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>