smart-app/pages/user/signature/paint/paint.vue

<template>
    <scroll-view scroll-y="false"> 
		<cu-custom bgColor="bg-blue" :isBack="true">
			<block slot="backText">手写签名</block>
			<block slot="content"></block>
			<block slot="right">
				<view class=" flex justify-center round" >
					 <button  class="margin-top-ssm  cu-btn round line-blue text-white">
							<button @click="clearClick()"  class="cu-btn  line-blue "> <text class="text-white">清除</text></button>
							 <text class="cuIcon-titles"></text>
							<button @click="finish()"  class="cu-btn  line-blue"> <text class="text-white">保存</text></button>	
					 </button>
				 </view>
				
			</block>
		</cu-custom>
		<canvas class="margin-top-sm"  style="border: 1px solid #39B54A;height: 1150rpx;width: 98%;" canvas-id="mycanvas" @touchmove='move' @touchstart='start($event)' @touchend='end'
		 @touchcancel='cancel' @longtap='tap' disable-scroll='true' @error='error'>
		</canvas>
		<view class="flex justify-center margin-top-sm">
			<text>请在绿色区域中进行签名</text>
		</view>
	</scroll-view>
</template>
<script>
	import config from "../../../../core/api.js"
	export default {
		data() {
			return {
				qmimgList:[],
				ctx:'',    //绘图图像
				points:[]    ,//路径点集合 
				userInfo:"",
			};
		},
		onLoad() {
			this.paint();
			var userInfo = uni.getStorageSync("userInfo");
			this.userInfo=userInfo;
		},
		methods: {
			paint(){
				this.modalName="Image"
				this.ctx= uni.createCanvasContext('mycanvas',this)
				//设置画笔样式
				this.ctx.setLineWidth(2);
				this.ctx.setStrokeStyle("#DD001B") //字体颜色
				this.ctx.setLineCap("round");
				this.ctx.setLineJoin("round");	
			},
		 // 画布的触摸移动开始手势响应
		 start: function(event) {
		 	//获取触摸开始的 x,y
		 	let point = {
		 		x: event.changedTouches[0].x,
		 		y: event.changedTouches[0].y
		 	}
		 	this.points.push(point);
		 
		 },
		 // 画布的触摸移动手势响应
		 move: function(e) {
		 	let point = {
		 		x: e.touches[0].x,
		 		y: e.touches[0].y
		 	}
		 	// console.log(point)
		 	this.points.push(point)
		 	if (this.points.length >= 2) {
		 		this.draw(this.points)
		 	}
		 },
		 
		 // 画布的触摸移动结束手势响应
		 end: function(e) {
		 	// 清空轨迹数组
		 	for (let i = 0; i < this.points.length; i++) {
		 		this.points.pop()
		 	}
		 
		 },
		 
		 // 画布的触摸取消响应
		 cancel: function(e) {
		 	console.log("触摸取消" + e)
		 },
		 
		 // 画布的长按手势响应
		 tap: function(e) {
		 	console.log("长按手势" + e)
		 },
		 
		 error: function(e) {
		 	console.log("画布触摸错误" + e)
		 },
		 
		 //绘制
		 draw: function() {
		 	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)
		 }, 
		//清除操作
		clearClick: function() {
			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);
				},
			})
		},	 
		//完成绘画并保存到本地
			finish:function(){
				var that =this;
				uni.canvasToTempFilePath({
				  canvasId: 'mycanvas',
				  success: function(res) {
				    let base = res.tempFilePath;
					that.qmimgList=[];
					that.qmimgList.push(base);
					that.modalName="";
					/* that.clearClick(); */
					that.save();
				  } 
				})
			},		
			save(){
				var url  = config.api;
				var that =this;
				var token =uni.getStorageSync("token");
				uni.uploadFile({
					 url: url+'/app/updateSignatureByBase',
					 filePath:that.qmimgList[0],			 
					 name: 'file',
					 header:{"Authorization": token},
					 formData:{
								"userId":that.userInfo.id, 						  
							},
					 success: function (uploadFileRes) {
						  var data = JSON.parse(uploadFileRes.data);
						if(data.result=="1"){
							uni.setStorageSync("userInfo",data.data);
							that.qmimgList=[];
							that.qmimgList.push(data.data.signature);
							that.userInfo.signature =data.data.signature ;
							that.$prompt.none("更新成功");	
						}else{
							that.$prompt.none("更新失败");
						}  
					 }     
				});
			}
			
		}
	}
</script>

<style>
	.cu-form-group .title {
		min-width: calc(4em + 15px);
	}
	.cont{
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: flex-end;
	}
</style>