項目中有遇到在小程序上實現手動簽名功能，今天給大家分享下代碼
wxml 文件代碼如下，catchtouchmove屬性一定要加上，否則移動起來連筆非常不流暢

<view class="content" catchtouchmove="true"><view class="canvasBox"><text class="title">請在下面的白框中簽名</text><text class="tips">簽名既承諾所填信息完全屬實</text><view class="sign-canvas-view"><canvastype="2d"id="myCanvas"style="width:702rpx;height:200px;"disable-scrollcapture-bind:touchstart="touchStart"capture-bind:touchmove="touchMove"></canvas></view></view><view class="submitBtn"><van-button plain block style="width: 30vw;" bindtap="reset">重置</van-button><van-button bindtap="sure" block style="width: 30vw;" type="primary">提交</van-button></view> </view>

wxss代碼

.content {width: 100vw;height: 100vh; }.canvasBox {margin-top: 10px;background-color: #fff;width: 100%;border-radius: 10px;display: flex;flex-direction: column;justify-content: space-around; } .title {font-size: 32rpx;padding: 0 24rpx; } .title::before {content: '*';color: red; } .tips {width: 100%;color: red;padding: 20px;box-sizing: border-box; } .sign-canvas-view {box-sizing: border-box;border: 2rpx solid grey;margin: 0 24rpx; }.submitBtn {width: 100%;display: flex;justify-content: space-around;align-items: center;margin-top: 30px; }

js代碼

import appConfig from "../../../utils/globalConfig.js"; const {payAfterTreatmentSignUp} = require("../../../utils/api.js") const globalConfig = require('../../../utils/globalConfig.js'); Page({data:{signPath:[],cardNo:'',preX:'',preY:'',apiUrl:appConfig.getLocalConfig().apiUrl,},onLoad(options){this.setData({cardNo:options.cardNo})wx.createSelectorQuery().select('#myCanvas').fields({node: true,size: true}).exec(this.init.bind(this))},init(data){console.log(data);const width = data[0].width;const height=data[0].height;const canvas = data[0].node;const ctx = canvas.getContext('2d');const dpr = wx.getSystemInfoSync().pixelRatiocanvas.width = width * dprcanvas.height = height * dprctx.scale(dpr,dpr)this._dpr = dprthis._ctx = ctxthis._canvas = canvas},touchStart(e){console.log(e)const { _ctx:ctx } = thisconst { clientX:x ,clientY:y } = e.touches[0]ctx.beginPath()// ctx.moveTo(x-e.target.offsetLeft, y-e.target.offsetTop)ctx.moveTo(x-e.target.offsetLeft, y-e.target.offsetTop)this.setData({preX:x-e.target.offsetLeft,preY:y-e.target.offsetTop,})}, touchMove(e){const { _ctx:ctx } = thisconst { clientX:x ,clientY:y } = e.touches[0]this.data.signPath.push([x,y])this.setData({signPath:this.data.signPath})let preX = this.data.preXlet preY = this.data.preYlet curX = x-e.target.offsetLeftlet curY = y-e.target.offsetToplet deltaX = Math.abs(preX - curX)let deltaY = Math.abs(preY - curY)if (deltaX >= 3 || deltaY >= 3) {// 前后兩點中心點let centerX = (preX + curX) / 2let centerY = (preY + curY) / 2//這里以前一點作為控制點，中心點作為終點，起始點為上一次的中點，很流暢啊！ctx.quadraticCurveTo(preX, preY, centerX, centerY);ctx.stroke();this.setData({preX:curX,preY:curY,})}// ctx.lineTo(x-e.target.offsetLeft, y-e.target.offsetTop)// ctx.lineTo(x, y)// ctx.stroke()},//重繪reset(){const { _ctx:ctx,_canvas:canvas } = thisthis.setData({signPath:[]})ctx.clearRect(0, 0, canvas.width, canvas.height)},//提交簽名圖片sure(){if(this.data.signPath.length <= 0){wx.showToast({title: '簽名不能為空',icon:'none'})return }//導出圖片this.outImage()},sureSignature(){if(this.data.signPath.length <= 0){wx.showToast({title: '簽名不能為空',icon:'none'})return }},outImage(){const { _canvas:canvas,_dpr:dpr } = thisvar image = canvas.toDataURL("image/png"); // 得到生成后的簽名base64位 url 地址payAfterTreatmentSignUp({cardNo:this.data.cardNo,signBase64:image},globalConfig.getLocalConfig().zyUrl).then(res=>{console.log(res);wx.showToast({title: '簽約成功',})setTimeout(()=>{wx.navigateBack({delta: 1})},2000)})} })

效果如下

總結

以上是生活随笔為你收集整理的原生微信小程序实现手写签名功能的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。