项目实训八

画笔功能实现的问题

在画笔功能中，初始设置的背景板为透明，但考虑到实现橡皮擦的功能，将背景板设置为白色

橡皮擦功能 

const onChangePenType = (e) => {
  console.log(e)
  if (e === '橡皮') {
    t_lineWidth.value = lineWidth.value
    t_lineColor.value = lineColor.value
    lineWidth.value = 20 // 线宽
    lineColor.value = '#ffffff' // 笔颜色
  } else {
    lineWidth.value = t_lineWidth.value // 线宽
    lineColor.value = t_lineColor.value // 笔颜色
  }
}

默认值设置

const lineWidth = ref(6) // 默认线宽
const lineColor = ref('#000000') // 默认笔颜色
const bgColor = ref('rgba(255,255,255,1)') // 默认手绘板背景
const resultImg = ref('') // 手绘板生成的图片，默认为空
const isCrop = ref(false) // 默认不剪切
const latexValue = ref()
const penType = ref('画笔') // 默认笔类型
const t_lineWidth = ref(6) // 默认线宽
const t_lineColor = ref('#000000') // 默认笔颜色

 线宽选择

const options = ref([
  {
    value: '2',
  },
  {
    value: '4',
  },
  {
    value: '6',
  },
  {
    value: '8',
  },
  {
    value: '10',
  },
])

手绘框输入区域

        <vue-esign class="esignature" ref="esign" :width="800" :height="250" :isCrop="isCrop" :lineWidth="lineWidth"
          :lineColor="lineColor" v-model:bgColor="bgColor" />
        <!-- 功能按钮 -->
        <div class="esigh-btns">
          <el-button type="danger" @click="handleReset">清空画板</el-button>
          <el-button type="danger" @click="handleGenerate">识别</el-button>
          <el-button type="danger" @click="clearReset">清空结果</el-button>
        </div>
      </div>
    </div>
    <!-- 输入区域-结束 -->

清空画板

const handleReset = () => {
  esign.value.reset()
  penType.value = '画笔'
  onChangePenType()

  setTimeout(() => {
    bgColor.value = 'rgba(255,255,255,1)'
  }, 1)
}

清空识别结果

const clearReset = () => {
  resultImg.value = ''
  latexValue.value = ''
}

修改画笔的宽度和颜色

// 修改画笔宽度
const changeWidth = (e) => {
  lineWidth.value = e
  t_lineWidth.value = e
}

// 修改画笔颜色
const changeColor = (e) => {
  lineColor.value = e
  t_lineColor.value = e
}