vue3手写签名通用

### Vue3 实现手写签名功能 #### 创建基础项目结构 为了实现手写签名的功能，首先需要设置好Vue3环境。如果尚未安装Vue CLI工具，则可以通过npm全局安装它。 ```bash npm install -g @vue/cli ``` 接着创建一个新的Vue项目： ```bash vue create vue-signature-demo cd vue-signature-demo ``` #### 安装依赖包 对于更高效的操作DOM以及处理Canvas绘图事件，推荐引入一些辅助库如`@chenfengyuan/vue-esign`[^1] 或者自己编写逻辑来控制画布上的交互行为。 #### 编写组件代码 下面是一个简单的Vue3单文件组件(SFC)，用于展示如何利用原生HTML5 Canvas API配合Vue响应式特性完成基本的手写签名功能[^4]。 ```html <template> <div> <!-- 设置canvas宽度高度 --> <canvas ref="signatureCanvas"></canvas> <button @click="clear">清除</button> <button @click="saveAsImage">保存为图片</button> <label>选择颜色:</label> <input type="color" v-model="penColor"/> </div> </template> <script setup lang="ts"> import { onMounted, ref } from 'vue'; // 获取dom元素引用 const signatureCanvas = ref<HTMLCanvasElement | null>(null); let ctx: CanvasRenderingContext2D; let isDrawing = false; onMounted(() => { const canvasElm = signatureCanvas.value!; // 初始化context对象 ctx = canvasElm.getContext('2d') as CanvasRenderingContext2D; ctx.strokeStyle = penColor.value; }); // 响应用户输入改变画笔颜色 const penColor = ref('#000'); function startDraw(event: MouseEvent){ isDrawing=true; draw(event); } function stopDraw(){ isDrawing=false; ctx.beginPath(); } function movePointer(event: MouseEvent){ if(!isDrawing)return; draw(event); } function draw(event:MouseEvent){ let rect=signatureCanvas.value!.getBoundingClientRect(); let x=event.clientX-rect.left,y=event.clientY-rect.top; ctx.lineTo(x,y); ctx.stroke(); ctx.moveTo(x,y); } window.addEventListener('mousedown',startDraw); window.addEventListener('mouseup',stopDraw); window.addEventListener('mousemove',movePointer); // 清除整个画布内容 function clear() { ctx.clearRect(0, 0, ctx.canvas.width, ctx.canvas.height); } // 将当前画布转换成图像数据URL并下载 async function saveAsImage() { try{ var dataUrl = await new Promise<string>((resolve,reject)=>{ setTimeout(()=>{ resolve(signatureCanvas.value?.toDataURL('image/png')) },100) }); var link=document.createElement('a'); link.href=dataUrl; link.download='signature.png'; document.body.appendChild(link); link.click(); document.body.removeChild(link); } catch(error){ console.error("Failed to export image",error); } } </script> <style scoped> /* 自定义样式 */ canvas { border: 1px solid black; } </style> ``` 此示例展示了怎样通过监听鼠标的按下(`mousedown`)、抬起(`mouseup`)和移动(`mousemove`)事件来进行连续线条的绘制操作；同时也提供了清空画板(`clear`)与导出图片(`saveAsImage`)的方法。 #### 进一步优化建议 考虑到实际应用场景可能更加复杂多样，比如支持触摸设备、多级撤销重做等功能需求，可以考虑基于现有基础上进一步扩展完善该组件。例如采用第三方插件[@chenfengyuan/vue-esign]简化开发流程，或是参考其他开源项目的最佳实践案例[^2]。