uniapp之简单的电子签名

直接上代码

<template>
    <view class="autograph">
        <view class="autograph-des">
                签名
        </view>
        <view class="autograph-centent">
                <canvas class='firstCanvas' 
                        canvas-id="firstCanvas" 
                        @touchmove='move' 
                        @touchstart='start($event)' 
                        @touchend='end'
                        @touchcancel='cancel' 
                        @longtap='tap' 
                        disable-scroll='true' 
                        @error='error'
                >
                </canvas>
        </view>
        <view class="autograph-btn">
                <view style="color: rgb(37, 161, 169);
border: 1px solid rgb(37, 161, 169);" class="__btn" @click="clearClick">重置</view>
                <view class="__btn base-bg color-w" @click="overSign">确认</view>
        </view>

    </view>
</template>

<script>
	var content = null;
	var touchs = [];
	var canvasw = 0;
	var canvash = 0;
	var _that;
	//获取系统信息
	uni.getSystemInfo({
		success: function(res) {
			canvasw = res.windowWidth;
			canvash = res.windowHeight;
		},
	})
	console.log(canvasw,canvash)
	export default {
		data(){
			return{
				signImage: '',
				isEnd: false ,// 是否签名
			}
		},
		onLoad() {
			 _that = this
			//获得Canvas的上下文
			content = uni.createCanvasContext('firstCanvas',_that)	
		},
		methods: {
			overSign: function() {
				// let _that = this
				if (_that.isEnd) {
					uni.canvasToTempFilePath({
						canvasId: 'firstCanvas',
						success: function(res) {
							//打印图片路径
							console.log(res.tempFilePath)
							console.log('完成签名')
							//设置图片
							_that.signImage = res.tempFilePath;
							
							
						}
					})
					 _that.clearClick()
				} else {
					uni.showToast({
						title: '请先完成签名',
						icon: "none",
						duration: 1500,
						mask: true
					})
				}
			
			},
			
			// 画布的触摸移动开始手势响应
			start: function(event) {
				// console.log(event)
				// console.log("触摸开始" + event.changedTouches[0].x)
				// console.log("触摸开始" + event.changedTouches[0].y)
				//获取触摸开始的 x,y
				let point = {
					x: event.changedTouches[0].x,
					y: event.changedTouches[0].y
				}
				// console.log(point)
				touchs.push(point);
			
			},
			// 画布的触摸移动手势响应
			move: function(e) {
				let point = {
					x: e.touches[0].x,
					y: e.touches[0].y
				}
				// console.log(point)
				touchs.push(point)
				if (touchs.length >= 2) {
					this.draw(touchs)
				}
			},
			
			// 画布的触摸移动结束手势响应
			end: function(e) {
				// 设置为已经签名
				this.isEnd = true;
				console.log('end')
				// 清空轨迹数组
				touchs.pop()
				// for (let i = 0; i < touchs.length; i++) {
				// 	touchs.pop()
				// }
			
			},
			
			// 画布的触摸取消响应
			cancel: function(e) {
			},
			
			// 画布的长按手势响应
			tap: function(e) {
			},
			//画布触摸错误
			error: function(e) {
			},
			
			//绘制
			draw: function(touchs) {
				let point1 = touchs[0]
				let point2 = touchs[1]
				touchs.shift()
				//设置线的颜色
				content.setStrokeStyle("#000")
				//设置线的宽度
				content.setLineWidth(5)
				//设置线两端端点样式更加圆润
				content.setLineCap('round')
				//设置两条线连接处更加圆润
				content.setLineJoin('round')
				content.moveTo(point1.x, point1.y)
				content.lineTo(point2.x, point2.y)
				content.stroke()
				content.draw(true)
			},
			//清除操作
			clearClick: function() {
				// 设置为未签名
				this.isEnd = false
				//清除画布
				content.clearRect(0, 0, canvasw, canvash)
				content.draw(true)
			},
		}
		
	}
</script>

<style scoped lang="scss">
	.autograph{
		padding: 50rpx 30rpx 0 30rpx;
	}
	.autograph-des{
		font-size: 32rpx;
		line-height: 1.8;
		color: rgb(88, 88, 88);
	}
	.autograph-centent{
		background-color: #ffffff;
		height: 600rpx;
		margin-top: 40rpx;
		margin-bottom: 50rpx;
	}
	.firstCanvas{
		width: 100%;
		height: 580rpx;
	}
	.autograph-btn{
		display: flex;
		justify-content: space-around;
		.__btn{
			width: 240rpx;
			height: 90rpx;
			line-height: 90rpx;
			border-radius: 50rpx;
			text-align: center;
		}
	}
	
</style>