school-shunt-app/components/u-sign/u-sign.vue

<template>
	<view class="u-sign" :class="{'is-null': isNull}">
		<view class="u-sign-content">
			<canvas class="handWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
				@touchmove="uploadScaleMove" canvas-id="handWriting"></canvas>
		</view>
		<view class="re-draw" @click="retDraw">
			<image style="width: 37rpx;height: 35rpx;" src="/static/xpc.png" mode="widthFix" />
		</view>
		<view v-if="false" class="handBtn">
			<image @click="selectColorEvent('black','#1A1A1A')"
				:src="selectColor === 'black' ? '/static/other/color_black_selected.png' : '/static/other/color_black.png'"
				:class="[selectColor === 'black' ? 'color_select' : '', 'black-select']"></image>
			<image @click="selectColorEvent('red','#ca262a')"
				:src="selectColor === 'red' ? '/static/other/color_red_selected.png' : '/static/other/color_red.png'"
				:class="[selectColor === 'red' ? 'color_select' : '', 'black-select']"></image>
			<button @click="retDraw" class="delBtn">重写</button>
			<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
			<button @click="previewCanvasImg" class="previewBtn">预览</button>
			<button @click="subCanvas" class="subBtn">完成</button>
		</view>

	</view>

</template>

<script>
	export default {
		name: 'u-sign',
		data() {
			return {
				canvasName: 'handWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				isNull: true
			};
		},
		mounted() {
			this.ctx = uni.createCanvasContext("handWriting");
			console.log(111, this.ctx)
			this.$nextTick(() => {
				uni.createSelectorQuery().select('.u-sign-content').boundingClientRect(rect => {
						this.canvasWidth = rect.width;
						this.canvasHeight = rect.height;
						/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
						this.setCanvasBg('#FAFAFA');
					})
					.exec();
			});
		},
		methods: {
			// 笔迹开始
			uploadScaleStart(e) {
				this.isNull = false
				this.startX = e.changedTouches[0].x
				this.startY = e.changedTouches[0].y
				//设置画笔参数
				//画笔颜色
				this.ctx.setStrokeStyle(this.lineColor)
				//设置线条粗细
				this.ctx.setLineWidth(this.lineSize)
				//设置线条的结束端点样式
				this.ctx.setLineCap("round") //'butt'、'round'、'square'
				//开始画笔
				this.ctx.beginPath()
			},
			// 笔迹移动
			uploadScaleMove(e) {
				//取点
				let temX = e.changedTouches[0].x
				let temY = e.changedTouches[0].y
				//画线条
				this.ctx.moveTo(this.startX, this.startY)
				this.ctx.lineTo(temX, temY)
				this.ctx.stroke()
				this.startX = temX
				this.startY = temY
				this.ctx.draw(true)
			},
			/**
			 * 重写
			 */
			retDraw() {
				this.isNull = true
				this.ctx.clearRect(0, 0, 700, 730);
				this.ctx.draw();
				//设置canvas背景
				this.setCanvasBg('#fff');
			},
			/**
			 * @param {Object} str
			 * @param {Object} color
			 * 选择颜色
			 */
			selectColorEvent(str, color) {
				this.selectColor = str;
				this.lineColor = color;
			},
			getBase64(success) {
				if (this.isNull) {
					success(null)
				} else {
					uni.canvasToTempFilePath({
						canvasId: 'handWriting',
						fileType: 'png',
						quality: 1, //图片质量
						success,
					})

				}
			},
			//完成
			subCanvas() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						// console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.showToast({
							title: '以保存'
						});
						//保存到系统相册
						uni.saveImageToPhotosAlbum && uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已成功保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//保存到相册
			saveCanvasAsImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'png',
					quality: 1, //图片质量
					success(res) {
						console.log(res.tempFilePath, 'canvas生成图片地址');
						uni.saveImageToPhotosAlbum && uni.saveImageToPhotosAlbum({
							filePath: res.tempFilePath,
							success(res) {
								uni.showToast({
									title: '已保存到相册',
									duration: 2000
								});
							}
						});
					}
				});
			},
			//预览
			previewCanvasImg() {
				uni.canvasToTempFilePath({
					canvasId: 'handWriting',
					fileType: 'jpg',
					quality: 1, //图片质量
					success(res) {
						uni.previewImage({
							urls: [res.tempFilePath] //预览图片 数组
						});
					}
				});
			},
			//设置canvas背景色  不设置  导出的canvas的背景为透明
			//@params：字符串  color
			setCanvasBg(color) {

				/* 将canvas背景设置为 白底，不设置  导出的canvas的背景为透明 */
				//rect() 参数说明  矩形路径左上角的横坐标，左上角的纵坐标, 矩形路径的宽度, 矩形路径的高度
				//这里是 canvasHeight - 4 是因为下边盖住边框了，所以手动减了写
				this.ctx.rect(0, 0, this.canvasWidth, this.canvasHeight - 4);
				// ctx.setFillStyle('red')
				this.ctx.setFillStyle(color);
				this.ctx.fill(); //设置填充
				this.ctx.draw(); //开画
			}
		}
	};
</script>

<style lang="scss" scoped>
	.u-sign {
		overflow: hidden;
		position: relative;

		&:after {
			position: absolute;
			top: 0;
			right: 0;
			left: 0;
			bottom: 0;
			content: '';
			font-size: 36rpx;
			font-weight: bold;
			color: #CCCCCC;
			padding-top: 200rpx;
			text-align: center;
			border: 1rpx solid #CCCCCC;
			pointer-events: none;
			opacity: 0.5;
		}
	}

	.is-null {
		&:after {
			content: '请在此签名';
		}
	}

	.handWriting {
		background: #fff;
		width: 100%;
		height: 100%;
	}

	.handRight {
		display: inline-flex;
		align-items: center;
	}

	.u-sign-content {
		width: 100%;
		height: 454rpx;
		overflow: hidden;
		background: #FAFAFA;
		// border: 1rpx solid #CCCCCC;
		border-radius: 8rpx;
		// margin-bottom: 32rpx;
	}

	.re-draw {
		position: absolute;
		bottom: 0;
		right: 0;
		padding: 16rpx;
		cursor: pointer;
	}
</style>