devbox
羊村懒王
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

uniapp小程序自定义签名面板组件,小程序页面引用实现横屏签字(亲测有效)_uniapp手写签名组件

作者：羊村懒王 | 2024-03-23 19:12:59

赞

踩

uniapp手写签名组件

需求: uniapp小程序自定义签字面板组件, canvas手写签名画板, 小程序页面引用实现横屏签字

实现效果:
在这里插入图片描述
在这里插入图片描述

一、自定义组件

在这里插入图片描述
在项目中创建components文件夹, 在文件夹下创建my-sign组件, 组件下创建my-sign.vue和index.js
my-sign.vue组件代码:

<template>
	<view class="signature-wrap">
		<canvas
			:canvas-id="cid"
			:id="cid"
			@touchstart="onTouchStart"
			@touchmove="onTouchMove"
			@touchend="onTouchEnd"
			disable-scroll
			:style="[
				{
					width: width && formatSize(width),
					height: height && formatSize(height)
				},
				customStyle
			]"
		></canvas>
		<slot />
	</view>
</template>

<script>
/**
 * sign canvas 手写签名
 * @description 设置线条宽度、颜色，撤回，清空
 * @tutorial
 * @property {String} cid canvas id 不设置则默认为 v-sign-时间戳
 * @property {String, Number} width canvas 宽度
 * @property {String, Number} height canvas 高度
 * @property {bgColor} bgColor 画布背景颜色
 * @property {Object} customStyle canvas 自定义样式
 * @property {String} lineWidth 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小
 * @property {Number} lineColor 画笔颜色，权重小于 v-sign-pen 组件设置的画笔大小
 * @event {Function} init 当创建完 canvas 实例后触发，向外提供 canvas实例，撤回，清空方法
 * @example <v-sign @init="signInit"></v-sign>
 */
import { formatSize } from './index.js'

export default {
	name: 'my-sign',
	props: {
		// canvas id
		cid: {
			type: String,
			default: `v-sign-${Date.now()}`
			// required: true
		},
		// canvas 宽度
		width: {
			type: [String, Number]
		},
		// canvas 高度
		height: {
			type: [String, Number]
		},
		// 画笔大小，权重小于 v-sign-pen 组件设置的画笔大小 penLineWidth
		lineWidth: {
			type: Number,
			default: 4
		},
		// 线颜色，权重小于 v-sign-color 组件设置的画笔颜色 penLineColor
		lineColor: {
			type: String,
			default: '#333'
		},
		// 画布背景颜色
		bgColor: {
			type: String,
			default: '#fff'
		},
		// canvas自定义样式
		customStyle: {
			type: Object,
			default: () => ({})
		}
	},
	provide() {
		return {
			getSignInterface: this.provideSignInterface
		}
	},
	data() {
		return {
			formatSize,
			lineData: [],
			winWidth: 0,
			winHeight: 0,
			penLineWidth: null, // v-sign-pen 组件设置的画笔大小
			penLineColor: null // v-sign-color 组件设置的颜色
		}
	},
	created() {
		// 获取窗口宽高
		const { windowWidth, windowHeight } = uni.getSystemInfoSync()
		this.winWidth = windowWidth
		this.winHeight = windowHeight
	},
	mounted() {
		this.canvasCtx = uni.createCanvasContext(this.cid, this)
		// h5 需延迟绘制，否则绘制失败
		// #ifdef H5
		setTimeout(() => {
			// #endif
			this.setBackgroundColor(this.bgColor)
			// #ifdef H5
		}, 10)
		// #endif
		// 初始化完成，触发 init 事件
		this.$emit('init', this.provideSignInterface())
	},
	methods: {
		onTouchStart(e) {
			const pos = e.touches[0]
			this.lineData.push({
				style: {
					color: this.penLineColor || this.lineColor,
					width: this.penLineWidth || this.lineWidth
				},
				// 屏幕坐标
				coordinates: [
					{
						type: e.type,
						x: pos.x,
						y: pos.y
					}
				]
			})
			this.drawLine()
		},
		onTouchMove(e) {
			const pos = e.touches[0]
			this.lineData[this.lineData.length - 1].coordinates.push({
				type: e.type,
				x: pos.x,
				y: pos.y
			})
			this.drawLine()
		},
		onTouchEnd(e) {
			this.$emit('end', this.lineData)
		},
		// 清空画布
		clear() {
			this.lineData = []
			this.canvasCtx.clearRect(0, 0, this.winWidth, this.winHeight)
			this.canvasCtx.draw()
			this.setBackgroundColor(this.bgColor)
			this.$emit('clear')
		},
		// 撤销
		revoke() {
			this.setBackgroundColor(this.bgColor)
			this.lineData.pop()
			this.lineData.forEach((item, index) => {
				this.canvasCtx.beginPath()
				this.canvasCtx.setLineCap('round')
				this.canvasCtx.setStrokeStyle(item.style.color)
				this.canvasCtx.setLineWidth(item.style.width)
				if (item.coordinates.length < 2) {
					const pos = item.coordinates[0]
					this.canvasCtx.moveTo(pos.x, pos.y)
					this.canvasCtx.lineTo(pos.x + 1, pos.y)
				} else {
					item.coordinates.forEach(pos => {
						if (pos.type == 'touchstart') {
							this.canvasCtx.moveTo(pos.x, pos.y)
						} else {
							this.canvasCtx.lineTo(pos.x, pos.y)
						}
					})
				}
				this.canvasCtx.stroke()
			})
			this.canvasCtx.draw(true)
			this.$emit('revoke', this.lineData)
		},
		// 绘制线条
		drawLine() {
			const lineDataLen = this.lineData.length
			if (!lineDataLen) return
			const currentLineData = this.lineData[lineDataLen - 1]
			const coordinates = currentLineData.coordinates
			const coordinatesLen = coordinates.length
			if (!coordinatesLen) return
			let startPos
			let endPos
			if (coordinatesLen < 2) {
				// only start, no move event
				startPos = coordinates[coordinatesLen - 1]
				endPos = {
					x: startPos.x + 1,
					y: startPos.y
				}
			} else {
				startPos = coordinates[coordinatesLen - 2]
				endPos = coordinates[coordinatesLen - 1]
			}

			const style = currentLineData.style
			this.canvasCtx.beginPath()
			this.canvasCtx.setLineCap('round')
			this.canvasCtx.setStrokeStyle(style.color)
			this.canvasCtx.setLineWidth(style.width)
			this.canvasCtx.moveTo(startPos.x, startPos.y)
			this.canvasCtx.lineTo(endPos.x, endPos.y)
			// const P1 = this.caculateBezier(startPos, endPos, centerPos)
			// console.log(P1.x, P1.y)
			// this.canvasCtx.moveTo(startPos.x, startPos.y)
			// this.canvasCtx.quadraticCurveTo(P1.x, P1.y, endPos.x, endPos.y)
			this.canvasCtx.stroke()
			this.canvasCtx.draw(true)
		},
		// 保存png图片，文件名配置 filename 仅支持 h5
		async saveImage(filename = '签名') {
			const tempFilePath = await this.canvasToTempFilePath()
			return new Promise((resolve, reject) => {
				// #ifdef H5
				try {
					const a = document.createElement('a')
					a.href = tempFilePath
					a.download = filename
					document.body.appendChild(a)
					a.click()
					a.remove()
					resolve({
						errMsg: 'saveImageH5:ok'
					})
				} catch (e) {
					console.error(e)
					reject(e)
				}
				// #endif
				// #ifndef H5
				uni.saveImageToPhotosAlbum({
					filePath: tempFilePath,
					success(resObj) {
						resolve(resObj)
					},
					fail(err) {
						reject(err)
					}
				})
				// #endif
			})
		},
		// canvas 保存为临时图片路径，h5返回 base64
		canvasToTempFilePath(conf = {}) {
			return new Promise((resolve, reject) => {
				uni.canvasToTempFilePath(
					{
						canvasId: this.cid,
						...conf,
						success: res => {
							resolve(res.tempFilePath)
						},
						fail: err => {
							console.log('fail', err)
							reject(err)
						}
					},
					this
				)
			})
		},
		setBackgroundColor(color = '#fff') {
			this.canvasCtx.beginPath()
			this.canvasCtx.setFillStyle(color)
			this.canvasCtx.fillRect(0, 0, this.winWidth, this.winHeight)
			this.canvasCtx.fill()
			this.canvasCtx.draw(true)
		},
		setLineWidth(numberVal) {
			this.penLineWidth = numberVal
		},
		setLineColor(strValue) {
			this.penLineColor = strValue
		},
		// 向外暴露内部方法
		provideSignInterface() {
			return {
				cid: this.cid,
				ctx: this.canvasCtx,
				clear: this.clear,
				revoke: this.revoke,
				saveImage: this.saveImage,
				canvasToTempFilePath: this.canvasToTempFilePath,
				setLineWidth: this.setLineWidth,
				setLineColor: this.setLineColor,
				setBackgroundColor: this.setBackgroundColor,
				getLineData: () => this.lineData
			}
		},
		/**
		 * 计算二次贝塞尔曲线 控制点 P1
		 * 起点 P0(x0,y0)、控制点P1(x1, y1)、P2(x2, y2)、曲线上任意点B(x, y)
		 * 二次贝塞尔公式：B(t) = (1-t)²P0 + 2t(1-t)P1 + t²P2
		 * 代入坐标得：
		 * x = (1-t)²*x0 + 2t(1-t)*x1 + t²*x2
		 * y = (1-t)²*y0 + 2t(1-t)*y1 + t²*y2
		 */
		caculateBezier(P0, P2, B, t = 0.5) {
			const { x: x0, y: y0 } = P0
			const { x: x2, y: y2 } = P2
			const { x, y } = B
			let x1 = (x - (1 - t) * (1 - t) * x0 - t * t * x2) / (2 * t * (1 - t))
			let y1 = (y - (1 - t) * (1 - t) * y0 - t * t * y2) / (2 * t * (1 - t))
			return {
				x: x1,
				y: y1
			}
		}
	}
}
</script>

<style lang="scss" scoped>
.signature-wrap {
	position: relative;
}
</style>

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147
  • 148
  • 149
  • 150
  • 151
  • 152
  • 153
  • 154
  • 155
  • 156
  • 157
  • 158
  • 159
  • 160
  • 161
  • 162
  • 163
  • 164
  • 165
  • 166
  • 167
  • 168
  • 169
  • 170
  • 171
  • 172
  • 173
  • 174
  • 175
  • 176
  • 177
  • 178
  • 179
  • 180
  • 181
  • 182
  • 183
  • 184
  • 185
  • 186
  • 187
  • 188
  • 189
  • 190
  • 191
  • 192
  • 193
  • 194
  • 195
  • 196
  • 197
  • 198
  • 199
  • 200
  • 201
  • 202
  • 203
  • 204
  • 205
  • 206
  • 207
  • 208
  • 209
  • 210
  • 211
  • 212
  • 213
  • 214
  • 215
  • 216
  • 217
  • 218
  • 219
  • 220
  • 221
  • 222
  • 223
  • 224
  • 225
  • 226
  • 227
  • 228
  • 229
  • 230
  • 231
  • 232
  • 233
  • 234
  • 235
  • 236
  • 237
  • 238
  • 239
  • 240
  • 241
  • 242
  • 243
  • 244
  • 245
  • 246
  • 247
  • 248
  • 249
  • 250
  • 251
  • 252
  • 253
  • 254
  • 255
  • 256
  • 257
  • 258
  • 259
  • 260
  • 261
  • 262
  • 263
  • 264
  • 265
  • 266
  • 267
  • 268
  • 269
  • 270
  • 271
  • 272
  • 273
  • 274
  • 275
  • 276
  • 277
  • 278
  • 279
  • 280
  • 281
  • 282
  • 283
  • 284
  • 285
  • 286
  • 287
  • 288
  • 289
  • 290
  • 291
  • 292
  • 293
  • 294
  • 295
  • 296
  • 297
  • 298
  • 299
  • 300
  • 301
  • 302
  • 303
  • 304
  • 305
  • 306
  • 307
  • 308
  • 309
  • 310
  • 311
  • 312
  • 313
  • 314
  • 315
  • 316
  • 317
  • 318
  • 319
  • 320

index.js代码:

/**
 * 判断是否未数值
 * @param {Object} val
 */
export function isNumber(val) {
	return !isNaN(Number(val))
}

/**
 * 处理大小单位
 * @param {Object} val
 */
export function formatSize(val, unit = 'rpx') {
	return isNumber(val) ? `${val}${unit}` : val
}


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16

二、配置小程序页面横屏

在pages.json中添加"pageOrientation": “landscape”, pageOrientation 设置为 landscape ，表示固定为横屏显示

在这里插入图片描述

{
	"pages": [ //pages数组中第一项表示应用启动页，参考：https://uniapp.dcloud.io/collocation/pages
		{
			"path": "pages/index/index",
			"style": {
				"navigationBarTitleText": "签字",
				"enablePullDownRefresh": false,
				"pageOrientation": "landscape",
				"backgroundColor": "#f8f8f8",
				"navigationStyle": "custom"
			}
		}
	],
	"globalStyle": {
		"navigationBarTextStyle": "black",
		"navigationBarTitleText": "uni-app",
		"navigationBarBackgroundColor": "#F8F8F8",
		"backgroundColor": "#F8F8F8"
	},
	"uniIdRouter": {}
}

  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21

三、在页面中使用

在这里插入图片描述
在这里插入图片描述

代码:

<template>
	<view class="sign-contain">
		<view class="sign-top">
			请在空白处签字
		</view>
		<my-sign @init="onSignInit" @end="endConfirm" bgColor="#fff" width="100%" :height="signHeight">
		</my-sign>

		<!-- 按钮 -->
		<view class="signBtn-box">
			<view class="signBtn-item1">
				<button type="default" plain="true" class="lnvestor-btn" hover-class="hover"
					@click="cancelBtn">取消</button>
			</view>
			<view class="signBtn-item2">
				<button type="default" plain="true" class="lnvestor-btn1" hover-class="hover"
					@click="clear">清空重写</button>
				<button type="primary" class="lnvestor-btn2" hover-class="hover"
					@click="submitBtn" :disabled="vsignDisabled">提交签名</button>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				signHeight: '375px',
				vsignDisabled: true
			}
		},
		onLoad() {
			var that = this;
			uni.getSystemInfo({
				success: function(res) {
					console.log('屏幕信息', res)
					that.signHeight = (res.windowHeight-130)+"px";
				}
			})
		},
		methods: {
			submitBtn(){
				uni.redirectTo({
					url: '/qualifyLnvestor/qualifyLnvestor/result'
				})
			},
			// 取消
			cancelBtn(){
				uni.navigateBack({
					delta: 1
				})
			},
			// 清除
			clear() {
				this.signCtx.clear();
				this.vsignDisabled = true;
			},
			onSignInit(signCtx) {
				this.signCtx = signCtx
			},
			// 绘画结束触发
			endConfirm() {
				this.vsignDisabled = false;
			}
		}
	}
</script>

<style lang="scss">
	.sign-contain {
		padding-left: 35rpx;
		padding-right: 35rpx;

		.sign-top {
			width: 100%;
			height: 50px;
			line-height: 50px;
			font-size: 16px;
			text-align: center;
			color: #999999;
		}

		.signBtn-box {
			display: flex;
			justify-content: space-between;
			align-items: center;

			.signBtn-item1 {

				// 按钮样式
				.lnvestor-btn {
					margin-top: 11px;
					width: 94px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 16px;
				}

				.hover {
					border: 1px solid #ccc !important;
					color: #ccc !important;
					font-size: 16px !important;
				}
			}

			.signBtn-item2 {
				display: flex;

				// 按钮样式
				.lnvestor-btn1 {
					margin-top: 11px;
					width: 128px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					font-size: 16px;
					margin-right: 16px;
				}

				.lnvestor-btn2 {
					margin-top: 11px;
					width: 128px;
					height: 40px;
					border-radius: 20px;
					display: flex;
					justify-content: center;
					align-items: center;
					background: #b99c65;
					font-size: 16px;
				}

				.hover {
					border: 1px solid #ccc !important;
					color: #ccc !important;
					font-size: 16px !important;
				}
			}
		}
	}
</style>


  • 1
  • 2
  • 3
  • 4
  • 5
  • 6
  • 7
  • 8
  • 9
  • 10
  • 11
  • 12
  • 13
  • 14
  • 15
  • 16
  • 17
  • 18
  • 19
  • 20
  • 21
  • 22
  • 23
  • 24
  • 25
  • 26
  • 27
  • 28
  • 29
  • 30
  • 31
  • 32
  • 33
  • 34
  • 35
  • 36
  • 37
  • 38
  • 39
  • 40
  • 41
  • 42
  • 43
  • 44
  • 45
  • 46
  • 47
  • 48
  • 49
  • 50
  • 51
  • 52
  • 53
  • 54
  • 55
  • 56
  • 57
  • 58
  • 59
  • 60
  • 61
  • 62
  • 63
  • 64
  • 65
  • 66
  • 67
  • 68
  • 69
  • 70
  • 71
  • 72
  • 73
  • 74
  • 75
  • 76
  • 77
  • 78
  • 79
  • 80
  • 81
  • 82
  • 83
  • 84
  • 85
  • 86
  • 87
  • 88
  • 89
  • 90
  • 91
  • 92
  • 93
  • 94
  • 95
  • 96
  • 97
  • 98
  • 99
  • 100
  • 101
  • 102
  • 103
  • 104
  • 105
  • 106
  • 107
  • 108
  • 109
  • 110
  • 111
  • 112
  • 113
  • 114
  • 115
  • 116
  • 117
  • 118
  • 119
  • 120
  • 121
  • 122
  • 123
  • 124
  • 125
  • 126
  • 127
  • 128
  • 129
  • 130
  • 131
  • 132
  • 133
  • 134
  • 135
  • 136
  • 137
  • 138
  • 139
  • 140
  • 141
  • 142
  • 143
  • 144
  • 145
  • 146
  • 147

效果:
在这里插入图片描述

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/羊村懒王/article/detail/297077
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号