uniapp 小程序手写实现签名功能

别凶小晗.

已于 2024-02-24 22:01:53 修改

阅读量1.3k

点赞数 9

CC 4.0 BY-SA版权

文章标签： uni-app 小程序 javascript

于 2024-01-20 17:37:47 首次发布

本文链接：https://blog.csdn.net/Wang_MengHan/article/details/135719021

在这里插入图片描述

<template>
	<view>
		<view class="wrapper">
			<!-- <view class="handBtn">
				<button @click="retDraw" class="delBtn">重写</button>
				<button @click="saveCanvasAsImg" class="saveBtn">保存</button>
				<button @click="subCanvas" class="subBtn">完成</button>
			</view> -->
			<view class="handCenter">
				<canvas class="suppWriting" :disable-scroll="true" @touchstart="uploadScaleStart"
					@touchmove="uploadScaleMove" canvas-id="suppWriting"></canvas>
			</view>
			<view class="handRight">
				<view class="handTitle">客户签名</view>
				<view class="handBtn">
					<view class="" @click="retDraw">
						<view class="delBtnIcon"><u-icon name="trash" color="#F11515" size="18"></u-icon></view>
						<view class="delBtn">清除画布</view>
					</view>
					<!-- <button class="delBtn" icon="trash">清除画布</button> -->
					<!-- <button @click="saveCanvasAsImg" class="saveBtn">保存</button> -->
					<button @click="subCanvas" class="subBtn">确定</button>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import {
   
   
		customerSign
	} from '@/api/api'
	export default {
   
   
		data() {
   
   
			return {
   
   
				dpID: 0,
				canvasName: 'suppWriting',
				ctx: '',
				startX: null,
				startY: null,
				canvasWidth: 0,
				canvasHeight: 0,
				selectColor: 'black',
				lineColor: '#1A1A1A', // 颜色
				lineSize: 5, // 笔记倍数
				MyResult: {
   
   },
				upgradeContractFlag: false,
				d