<template lang="pug">
  div.cpt-signature
    div.paint-area.border.border-gray.mb1
      i.icon.icon-trash-empty.btn(title="清除" @click="sigInstance.clear()")
</template>

<script>
import CptHandwrite from './CptHandwrite';
export default {
  data() {
    return {
      sigInstance: null
    };
  },
  mounted() {
    this.sigInstance = new CptHandwrite(this.$el.querySelector('.paint-area'));
    this.sigInstance.lineMax = 2;
    this.sigInstance.lineMin = 2;
    this.sigInstance.linePressure = 2.5;
    this.sigInstance.smoothness = 20;
  },
  methods: {
    getImageData() {
      return this.sigInstance.getImageDataUrl();
    }
  }
};
</script>

<style lang="less">
.cpt-signature {
  .paint-area {
    height: 150px;
    position: relative;
    canvas {
      user-select: none;
    }
    .btn {
      position: absolute;
      top: 2px;
      left: 2px;
      font-size: 1.3rem;
      cursor: pointer;
      color: rgba(0, 0, 0, 0.1);
      float: left;
      transition: all .3s;
    }
    &:hover .btn {
      color: rgba(0, 0, 0, 0.8);
    }
  }
}
</style>
