hytc-customer/pages/evaluate/autograph.vue

<template>
	<view>
		<view class="dashbox">
			<view class="btnList">
				<view @click="clearCanvas">清空</view>
			</view>
			<view class="handCenter">
				<canvas class="handWriting" canvas-id="handWriting" :disable-scroll="true" @touchstart="scaleStart"
					@touchmove="scaleMove" @touchend="scaleEnd" type="2d">
				</canvas>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				canvasName: '#handWriting',
				ctx: '',
				canvasWidth: 0,
				canvasHeight: 0,
				startPoint: {
					x: 0,
					y: 0,
				},
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 1.5, // 笔记倍数
				radius: 5, //画圆的半径
			}
		},
		onLoad() {
			
		},
		onShow() {
			
		},
		onReady() {
			var canvas = uni.createCanvasContext('#handWriting')
			console.log(canvas)
			this.ctx = canvas
		},
		methods: {
			scaleStart(event) {
				console.log(event,'kaishi')
				if (event.type != 'touchstart') return false;
				let currentPoint = {
					x: event.touches[0].x,
					y: event.touches[0].y
				}
				this.drawCircle(currentPoint);
				this.startPoint = currentPoint
			},
			scaleMove(e) {
				console.log(this.startPoint,e.touches[0],'开始画')
				this.drawLine({x:121,y:107},{x:208,y:127})
			},
			scaleEnd(e) {
				console.log(e,'结束画')
			},
			drawCircle(point) { //这里负责点
				let ctx = this.ctx;
				ctx.beginPath();
				ctx.setFillStyle(this.lineColor)
				//笔迹粗细由圆的大小决定
				ctx.arc(point.x, point.y, this.radius, 0, 2 * Math.PI);
				ctx.fill();
				ctx.closePath();
			},
			drawLine(sourcePoint, targetPoint) {
				let ctx = this.ctx;
				this.drawCircle(targetPoint);
				ctx.beginPath();
				//ctx.setLineWidth(this.radius * 2)//这里乘2是因为线条的粗细要和圆的直径相等
				ctx.moveTo(sourcePoint.x, sourcePoint.y);
				ctx.lineTo(targetPoint.x, targetPoint.y);
				ctx.stroke();
				ctx.closePath();
			},
			clearCanvas() { //清空画布
				let ctx = this.ctx;
				ctx.rect(0, 0, this.canvasWidth, this.canvasHeight);
				ctx.fillStyle = '#FFFFFF';
				ctx.fill();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.btnList {
		width: 95%;
		margin: 0 auto;
	}
	.handWriting {
		background: #f5f5f5;
		width: 690rpx;
		height: 80vh;
		margin: 0 auto
	}
</style>