前言

由于前一段时间的电子合同功能需要合同双方的签名，在此记录一下小程序前端的手写签名组件。

提示：以下是本篇文章正文内容，下面案例可供参考

一、.js文件的内容

// pages/component/signature/signature.js
var cxt = null;// 使用 wx.createContext 获取绘图上下文 cxt
var arrx = [];//所有点的X轴集合
var arry = [];//所有点的Y轴集合
var canvasw = 0;//画布的宽
var canvash = 0;//画布的高
// var canvasTop=0;
// var canvasLeft=0;
Component({/*** 组件的属性列表*/properties: {can:Boolean,//用于显示隐藏canvas},/*** 组件的初始数据*/data: {src:""},/*** 组件的方法列表*/methods: {//显示隐藏组件back(){//子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件this.triggerEvent("canvasDis",{src:this.data.src})},//创建canvas上下文createdCanvas(){wx.showLoading({title: '加载中...',mask: true})// 使用 wx.createContext 获取绘图上下文 cxt//创建 canvas 的绘图上下文,因为这里是封装成组件，所有需要加thiscxt = wx.createCanvasContext('canvas',this);cxt.beginPath();//封装成组件，所有需要in(this),如果不加无法创建画布var query = wx.createSelectorQuery().in(this).select('.handCenter');query.boundingClientRect(rect => {// canvasTop = rect.top;// canvasLeft = rect.left;canvasw = rect.width/2;canvash = rect.height/2;// var ratio = 2;// while (canvasw > 150){// 保证宽在150以内//   canvasw = Math.trunc(res.width / ratio)//   canvash = Math.trunc(res.height / ratio)//     ratio++;// }wx.hideLoading()}).exec();},//canvas发生错误时触发canvasIdErrorCallback(e){console.error(e.detail.errMsg)},//canvas触摸开始canvasStart(e){arrx.push(e.changedTouches[0].x);arry.push(e.changedTouches[0].y);},//canvas触摸过程中canvasMove(e){let len = arrx.length;cxt.moveTo(arrx[len - 1], arry[len - 1]);//把路径移动到画布中指定的点,第一个参数为x轴，第二个参数为y轴arrx.push(e.changedTouches[0].x);//手指移动过程中canvas的横坐标存入到全局数组变量arrx中arry.push(e.changedTouches[0].y);//手指移动过程中canvas的纵坐标存入到全局数组变量arry中cxt.lineTo(e.changedTouches[0].x, e.changedTouches[0].y);//moveTo坐标到lineTo坐标的cxt.setLineWidth(4);//设置线条的宽度cxt.setLineCap('round');//设置结束时 点的样式cxt.stroke();//画线cxt.draw(true);//设置为true时，会保留上一次画出的图像，false则会清空(方式二设置为false,一为true)},getimg() {if (arrx.length == 0) {wx.showModal({title: '提示',content: '签名内容不能为空！',showCancel: false});return false;};wx.showLoading({title: '签名生成中..',mask:true})let that = this;wx.canvasToTempFilePath({canvasId: 'canvas',success: function (res) {that.setData({src: res.tempFilePath})wx.hideLoading();
//子组件传递给父组件一个方法canvasDis，并传递一个参数src给父组件that.triggerEvent("canvasDis",{src:res.tempFilePath})}},this)},cleardraw() {//清除画布arrx = [];arry = [];cxt.clearRect(0, 0, canvasw, canvash);cxt.draw();this.setData({src:''});},canvasEnd(e){}},ready(){this.createdCanvas()}
})

二、.json文件的内容

{"component": true,"usingComponents": {}}

三、.wxml文件的内容

<view class="wrapper"><view class="back" catchtap="back">返回</view><view class="handBtn"><button catchtap="cleardraw" class="delBtn">清空</button><button catchtap="getimg" class="subBtn">完成</button></view><view class="handCenter"><canvas class="canvas"id="canvas"canvas-id="canvas"disable-scroll="true"bindtouchstart="canvasStart"bindtouchmove="canvasMove"binderror="canvasIdErrorCallback"></canvas><cover-image class='overImg' src="{{src}}" wx:if="{{src!=''}}"></cover-image></view>
</view>

四、.wxss文件的内容

.wrapper{position: fixed;top:0;bottom: 0;right: 0;left: 0;box-sizing: border-box;background-color: #fff;z-index: 99999;}.back{width: 160rpx;background: #008ef6;margin: 20rpx;padding: 10rpx 0;color:#fff;border-radius:16rpx;text-align: center;}.handCenter{box-sizing: border-box;width: 100%;}canvas {width:100%;height: 310rpx;margin:auto;}.overImg{width: 200rpx;height: 200rpx;}.handCenter {box-sizing: border-box;}.handBtn {height: 100rpx;display: flex;align-content: space-between;align-items: center;margin-top:40rpx;}.delBtn {width: 40%;color: #666;}.subBtn {width: 40%;background: #008ef6;color: #fff;}button{font-size: 28rpx;}

五、要引用的.wxml文件的内容

  <view class="cu-form-group"><view class="title text-cyan light">签名</view><view class='cu-tag bg-cyan radius padding' bindtap='handlChangeCanvasShow'>点击设置</view></view><signaturewx:if="{{can}}"backInfo="{{can}}"bindcanvasDis="handlChangeCanvasShow"></signature><image wx:if="{{src}}" src='{{src}}'style="width: 100%;height: 310rpx;border:1px solid #ccc"></image>

六、要引用的.js文件的内容

data: {dataNow: moment().format('YYYY-MM-DD'),liveDate: moment().format('YYYY-MM-DD'),// leaveDate: moment().add(1,"months").format('YYYY-MM-DD'),leaseDuration: 1,//multiArray: [],multiIndex: [0, 0],roomTypeList:[],waterMode:1,//refundWay: false, //showRefundWay: false,priceLineList: [],newPriceLineList: [],can:false,src:"",imageSrc:"",imageBase64: ''},
//handlChangeCanvasShow自定义事件，子组件传递过来的方法和数据handlChangeCanvasShow(e){let that = thisthat.setData({can:(!this.data.can)})//显示隐藏canvasif (e.changedTouches == undefined && e.detail.src != '') {wx.getFileSystemManager().readFile({filePath: e.detail.src, //选择图片返回的相对路径encoding: 'base64', //编码格式success: res => { //成功的回调that.setData({imageBase64: res.data})}})that.setData({src:e.detail.src})//点击了确定就把图片直接保存并更新并重新加载页面wx.uploadFile({url: http.api.fileupload,filePath: e.detail.src,name: 'file',formData: {dir: 'jianxi_s_addSign',},success(res) {let data = JSON.parse(res.data)if (data.code == 0) {that.setData({imageSrc: data.url})} else {util.hideLoading()}},fail() {util.hideLoading()}})} else {let imageUrl = this.data.signUrl == "undefined" ? '' : this.data.signUrl;that.setData({src: imageUrl})}},

七、总结

这个是小程序的签名案例，可以参考。

记录一下小程序的手写签名组件相关推荐

原生微信小程序实现手写签名功能
项目中有遇到在小程序上实现手动签名功能,今天给大家分享下代码 wxml 文件代码如下,catchtouchmove属性一定要加上,否则移动起来连笔非常不流畅 <view class=" ...
微信小程序实现手写签名（极简横版）
以下代码在仅在基础库2.6版本无法正常运行,其他版本暂未测出问题. 文章目录 1.横版JSON配置 2.效果预览 3.代码实现 3.1 HTML 3.2 CSS 3.3 JSON 3.4 JS 1.横 ...
uniapp 手写签名组件
组件地址: 手写签名组件,弹框签名,可配置签名,签名返回base64,签名专用 - DCloud 插件市场 # 欢迎使用手写签名组件 **手写签名组件,签名后可以获取到base64编码,同时内置了弹 ...
微信小程序自定义canvas手写签名组件
需求如下图展示,因为小程序中有好几个地方使用签名,所以做成组件. 1.创建组件 signature.js const app = getApp(); Component({/*** 组件的属性列表*/ ...
微信小程序手写签名_微信小程序实现手写签字
无纸化办公,这是老板对我的要求,然而有人现场执法文件全部电子化,只有签字部分让一个搞web的人有点儿头疼,不能为了这个找个人来开发app吧于是想到了小程序,对于一个新接触小程序的人来说还是有挑战性的, ...
php 手写签批手机办公_好签小程序手写签名组件/在线手写签批系统
支持多种文档格式好签原笔迹手写技术可以在任何版式文档格式上进行手写与笔迹的展示,与文档类型无关,它是一款真正意义的跨文档格式的手写批示引擎,在常用的版式文件上都可以进行手写批示,如PDF.JGP. ...
AI识别图片识别微信小程序（手写OCR）
使用腾讯云手写OCR API的微信小程序 GitHub地址主要功能:识别图片形式的手写笔记并展示 //appid等作为全局变量定义在了app.js里//使用时需将相应字段添加到app.js文件中gl ...
微信小程序手写签名_小程序手写签名（wepy）
对于手写签名组件组件晚上有很多种写法,我选择了一种进行了wepy的框架的改造.如果使用wepy框架做手写签名的话可以直接复制下面的代码. 这里需要提醒的是:安卓手机和苹果手机有适配性的问题,苹果手机在 ...
【uni-app】使用写字板，实现手写签名----直接使用版
需求用户需在APP或小程序使用手写的方式签字或签名效果图片实现方式封装成组件调用(推荐),如需了解使用可点击前往-[封装组件版] 使用的页面内直接使用,目前的教程就是直接使用的,未封装成组件 ...

记录一下小程序的手写签名组件

文章目录

前言

一、.js文件的内容

二、.json文件的内容

三、.wxml文件的内容

四、.wxss文件的内容

五、要引用的.wxml文件的内容

六、要引用的.js文件的内容

七、总结

记录一下小程序的手写签名组件相关推荐

最新文章

热门文章