微信小程序实现手写签名

本文实例为大家分享了微信小程序实现手写签名的具体代码，供大家参考，具体内容如下

本示例具备的功能：

1、笔迹绘制

2、笔迹清空

以下是js代码：

var content = null;
var touchs = [];
var canvasw = 0;
var canvash = 0;
var that = null;
?
Page({
? /**
? ?* 页面的初始数据
? ?*/
? data: {
? ??
? },
? // 画布的触摸移动开始手势响应
? start: function(event) {
? ? // console.log("触摸开始" + event.changedTouches[0].y)
? ? // console.log("触摸开始" + event.changedTouches[0].x)
? ? //获取触摸开始的 x,y
? ? let point = {
? ? ? x: event.changedTouches[0].y,
? ? ? y: event.changedTouches[0].x
? ? }
? ? touchs.push(point)
? },
?
? // 画布的触摸移动手势响应
? move: function(e) {
? ? let point = {
? ? ? x: e.touches[0].y,
? ? ? y: e.touches[0].x
? ? }
? ? touchs.push(point)
? ? if (touchs.length >= 2) {
? ? ? this.draw(touchs)
? ? }
? },
?
? // 画布的触摸移动结束手势响应
? end: function(e) {
? ? // console.log("触摸结束" + e)
? ? //清空轨迹数组
? ? for (let i = 0; i < touchs.length; i++) {
? ? ? touchs.pop()
? ? }
?
? },
?
? /**
? ?* 生命周期函数--监听页面加载
? ?*/
? onLoad: function(options) {
? ? that = this
? ? //获得Canvas的上下文
? ? content = wx.createCanvasContext('firstCanvas')
? ? //设置线的颜色
? ? content.setStrokeStyle("#000")
? ? //设置线的宽度
? ? content.setLineWidth(5)
? ? //设置线两端端点样式更加圆润
? ? content.setLineCap('round')
? ? //设置两条线连接处更加圆润
? ? content.setLineJoin('round')
? },
?
? /**
? ?* 生命周期函数--监听页面初次渲染完成
? ?*/
? onReady: function() {
?
? ? // 获取画布尺寸
? ? var query = wx.createSelectorQuery()
? ? query.select('#canvas').boundingClientRect()
? ? query.exec(function(res) {
? ? ? canvasw = res[0].width;
? ? ? canvash = res[0].height
? ? })
? },
?
? //绘制
? draw: function(touchs) {
? ? let point1 = touchs[0]
? ? let point2 = touchs[1]
? ? touchs.shift()
? ? content.moveTo(point1.y, point1.x)
? ? content.lineTo(point2.y, point2.x)
? ? content.stroke()
? ? content.draw(true)
? },
? //清除操作
? clearClick: function() {
? ? //清除画布
? ? content.clearRect(0, 0, canvasw, canvash)
? ? content.draw(true)
? },
? //保存图片
? saveClick: function() {
? ? var that = this
? ? wx.canvasToTempFilePath({
? ? ? canvasId: 'firstCanvas',
? ? ? success: function(res) {
? ? ? ? //打印图片路径
? ? ? ? var path = res.tempFilePath
? ? ? ? //上传图片
? ? ? ? that.uploadSignPic(path)
? ? ? ? console.log(path)
?
?
? ? ? }
? ? })
? },
?
?
? /**
? ?* 上传签名图片
? ?*/
? uploadSignPic: function(path) {
? ? ? //具体实现的业务逻辑
? }
?
})

以下是wxml代码：

<!-- 手写界面 -->
<view class='hand_writing_container'>
? <view class="tips_title">请在区域内进行签名</view>
? <view id="canvas" class="canvas">
? ? <canvas class='firstCanvas'?
? ? canvas-id="firstCanvas"?
? ? bindtouchmove='move'?
? ? bindtouchstart='start'?
? ? bindtouchend='end'?
? ? disable-scroll='true' >
? ? </canvas>
? </view>
? <view class="btn_container">
? ? <view class="btn clean" bindtap="clearClick">
? ? ? <image src="/image/clear.png"></image>
? ? ? <text>内容清除</text>
? ? </view>
? ? <view class="btn submit" bindtap="saveClick">
? ? ? <image src="/image/submit.png"></image>
? ? ? <text>确认提交</text>
? ? </view>
? </view>
</view>

以下是样式代码：

.hand_writing_container {
? width: 100%;
? padding: 5.503vh 8.1761vh 0;
? box-sizing: border-box;
}
?
.tips_title {
? height: 4.72vh;
? line-height: 4.72vh;
? margin-bottom: 3.459vh;
? font-size: 4.71698vh;
? font-family: Source Han Sans CN;
? font-weight: 500;
? color: rgba(45, 45, 45, 1);
}
?
.canvas {
? width: 100%;
? height: 66.194968vh;
? margin-bottom: 3.7735849vh;
? box-sizing: border-box;
? border: 1rpx dashed black;
}
?
.firstCanvas {
? background-color: white;
? width: 100%;
? height: 100%;
}
?
.btn_container {
? display: flex;
? align-items: center;
? padding: 0 45.44vh;
? box-sizing: border-box;
? justify-content: space-between;
}
?
.btn {
? width: 45.597484vh;
? height: 13.83647798vh;
? padding: 0 11vh;
? box-sizing: border-box;
? border-radius: 1.572327vh;
? display: flex;
? justify-content: space-between;
? align-items: center;
}
?
.btn image {
? flex: 0 0 4.71698vh;
? width: 4.71698vh;
? height: 4.71698vh;
? display: block;
? margin-right: 1.88679vh;
}
?
.btn text {
? flex: 0 0 auto;
? height: 4.717vh;
? line-height: 4.717vh;
? font-size: 4.71698vh;
? font-family: Source Han Sans CN;
? font-weight: 400;
? color: rgba(255, 255, 255, 1);
}
?
.clean {
? background-color: #07c160;
}
?
.submit {
? background-color: #ff3d33;
}

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持。

查看更多关于微信小程序实现手写签名的详细内容...