原生微信小程序实现手写签名功能

项目中有遇到在小程序上实现手动签名功能，今天给大家分享下代码
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)})}
})

效果如下

原生微信小程序实现手写签名功能相关推荐

微信小程序实现手写签名（极简横版）
以下代码在仅在基础库2.6版本无法正常运行,其他版本暂未测出问题. 文章目录 1.横版JSON配置 2.效果预览 3.代码实现 3.1 HTML 3.2 CSS 3.3 JSON 3.4 JS 1.横 ...
记录一下小程序的手写签名组件
文章目录前言一..js文件的内容二..json文件的内容三..wxml文件的内容四..wxss文件的内容五.要引用的.wxml文件的内容六.要引用的.js文件的内容七.总结前言由于 ...
AI识别图片识别微信小程序（手写OCR）
使用腾讯云手写OCR API的微信小程序 GitHub地址主要功能:识别图片形式的手写笔记并展示 //appid等作为全局变量定义在了app.js里//使用时需将相应字段添加到app.js文件中gl ...
微信小程序手写签名_微信小程序实现手写签字
无纸化办公,这是老板对我的要求,然而有人现场执法文件全部电子化,只有签字部分让一个搞web的人有点儿头疼,不能为了这个找个人来开发app吧于是想到了小程序,对于一个新接触小程序的人来说还是有挑战性的, ...
mpvue 微信小程序api_第三方框架与原生微信小程序开发框架性能之比较 | Q荐读...
作者 | 崔红保编辑 | 王莹自 2017年1月9日微信小程序诞生以来,历经 2 年多的迭代升级,已有数百万小程序上线,成为继 Web.iOS.Android 之后,第四大主流开发技术. 与之相随, ...
视频教程-微信小程序系统教程python版[3/3阶段]_微信小程序支付-手游开发
微信小程序系统教程python版[3/3阶段]_微信小程序支付微信企业号星级会员.10多年软件从业经历,国家级软件项目负责人,主要从事软件研发.软件企业员工技能培训.已经取得计算机技术与软件资格考试 ...
原生微信小程序，搜索框（search）组件
原生微信小程序,搜索框(search)组件首先创建组件及两个跳转页面,第一个是搜索框所在的页面(首页),第二个是搜索详细页搜索框的本质是:搜索框不是input,而是navigate,跳转到专门的搜 ...
微信小程序开发手账从入门到部署【持续更新】
微信小程序开发手账从今天起,打算记录一下自己从入门开发微信小程序到小程序上线的完整流程. 如果没有意外的话打算每周更新一次.20201231 准备工作 hbuilder.java环境(springb ...
原生微信小程序使用class 三元运算符实现多选案例
原生微信小程序使用class 三元运算符实现多选案例如下图所示: 1,在vue中开发非常容易实现,使用数组的includes方法判断即可,但是在原生小程序中不可以 2,要及时的对定义的遍历进行set ...

原生微信小程序实现手写签名功能

原生微信小程序实现手写签名功能相关推荐

最新文章

热门文章