小程序手写签名

html

<!-- 手写界面 -->
<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>
<image
src="{{url}}" alt="" wx:if="{{url!=''}}"></image>

css

.hand_writing_container {
width: 100%;
/* padding: 5.503vh 10rpx 0; */
box-sizing: border-box;
}
.tips_title {
margin-bottom: 100rpx;
font-size:50rpx;
text-align: center;
font-weight: bolder;
color: rgba(45, 45, 45, 1);
}
.canvas {
margin: 0 20rpx;
height: 700rpx;
background: grey;
box-sizing: border-box;
border: 1rpx solid black;
}
.firstCanvas {
background-color: white;
width: 100%;
height: 500rpx;
}
.btn_container {
display: flex;
align-items: center;
/* padding: 0 45.44vh; */
box-sizing: border-box;
justify-content: space-between;
}
.btn {
flex: 1;
height: 100rpx;
/* padding: 0 11vh; */
box-sizing: border-box;
border-radius: 1.572327vh;
display: flex;
justify-content: space-between;
align-items: center;
margin: 0 10rpx;
}
.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: rgb(255, 255, 255, 1);
}
.clean {
background: #07c160;
}
.submit {
background: #ff3d33;
}

js

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

最后

以上就是年轻红酒为你收集整理的小程序手写签名的全部内容，希望文章能够帮你解决小程序手写签名所遇到的程序开发问题。

如果觉得靠谱客网站的内容还不错，欢迎将靠谱客网站推荐给程序员好友。