canvas移动端逐字签名实现—代码直接一键复制使用

 

<template>
	<view class="box">
		<titleSign title='手写签名'></titleSign>
		<view class="title-name">
			<view class="name-item" v-for="(item , i) in nameList" :key="i" :class="{selected:num===i||item.type}">
				{{item.value}}
			</view>

		</view>
		<view class="prompt" v-if="complete">签署完成 , 点击确定</view>
		<view class="prompt" v-else>请在下方区域书写第{{num+1}}个字“{{this.nameList[num].value}}”</view>
		<canvas class="mycanvas" id="mycanvas" canvas-id="mycanvas" disable-scroll @touchstart="touchstart"
			@touchmove="touchmove" @touchend="touchend" :style="{ zIndex:(complete ? '-1 ': '20')}">
			<view class="border"></view>
			<view class="borders"></view>
		</canvas>
		<view class="footer">
			<view class="right" v-if="!complete" @click="clear">
				<u-icon name="backspace" color="#fff" size="32"></u-icon>
				<view>清除</view>
			</view>
			<view class="left" v-if="!complete" @click="finish">确定</view>
			<view class="left" v-else style="width: 100%;" @click="clear">确定提交</view>
		</view>

	</view>
</template>

<script>
	var xhr = new XMLHttpRequest();
	var x = 20;
	var y = 20;
	export default {
		data() {
			return {
				sourceImage: '',
				ctx: '', //绘图图像
				points: [], //路径点集合 
				pointsList: [], //回显路径合集
				timer: null,
				nameList: [],
				num: 0,
				complete: false,
				token: ''
			}
		},
		onLoad() {
			this.init()
		},
		mounted() {
			this.drawName(this.nameList[this.num].value)
		},
		methods: {
			init() {
				const str = '冯彦祖'
				this.nameList = (str.split('')).map(item => {
					return item = {
						value: item,
						type: false
					}
				})
				this.ctx = uni.createCanvasContext("mycanvas", this); //创建绘图对象

				//设置画笔样式
				this.ctx.lineWidth = 20;
				this.ctx.lineCap = "round"
				this.ctx.lineJoin = "round"
			},
			// 绘制标准签名
			drawName(name) {
				const dom = document.querySelector('.mycanvas')
				let context = uni.createCanvasContext('mycanvas')
				context.setFillStyle('#ebecf0') //文字颜色：默认黑色
				context.textAlign = 'center'
				context.textBaseline = "middle";
				context.font = 'normal 260px 微软雅黑'; // 字体样式
				context.fillText(name, dom.clientWidth / 2, dom.clientHeight / 2);

				context.draw()

				var that = this
				//生成base64格式图片		
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						that.sourceImage = res.tempFilePath
					}
				})
			},
			//触摸开始，获取到起点
			touchstart(e) {
				let startX = e.changedTouches[0].x;
				let startY = e.changedTouches[0].y;
				let startPoint = {
					X: startX,
					Y: startY
				};

				this.points.push(startPoint);

				this.ctx.beginPath();
			},

			touchmove(e) {
				let moveX = e.changedTouches[0].x;
				let moveY = e.changedTouches[0].y;
				let movePoint = {
					X: moveX,
					Y: moveY
				};
				this.points.push(movePoint); //存点
				let len = this.points.length;
				if (len >= 2) {
					this.draw(); //绘制路径
				}
			},
			touchend() {
				this.points = [];
			},
			draw() {
				this.pointsList.push(JSON.parse(JSON.stringify(this.points)))
				let point1 = this.points[0]
				let point2 = this.points[1]
				this.points.shift()
				this.ctx.moveTo(point1.X, point1.Y)
				this.ctx.lineTo(point2.X, point2.Y)
				this.ctx.stroke()
				this.ctx.draw(true)
			},

			//清空画布
			clear() {
				// this.DocEditor()
				let that = this;
				uni.getSystemInfo({
					success: function(res) {
						let canvasw = res.windowWidth;
						let canvash = res.windowHeight;
						that.ctx.clearRect(0, 0, canvasw, canvash);
						that.ctx.draw(true);
						that.pointsList = []
					},
				})
				this.drawName(this.nameList[this.num].value)
			},

			//完成绘画并保存到本地
			finish() {

				if (this.pointsList.length == 0) {
					uni.showToast({
						title: '标题....',
						duration: 2000,
						icon: "none"
					});
					return;
				}
				let that = this
				uni.canvasToTempFilePath({
					canvasId: 'mycanvas',
					fileType: 'jpg',
					quality: 1, //图片质量	
					success(res) {
						// console.log(res.tempFilePath)
						that.nextTo(res.tempFilePath)
					}
				})
			},

			nextTo(path) {
				if (this.num === this.nameList.length - 1) {
					uni.hideLoading();
					return this.complete = true
				}
                this.nameList[this.num].type = true
				this.num++	
				this.clear()
				this.drawName(this.nameList[this.num].value)
				

			}
		},
	}
</script>

<style lang="scss" scoped>
	.box {
		padding-bottom: 51rpx;
	}


	.selected {
		color: #0078ff !important;
		border-color: #0078ff !important;
	}

	.title-name {
		margin: 75rpx 104rpx 31rpx;
		display: flex;
		flex-wrap: wrap;
		gap: 31rpx 40rpx;

		.name-item {
			width: 150rpx;
			height: 150rpx;
			background: #FFFFFF;
			border-radius: 18rpx;
			border: 1px solid #b1b1b1;
			font-size: 82rpx;
			text-align: center;
			line-height: 150rpx;
			color: #b1b1b1;
		}
	}

	.prompt {
		margin-bottom: 36rpx;
		text-align: center;
		font-size: 32rpx;
		font-weight: 400;
		color: rgba(0, 0, 0, 0.7);
	}

	.mycanvas {
		margin: 0 auto;
		// width: calc(100vw - 56rpx);
		width: 693rpx;
		height: 734rpx;
		background-color: #F6F7FB;


		.border,
		.borders {
			pointer-events: none;
			position: absolute;
		}

		.border {
			width: 50%;
			height: 100%;
			border-right: 1px dashed #cbcbcb;
		}

		.borders {
			width: 100%;
			height: 50%;
			border-bottom: 1px dashed #cbcbcb;
		}
	}

	.footer {
		margin-top: 96rpx;
		padding: 0 37rpx;
		font-size: 32rpx;
		height: 104rpx;
		display: flex;
		border-radius: 6rpx;
		justify-content: space-around;
		align-items: center;

		.left,
		.right {
			display: flex;
			justify-content: center;
			align-items: center;
			width: 250rpx;
			height: 104rpx;
			border-radius: 6rpx;
			text-align: center;
			font-weight: bold;
			color: white;
			opacity: 0.62
		}

		.left {
			background: #0078FF;
		}

		.right {
			background: orange;
		}
	}
</style>