1. 项目概述为什么小程序签名板是个“小而美”的刚需最近在做一个政务类的微信小程序项目客户明确要求线上签署电子告知书。这需求听起来简单不就是让用户签个名嘛但真做起来发现坑不少。用户习惯在手机屏幕上“挥毫泼墨”但默认的竖屏Canvas画布又窄又长写出来的名字歪歪扭扭体验极差。于是“横屏签名板”这个需求就变得非常具体且必要了。这不仅仅是一个Canvas绘图功能它涉及到微信小程序横屏适配、高性能绘图、笔迹平滑、数据导出与合规性等一系列问题。市面上虽然有一些现成的组件但要么功能不全要么定制性差要么在特定机型上表现不稳定。自己动手实现一个既能完全掌控体验细节也能深入理解小程序图形处理的核心。这个功能在电子合同、在线审批、服务确认、教育答题等场景下都是高频刚需做好了能极大提升产品的专业度和用户体验。2. 核心思路与方案选型不止是画一条线那么简单实现一个可用的签名板核心目标是流畅、真实、易用、可靠。这决定了我们不能简单地用一个canvas画线了事需要一套组合方案。2.1 为什么选择Canvas而非SVG或WebGL在小程序环境里Canvascanvas组件是实现手写签名最主流、最成熟的选择。性能与可控性Canvas提供的是像素级的直接绘制APIwx.createCanvasContext或更新的Canvas 2D接口我们可以精确控制每一帧的绘制实现低延迟的笔迹跟随。这对于需要实时响应touchmove事件的签名场景至关重要。兼容性与生态小程序对Canvas的支持非常完善从基础库1.0.0开始就存在相关API稳定。社区有大量关于Canvas性能优化、抗锯齿、离屏渲染的实践方案可供参考。对比SVGSVG是矢量图形更适合绘制由几何形状组成的复杂但静态的图形。签名是动态的、由无数个微小线段组成的路径用SVG实时操作DOM虽然小程序里是虚拟DOM来添加无数个path元素性能开销巨大极易造成卡顿。对比WebGLWebGL性能最强但复杂度也最高。它主要用于3D渲染或需要极大量像素计算的2D场景如复杂的图像滤镜。对于签名板这种“画线”应用属于杀鸡用牛刀开发成本高且在小程序端支持度相对Canvas 2D没有明显优势。因此Canvas 2D是我们的不二之选。这里要注意小程序Canvas有旧版ContextAPI和新版Canvas 2DAPI通过type2d指定。新版API更接近Web标准性能更好功能更强是当前的首选。2.2 横屏适配的两种策略与取舍签名需要横向空间横屏适配是体验的关键。主要有两种思路页面级横屏通过page.json配置或wx.setScreenOrientationAPI将整个页面设置为横屏。这种方式最彻底系统会自动旋转界面Canvas可以获得最大的横向绘制区域。优点实现简单Canvas画布可以设置为全屏宽度书写区域最大化。缺点会改变整个页面的布局需要重新设计横屏下的UI如按钮位置、提示文字等可能影响小程序其他功能的正常显示。对于只需要签名板横屏的场景显得有点“兴师动众”。组件级横屏模拟横屏页面保持竖屏但我们通过CSS旋转transform: rotate(90deg)将一个固定高度的容器包含Canvas旋转90度使其在视觉上呈现横屏效果。优点对页面其他部分无侵入只影响签名板组件本身灵活性强。缺点需要手动处理旋转后的坐标转换因为用户触摸的是旋转后的屏幕区域但Canvas内部的坐标系并未改变实现稍复杂。同时旋转可能在某些安卓机型上引发轻微的渲染性能问题。我的选择与理由对于专注签名功能的独立页面我倾向于使用页面级横屏。因为我们的核心目标就是让用户签名整个页面都可以为此服务。通过page.json中配置pageOrientation: landscape即可实现。这样能获得最纯粹、最稳定的横屏绘制体验省去了坐标转换的麻烦。如果签名板只是某个复杂页面中的一个模块则采用组件级模拟横屏更为合适。2.3 技术栈与工具选型基础绘图微信小程序原生Canvas 2DAPI。无需额外库最轻量兼容性最好。笔迹平滑自定义算法实现。这是签名板“手感”的灵魂核心是解决touchmove事件采集点稀疏导致的折线感。我们会采用“贝塞尔曲线插值”或“加权平均”算法来让线条圆滑。撤销/重做使用栈Stack数据结构记录每一步的绘图操作或图像数据ctx.getImageData。清空直接调用ctx.clearRect或重新设置画布宽高会重置画布状态。导出图片使用wx.canvasToTempFilePath将Canvas内容导出为临时图片路径再通过wx.saveImageToPhotosAlbum保存至相册或通过wx.uploadFile上传至服务器。组件化将签名板封装为自定义组件提高复用性。需要特别注意在组件中使用Canvas时选择器的作用域问题。3. 核心实现细节拆解从画布初始化到一笔一划3.1 Canvas画布初始化与横屏设置首先我们在页面的WXML中放置Canvas组件。为了获得最佳性能我们使用type2d。!-- pages/sign/sign.wxml -- view classsign-container !-- 提示信息 -- view classtip请在下方区域签名/view !-- 核心画布 -- canvas type2d idsignCanvas classsign-canvas disable-scrolltrue bindtouchstartonTouchStart bindtouchmoveonTouchMove bindtouchendonTouchEnd /canvas !-- 操作按钮 -- view classtoolbar button sizemini bindtaphandleUndo撤销/button button sizemini bindtaphandleClear清空/button button typeprimary bindtaphandleConfirm确认签名/button /view /view对应的JSON文件配置页面为横屏// pages/sign/sign.json { navigationBarTitleText: 手写签名, pageOrientation: landscape }CSS样式确保Canvas撑满可用区域/* pages/sign/sign.wxss */ .sign-container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .tip { padding: 20rpx; text-align: center; color: #666; } .sign-canvas { flex: 1; width: 100%; /* 高度由flex:1决定宽度100%在横屏下即最大宽度 */ background-color: #fff; } .toolbar { padding: 30rpx; display: flex; justify-content: space-around; background-color: #fff; border-top: 1rpx solid #eee; }注意disable-scrolltrue这个属性非常关键。它可以防止在画布上拖动时引起整个页面的滚动确保触摸事件被Canvas独占否则签名体验会非常糟糕笔迹会断断续续。3.2 获取Canvas上下文与坐标校正在页面的onReady生命周期中我们需要获取Canvas的上下文和它的实际尺寸信息。这里有个关键点Canvas节点的宽高与CSS设置的宽高是两回事。我们必须显式设置Canvas节点的绘图宽高canvas.width,canvas.height否则绘图会模糊。// pages/sign/sign.js Page({ data: { ctx: null, canvasWidth: 0, canvasHeight: 0, points: [] // 用于记录当前笔画的点 }, onReady() { this.initCanvas(); }, async initCanvas() { return new Promise((resolve, reject) { // 创建SelectorQuery获取Canvas节点 const query wx.createSelectorQuery(); query.select(#signCanvas) .fields({ node: true, size: true }) .exec(async (res) { if (!res[0]) { reject(new Error(Canvas节点未找到)); return; } const canvas res[0].node; const dpr wx.getSystemInfoSync().pixelRatio; // 获取设备像素比 // 1. 设置Canvas节点实际宽高像素 // CSS宽高是750rpx * 某个值这里需要转换成物理像素 const { width: cssWidth, height: cssHeight } res[0]; canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; // 2. 获取2D上下文 const ctx canvas.getContext(2d); // 3. 缩放上下文以匹配CSS尺寸解决高清屏模糊问题 ctx.scale(dpr, dpr); // 4. 初始化画笔样式 ctx.lineWidth 4; ctx.lineCap round; // 线条末端为圆形 ctx.lineJoin round; // 线条连接处为圆形 ctx.strokeStyle #000000; // 黑色笔迹 // 5. 将上下文和尺寸存入data并清空画布 this.setData({ ctx: ctx, canvasWidth: cssWidth, canvasHeight: cssHeight }); this.clearCanvas(); resolve(); }); }); }, clearCanvas() { const { ctx, canvasWidth, canvasHeight } this.data; if (ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 注意ctx.clearRect 使用的是经过scale后的逻辑坐标所以这里用cssWidth/Height ctx.draw(); // 小程序中修改了Canvas内容后需要调用draw才能渲染到屏幕 } } })实操心得ctx.scale(dpr, dpr)这一步是解决Canvas在高清屏如Retina屏上绘制模糊的关键。我们按照CSS尺寸逻辑像素来绘图但Canvas内部是以物理像素为单位的。通过缩放上下文我们让1个逻辑单位的笔触对应dpr个物理像素从而绘制出清晰的图形。这是很多新手容易忽略的地方。3.3 触摸事件处理与基础绘制接下来是核心的触摸事件处理。我们需要在touchstart时开始一条新路径在touchmove时收集点并连线在touchend时结束路径。// 继续 pages/sign/sign.js Page({ // ... 其他数据和方法 onTouchStart(e) { const { ctx } this.data; const touch e.touches[0]; // 获取触摸点相对于Canvas的位置 const x touch.x; const y touch.y; // 开始一条新路径 ctx.beginPath(); ctx.moveTo(x, y); // 初始化当前笔画的点集 this.setData({ points: [{x, y}] }); }, onTouchMove(e) { const { ctx, points } this.data; const touch e.touches[0]; const x touch.x; const y touch.y; // 将点加入当前笔画集合 const newPoints [...points, {x, y}]; this.setData({ points: newPoints }); // 基础绘制直接连线 ctx.lineTo(x, y); ctx.stroke(); ctx.draw(); // 实时渲染 }, onTouchEnd() { const { ctx } this.data; // 结束当前路径 ctx.closePath(); // 清空当前笔画点集为下一次笔画准备 this.setData({ points: [] }); } })这样一个最基础的签名板就完成了。但你会发现快速书写时线条会有明显的“折线”感不够圆滑。这是因为touchmove事件的触发频率有限采集到的点不够密集。4. 进阶优化让笔迹如丝般顺滑4.1 笔迹平滑算法实现为了解决折线问题我们需要在已采集到的稀疏点之间插入新的点让路径变得更连续。这里介绍一种简单有效的二次贝塞尔曲线插值方法。我们不在onTouchMove中直接lineTo而是收集点。在每次onTouchMove时我们取最近的两个点当前点和上一个点用它们计算出控制点然后用quadraticCurveTo绘制一条曲线。Page({ // ... 其他数据 data: { lastPoint: null, // 上一个触摸点 currentPoint: null, // 当前触摸点 }, onTouchStart(e) { const { ctx } this.data; const touch e.touches[0]; const x touch.x; const y touch.y; this.setData({ lastPoint: {x, y}, currentPoint: {x, y} }); ctx.beginPath(); ctx.moveTo(x, y); ctx.draw(); }, onTouchMove(e) { const { ctx, lastPoint, currentPoint } this.data; const touch e.touches[0]; const newPoint {x: touch.x, y: touch.y}; if (lastPoint currentPoint) { // 计算控制点取上一个点和当前点的中点 const cpx (lastPoint.x currentPoint.x) / 2; const cpy (lastPoint.y currentPoint.y) / 2; // 使用二次贝塞尔曲线绘制到控制点 ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, cpx, cpy); ctx.stroke(); ctx.draw(); // 移动路径起点到当前点为下一段曲线做准备 ctx.beginPath(); ctx.moveTo(cpx, cpy); } // 更新点记录 this.setData({ lastPoint: currentPoint, currentPoint: newPoint }); }, onTouchEnd() { const { ctx, lastPoint, currentPoint } this.data; // 绘制最后一段曲线 if (lastPoint currentPoint) { ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, currentPoint.x, currentPoint.y); ctx.stroke(); ctx.draw(); } // 重置点记录 this.setData({ lastPoint: null, currentPoint: null }); } })这个算法能显著改善线条的平滑度。其原理是利用贝塞尔曲线的特性用上一个点作为控制点向当前点与上一个点的中点绘制曲线使得线条转折处变得圆润。4.2 性能优化防抖与离屏绘制在低端机上频繁调用ctx.draw()可能导致卡顿。我们可以引入一个简单的防抖机制。Page({ data: { drawTimer: null, }, onTouchMove(e) { // ... 计算和绘制逻辑 // 使用防抖减少draw调用频率 if (this.data.drawTimer) { clearTimeout(this.data.drawTimer); } this.setData({ drawTimer: setTimeout(() { ctx.draw(); this.setData({ drawTimer: null }); }, 16) // 大约60fps的间隔 }); } })对于更极致的性能要求可以考虑离屏Canvas。将主要的绘制操作在一个隐藏的、尺寸相同的离屏Canvas上完成然后定期将离屏Canvas的内容一次性绘制到显示Canvas上。但这会显著增加代码复杂度对于大多数签名场景上述优化已足够。5. 功能完善撤销、清空与导出5.1 撤销与重做功能的实现实现撤销/重做本质上是记录画布的历史状态。最直接的方法是使用ctx.getImageData和ctx.putImageData来保存和恢复像素数据但这对大画布性能影响较大。更轻量级的方法是记录绘图命令。这里采用一种折中方案记录每个笔画结束时的画布快照ImageData。虽然占用内存但实现简单。Page({ data: { history: [], // 历史记录栈 historyIndex: -1, // 当前历史位置 }, onTouchEnd() { // ... 绘制结束逻辑 // 保存当前画布状态到历史 this.saveToHistory(); }, async saveToHistory() { const { ctx, canvasWidth, canvasHeight } this.data; const dpr wx.getSystemInfoSync().pixelRatio; // 注意getImageData需要物理像素尺寸 const imageData ctx.getImageData(0, 0, canvasWidth * dpr, canvasHeight * dpr); // 截断当前指针之后的历史如果执行过撤销后又画了新内容 let newHistory this.data.history.slice(0, this.data.historyIndex 1); newHistory.push(imageData); this.setData({ history: newHistory, historyIndex: newHistory.length - 1 }); }, handleUndo() { let { history, historyIndex, ctx, canvasWidth, canvasHeight } this.data; if (historyIndex 0) { // 没有可撤销的了清空画布 this.clearCanvas(); this.setData({ historyIndex: -1 }); return; } historyIndex--; this.setData({ historyIndex }); // 恢复历史状态 const imageData history[historyIndex]; const dpr wx.getSystemInfoSync().pixelRatio; ctx.putImageData(imageData, 0, 0); ctx.draw(); }, handleClear() { this.clearCanvas(); this.setData({ history: [], historyIndex: -1 }); } })注意事项getImageData和putImageData操作的是原始像素数据尺寸必须是Canvas的物理像素宽高canvas.width,canvas.height而不是CSS逻辑宽高。同时频繁操作大尺寸的ImageData非常消耗内存历史栈不宜过深例如最多10步。5.2 签名图片导出与上传用户签名完成后需要将Canvas内容导出为图片。Page({ handleConfirm() { this.exportCanvasToImage().then(tempFilePath { // 1. 可以预览 wx.previewImage({ urls: [tempFilePath] }); // 2. 可以保存到本地相册需要用户授权 // this.saveImageToAlbum(tempFilePath); // 3. 可以上传到服务器 // this.uploadSignature(tempFilePath); }).catch(err { console.error(导出失败, err); wx.showToast({ title: 导出失败, icon: none }); }); }, async exportCanvasToImage() { return new Promise((resolve, reject) { const query wx.createSelectorQuery(); query.select(#signCanvas) .fields({ node: true }) .exec((res) { if (!res[0]) { reject(Canvas未找到); return; } const canvas res[0].node; wx.canvasToTempFilePath({ canvas: canvas, canvasId: signCanvas, // 如果用的是canvas-id则用这个 fileType: png, quality: 1, // 图片质量0-1 success: (res) { resolve(res.tempFilePath); }, fail: reject }); }); }); }, saveImageToAlbum(tempFilePath) { wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success: () { wx.showToast({ title: 已保存到相册 }); }, fail: (err) { if (err.errMsg.includes(auth deny)) { wx.showModal({ title: 提示, content: 需要您授权保存图片到相册, success: (res) { if (res.confirm) { wx.openSetting(); // 引导用户打开设置页授权 } } }); } } }); }, uploadSignature(tempFilePath) { wx.uploadFile({ url: https://your-server.com/api/upload-signature, filePath: tempFilePath, name: signature, formData: { userId: 123 }, success: (res) { const data JSON.parse(res.data); if (data.code 0) { wx.showToast({ title: 上传成功 }); // 返回上一页或进行下一步操作 wx.navigateBack(); } } }); } })6. 避坑指南与进阶思考在实际开发中我踩过不少坑这里总结几个关键点Canvas层级问题小程序的Canvas是原生组件层级最高会覆盖在普通视图组件之上。这意味着你无法用z-index让一个普通的view浮在Canvas上面。如果需要在签名板上面叠加“确认”、“清除”等按钮必须将这些按钮放在另一个页面或者使用小程序的cover-view组件专用于覆盖原生组件。真机调试差异在开发者工具上流畅的绘制在真机上特别是低端安卓机可能卡顿。务必进行真机调试。除了前面提到的防抖还可以考虑降低touchmove事件的采样频率通过判断移动距离或者简化平滑算法。横屏下的坐标获取如果你采用“组件级模拟横屏”CSS旋转那么从touch事件中获取的x, y坐标是相对于旋转后的容器的与Canvas内部坐标系不一致。你需要进行坐标转换// 假设容器旋转了90度 const actualX canvasHeight - touch.y; // 注意这里canvasHeight是CSS高度 const actualY touch.x;计算起来比较绕容易出错这也是我推荐直接使用“页面级横屏”的原因之一。内存管理历史记录功能如果保存完整的ImageData内存增长很快。对于长时间使用的应用建议限制历史栈深度或采用更节省内存的命令记录模式。笔锋效果更高级的签名板可以模拟钢笔的笔锋效果根据速度改变线条粗细。这需要计算触摸点之间的移动速度动态调整ctx.lineWidth。实现起来复杂但对提升真实感有帮助。数据安全与合规电子签名涉及法律效力。在实际商用项目中除了前端生成图片后端必须对签名图片进行哈希存证、时间戳固化并与业务逻辑绑定。前端生成的图片建议转换为Base64或二进制数据与用户ID、时间、合同哈希值等一起打包上传确保签名数据的完整性和不可篡改性。实现一个体验良好的微信小程序手写签名板是一个融合了交互设计、图形编程和性能优化的综合性任务。从确定横屏方案到处理Canvas高清屏模糊再到实现笔迹平滑和撤销功能每一步都需要仔细考量。希望这篇详细的拆解能帮你避开我踩过的那些坑快速打造出属于自己的、流畅顺滑的签名组件。
1. 项目概述为什么小程序签名板是个“小而美”的刚需最近在做一个政务类的微信小程序项目客户明确要求线上签署电子告知书。这需求听起来简单不就是让用户签个名嘛但真做起来发现坑不少。用户习惯在手机屏幕上“挥毫泼墨”但默认的竖屏Canvas画布又窄又长写出来的名字歪歪扭扭体验极差。于是“横屏签名板”这个需求就变得非常具体且必要了。这不仅仅是一个Canvas绘图功能它涉及到微信小程序横屏适配、高性能绘图、笔迹平滑、数据导出与合规性等一系列问题。市面上虽然有一些现成的组件但要么功能不全要么定制性差要么在特定机型上表现不稳定。自己动手实现一个既能完全掌控体验细节也能深入理解小程序图形处理的核心。这个功能在电子合同、在线审批、服务确认、教育答题等场景下都是高频刚需做好了能极大提升产品的专业度和用户体验。2. 核心思路与方案选型不止是画一条线那么简单实现一个可用的签名板核心目标是流畅、真实、易用、可靠。这决定了我们不能简单地用一个canvas画线了事需要一套组合方案。2.1 为什么选择Canvas而非SVG或WebGL在小程序环境里Canvascanvas组件是实现手写签名最主流、最成熟的选择。性能与可控性Canvas提供的是像素级的直接绘制APIwx.createCanvasContext或更新的Canvas 2D接口我们可以精确控制每一帧的绘制实现低延迟的笔迹跟随。这对于需要实时响应touchmove事件的签名场景至关重要。兼容性与生态小程序对Canvas的支持非常完善从基础库1.0.0开始就存在相关API稳定。社区有大量关于Canvas性能优化、抗锯齿、离屏渲染的实践方案可供参考。对比SVGSVG是矢量图形更适合绘制由几何形状组成的复杂但静态的图形。签名是动态的、由无数个微小线段组成的路径用SVG实时操作DOM虽然小程序里是虚拟DOM来添加无数个path元素性能开销巨大极易造成卡顿。对比WebGLWebGL性能最强但复杂度也最高。它主要用于3D渲染或需要极大量像素计算的2D场景如复杂的图像滤镜。对于签名板这种“画线”应用属于杀鸡用牛刀开发成本高且在小程序端支持度相对Canvas 2D没有明显优势。因此Canvas 2D是我们的不二之选。这里要注意小程序Canvas有旧版ContextAPI和新版Canvas 2DAPI通过type2d指定。新版API更接近Web标准性能更好功能更强是当前的首选。2.2 横屏适配的两种策略与取舍签名需要横向空间横屏适配是体验的关键。主要有两种思路页面级横屏通过page.json配置或wx.setScreenOrientationAPI将整个页面设置为横屏。这种方式最彻底系统会自动旋转界面Canvas可以获得最大的横向绘制区域。优点实现简单Canvas画布可以设置为全屏宽度书写区域最大化。缺点会改变整个页面的布局需要重新设计横屏下的UI如按钮位置、提示文字等可能影响小程序其他功能的正常显示。对于只需要签名板横屏的场景显得有点“兴师动众”。组件级横屏模拟横屏页面保持竖屏但我们通过CSS旋转transform: rotate(90deg)将一个固定高度的容器包含Canvas旋转90度使其在视觉上呈现横屏效果。优点对页面其他部分无侵入只影响签名板组件本身灵活性强。缺点需要手动处理旋转后的坐标转换因为用户触摸的是旋转后的屏幕区域但Canvas内部的坐标系并未改变实现稍复杂。同时旋转可能在某些安卓机型上引发轻微的渲染性能问题。我的选择与理由对于专注签名功能的独立页面我倾向于使用页面级横屏。因为我们的核心目标就是让用户签名整个页面都可以为此服务。通过page.json中配置pageOrientation: landscape即可实现。这样能获得最纯粹、最稳定的横屏绘制体验省去了坐标转换的麻烦。如果签名板只是某个复杂页面中的一个模块则采用组件级模拟横屏更为合适。2.3 技术栈与工具选型基础绘图微信小程序原生Canvas 2DAPI。无需额外库最轻量兼容性最好。笔迹平滑自定义算法实现。这是签名板“手感”的灵魂核心是解决touchmove事件采集点稀疏导致的折线感。我们会采用“贝塞尔曲线插值”或“加权平均”算法来让线条圆滑。撤销/重做使用栈Stack数据结构记录每一步的绘图操作或图像数据ctx.getImageData。清空直接调用ctx.clearRect或重新设置画布宽高会重置画布状态。导出图片使用wx.canvasToTempFilePath将Canvas内容导出为临时图片路径再通过wx.saveImageToPhotosAlbum保存至相册或通过wx.uploadFile上传至服务器。组件化将签名板封装为自定义组件提高复用性。需要特别注意在组件中使用Canvas时选择器的作用域问题。3. 核心实现细节拆解从画布初始化到一笔一划3.1 Canvas画布初始化与横屏设置首先我们在页面的WXML中放置Canvas组件。为了获得最佳性能我们使用type2d。!-- pages/sign/sign.wxml -- view classsign-container !-- 提示信息 -- view classtip请在下方区域签名/view !-- 核心画布 -- canvas type2d idsignCanvas classsign-canvas disable-scrolltrue bindtouchstartonTouchStart bindtouchmoveonTouchMove bindtouchendonTouchEnd /canvas !-- 操作按钮 -- view classtoolbar button sizemini bindtaphandleUndo撤销/button button sizemini bindtaphandleClear清空/button button typeprimary bindtaphandleConfirm确认签名/button /view /view对应的JSON文件配置页面为横屏// pages/sign/sign.json { navigationBarTitleText: 手写签名, pageOrientation: landscape }CSS样式确保Canvas撑满可用区域/* pages/sign/sign.wxss */ .sign-container { height: 100vh; display: flex; flex-direction: column; background-color: #f5f5f5; } .tip { padding: 20rpx; text-align: center; color: #666; } .sign-canvas { flex: 1; width: 100%; /* 高度由flex:1决定宽度100%在横屏下即最大宽度 */ background-color: #fff; } .toolbar { padding: 30rpx; display: flex; justify-content: space-around; background-color: #fff; border-top: 1rpx solid #eee; }注意disable-scrolltrue这个属性非常关键。它可以防止在画布上拖动时引起整个页面的滚动确保触摸事件被Canvas独占否则签名体验会非常糟糕笔迹会断断续续。3.2 获取Canvas上下文与坐标校正在页面的onReady生命周期中我们需要获取Canvas的上下文和它的实际尺寸信息。这里有个关键点Canvas节点的宽高与CSS设置的宽高是两回事。我们必须显式设置Canvas节点的绘图宽高canvas.width,canvas.height否则绘图会模糊。// pages/sign/sign.js Page({ data: { ctx: null, canvasWidth: 0, canvasHeight: 0, points: [] // 用于记录当前笔画的点 }, onReady() { this.initCanvas(); }, async initCanvas() { return new Promise((resolve, reject) { // 创建SelectorQuery获取Canvas节点 const query wx.createSelectorQuery(); query.select(#signCanvas) .fields({ node: true, size: true }) .exec(async (res) { if (!res[0]) { reject(new Error(Canvas节点未找到)); return; } const canvas res[0].node; const dpr wx.getSystemInfoSync().pixelRatio; // 获取设备像素比 // 1. 设置Canvas节点实际宽高像素 // CSS宽高是750rpx * 某个值这里需要转换成物理像素 const { width: cssWidth, height: cssHeight } res[0]; canvas.width cssWidth * dpr; canvas.height cssHeight * dpr; // 2. 获取2D上下文 const ctx canvas.getContext(2d); // 3. 缩放上下文以匹配CSS尺寸解决高清屏模糊问题 ctx.scale(dpr, dpr); // 4. 初始化画笔样式 ctx.lineWidth 4; ctx.lineCap round; // 线条末端为圆形 ctx.lineJoin round; // 线条连接处为圆形 ctx.strokeStyle #000000; // 黑色笔迹 // 5. 将上下文和尺寸存入data并清空画布 this.setData({ ctx: ctx, canvasWidth: cssWidth, canvasHeight: cssHeight }); this.clearCanvas(); resolve(); }); }); }, clearCanvas() { const { ctx, canvasWidth, canvasHeight } this.data; if (ctx) { ctx.clearRect(0, 0, canvasWidth, canvasHeight); // 注意ctx.clearRect 使用的是经过scale后的逻辑坐标所以这里用cssWidth/Height ctx.draw(); // 小程序中修改了Canvas内容后需要调用draw才能渲染到屏幕 } } })实操心得ctx.scale(dpr, dpr)这一步是解决Canvas在高清屏如Retina屏上绘制模糊的关键。我们按照CSS尺寸逻辑像素来绘图但Canvas内部是以物理像素为单位的。通过缩放上下文我们让1个逻辑单位的笔触对应dpr个物理像素从而绘制出清晰的图形。这是很多新手容易忽略的地方。3.3 触摸事件处理与基础绘制接下来是核心的触摸事件处理。我们需要在touchstart时开始一条新路径在touchmove时收集点并连线在touchend时结束路径。// 继续 pages/sign/sign.js Page({ // ... 其他数据和方法 onTouchStart(e) { const { ctx } this.data; const touch e.touches[0]; // 获取触摸点相对于Canvas的位置 const x touch.x; const y touch.y; // 开始一条新路径 ctx.beginPath(); ctx.moveTo(x, y); // 初始化当前笔画的点集 this.setData({ points: [{x, y}] }); }, onTouchMove(e) { const { ctx, points } this.data; const touch e.touches[0]; const x touch.x; const y touch.y; // 将点加入当前笔画集合 const newPoints [...points, {x, y}]; this.setData({ points: newPoints }); // 基础绘制直接连线 ctx.lineTo(x, y); ctx.stroke(); ctx.draw(); // 实时渲染 }, onTouchEnd() { const { ctx } this.data; // 结束当前路径 ctx.closePath(); // 清空当前笔画点集为下一次笔画准备 this.setData({ points: [] }); } })这样一个最基础的签名板就完成了。但你会发现快速书写时线条会有明显的“折线”感不够圆滑。这是因为touchmove事件的触发频率有限采集到的点不够密集。4. 进阶优化让笔迹如丝般顺滑4.1 笔迹平滑算法实现为了解决折线问题我们需要在已采集到的稀疏点之间插入新的点让路径变得更连续。这里介绍一种简单有效的二次贝塞尔曲线插值方法。我们不在onTouchMove中直接lineTo而是收集点。在每次onTouchMove时我们取最近的两个点当前点和上一个点用它们计算出控制点然后用quadraticCurveTo绘制一条曲线。Page({ // ... 其他数据 data: { lastPoint: null, // 上一个触摸点 currentPoint: null, // 当前触摸点 }, onTouchStart(e) { const { ctx } this.data; const touch e.touches[0]; const x touch.x; const y touch.y; this.setData({ lastPoint: {x, y}, currentPoint: {x, y} }); ctx.beginPath(); ctx.moveTo(x, y); ctx.draw(); }, onTouchMove(e) { const { ctx, lastPoint, currentPoint } this.data; const touch e.touches[0]; const newPoint {x: touch.x, y: touch.y}; if (lastPoint currentPoint) { // 计算控制点取上一个点和当前点的中点 const cpx (lastPoint.x currentPoint.x) / 2; const cpy (lastPoint.y currentPoint.y) / 2; // 使用二次贝塞尔曲线绘制到控制点 ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, cpx, cpy); ctx.stroke(); ctx.draw(); // 移动路径起点到当前点为下一段曲线做准备 ctx.beginPath(); ctx.moveTo(cpx, cpy); } // 更新点记录 this.setData({ lastPoint: currentPoint, currentPoint: newPoint }); }, onTouchEnd() { const { ctx, lastPoint, currentPoint } this.data; // 绘制最后一段曲线 if (lastPoint currentPoint) { ctx.quadraticCurveTo(lastPoint.x, lastPoint.y, currentPoint.x, currentPoint.y); ctx.stroke(); ctx.draw(); } // 重置点记录 this.setData({ lastPoint: null, currentPoint: null }); } })这个算法能显著改善线条的平滑度。其原理是利用贝塞尔曲线的特性用上一个点作为控制点向当前点与上一个点的中点绘制曲线使得线条转折处变得圆润。4.2 性能优化防抖与离屏绘制在低端机上频繁调用ctx.draw()可能导致卡顿。我们可以引入一个简单的防抖机制。Page({ data: { drawTimer: null, }, onTouchMove(e) { // ... 计算和绘制逻辑 // 使用防抖减少draw调用频率 if (this.data.drawTimer) { clearTimeout(this.data.drawTimer); } this.setData({ drawTimer: setTimeout(() { ctx.draw(); this.setData({ drawTimer: null }); }, 16) // 大约60fps的间隔 }); } })对于更极致的性能要求可以考虑离屏Canvas。将主要的绘制操作在一个隐藏的、尺寸相同的离屏Canvas上完成然后定期将离屏Canvas的内容一次性绘制到显示Canvas上。但这会显著增加代码复杂度对于大多数签名场景上述优化已足够。5. 功能完善撤销、清空与导出5.1 撤销与重做功能的实现实现撤销/重做本质上是记录画布的历史状态。最直接的方法是使用ctx.getImageData和ctx.putImageData来保存和恢复像素数据但这对大画布性能影响较大。更轻量级的方法是记录绘图命令。这里采用一种折中方案记录每个笔画结束时的画布快照ImageData。虽然占用内存但实现简单。Page({ data: { history: [], // 历史记录栈 historyIndex: -1, // 当前历史位置 }, onTouchEnd() { // ... 绘制结束逻辑 // 保存当前画布状态到历史 this.saveToHistory(); }, async saveToHistory() { const { ctx, canvasWidth, canvasHeight } this.data; const dpr wx.getSystemInfoSync().pixelRatio; // 注意getImageData需要物理像素尺寸 const imageData ctx.getImageData(0, 0, canvasWidth * dpr, canvasHeight * dpr); // 截断当前指针之后的历史如果执行过撤销后又画了新内容 let newHistory this.data.history.slice(0, this.data.historyIndex 1); newHistory.push(imageData); this.setData({ history: newHistory, historyIndex: newHistory.length - 1 }); }, handleUndo() { let { history, historyIndex, ctx, canvasWidth, canvasHeight } this.data; if (historyIndex 0) { // 没有可撤销的了清空画布 this.clearCanvas(); this.setData({ historyIndex: -1 }); return; } historyIndex--; this.setData({ historyIndex }); // 恢复历史状态 const imageData history[historyIndex]; const dpr wx.getSystemInfoSync().pixelRatio; ctx.putImageData(imageData, 0, 0); ctx.draw(); }, handleClear() { this.clearCanvas(); this.setData({ history: [], historyIndex: -1 }); } })注意事项getImageData和putImageData操作的是原始像素数据尺寸必须是Canvas的物理像素宽高canvas.width,canvas.height而不是CSS逻辑宽高。同时频繁操作大尺寸的ImageData非常消耗内存历史栈不宜过深例如最多10步。5.2 签名图片导出与上传用户签名完成后需要将Canvas内容导出为图片。Page({ handleConfirm() { this.exportCanvasToImage().then(tempFilePath { // 1. 可以预览 wx.previewImage({ urls: [tempFilePath] }); // 2. 可以保存到本地相册需要用户授权 // this.saveImageToAlbum(tempFilePath); // 3. 可以上传到服务器 // this.uploadSignature(tempFilePath); }).catch(err { console.error(导出失败, err); wx.showToast({ title: 导出失败, icon: none }); }); }, async exportCanvasToImage() { return new Promise((resolve, reject) { const query wx.createSelectorQuery(); query.select(#signCanvas) .fields({ node: true }) .exec((res) { if (!res[0]) { reject(Canvas未找到); return; } const canvas res[0].node; wx.canvasToTempFilePath({ canvas: canvas, canvasId: signCanvas, // 如果用的是canvas-id则用这个 fileType: png, quality: 1, // 图片质量0-1 success: (res) { resolve(res.tempFilePath); }, fail: reject }); }); }); }, saveImageToAlbum(tempFilePath) { wx.saveImageToPhotosAlbum({ filePath: tempFilePath, success: () { wx.showToast({ title: 已保存到相册 }); }, fail: (err) { if (err.errMsg.includes(auth deny)) { wx.showModal({ title: 提示, content: 需要您授权保存图片到相册, success: (res) { if (res.confirm) { wx.openSetting(); // 引导用户打开设置页授权 } } }); } } }); }, uploadSignature(tempFilePath) { wx.uploadFile({ url: https://your-server.com/api/upload-signature, filePath: tempFilePath, name: signature, formData: { userId: 123 }, success: (res) { const data JSON.parse(res.data); if (data.code 0) { wx.showToast({ title: 上传成功 }); // 返回上一页或进行下一步操作 wx.navigateBack(); } } }); } })6. 避坑指南与进阶思考在实际开发中我踩过不少坑这里总结几个关键点Canvas层级问题小程序的Canvas是原生组件层级最高会覆盖在普通视图组件之上。这意味着你无法用z-index让一个普通的view浮在Canvas上面。如果需要在签名板上面叠加“确认”、“清除”等按钮必须将这些按钮放在另一个页面或者使用小程序的cover-view组件专用于覆盖原生组件。真机调试差异在开发者工具上流畅的绘制在真机上特别是低端安卓机可能卡顿。务必进行真机调试。除了前面提到的防抖还可以考虑降低touchmove事件的采样频率通过判断移动距离或者简化平滑算法。横屏下的坐标获取如果你采用“组件级模拟横屏”CSS旋转那么从touch事件中获取的x, y坐标是相对于旋转后的容器的与Canvas内部坐标系不一致。你需要进行坐标转换// 假设容器旋转了90度 const actualX canvasHeight - touch.y; // 注意这里canvasHeight是CSS高度 const actualY touch.x;计算起来比较绕容易出错这也是我推荐直接使用“页面级横屏”的原因之一。内存管理历史记录功能如果保存完整的ImageData内存增长很快。对于长时间使用的应用建议限制历史栈深度或采用更节省内存的命令记录模式。笔锋效果更高级的签名板可以模拟钢笔的笔锋效果根据速度改变线条粗细。这需要计算触摸点之间的移动速度动态调整ctx.lineWidth。实现起来复杂但对提升真实感有帮助。数据安全与合规电子签名涉及法律效力。在实际商用项目中除了前端生成图片后端必须对签名图片进行哈希存证、时间戳固化并与业务逻辑绑定。前端生成的图片建议转换为Base64或二进制数据与用户ID、时间、合同哈希值等一起打包上传确保签名数据的完整性和不可篡改性。实现一个体验良好的微信小程序手写签名板是一个融合了交互设计、图形编程和性能优化的综合性任务。从确定横屏方案到处理Canvas高清屏模糊再到实现笔迹平滑和撤销功能每一步都需要仔细考量。希望这篇详细的拆解能帮你避开我踩过的那些坑快速打造出属于自己的、流畅顺滑的签名组件。
)
