From 3bd962a6d7f61239c020e2dbbeb7341e5b842dd1 Mon Sep 17 00:00:00 2001
From: WXL <wl_5969728@163.com>
Date: 星期二, 21 四月 2026 11:46:41 +0800
Subject: [PATCH] 推送
---
node_modules/uview-plus/components/u-signature/u-signature.vue | 279 ++++++++++++++++++++++++++++---------------------------
1 files changed, 140 insertions(+), 139 deletions(-)
diff --git a/node_modules/uview-plus/components/u-signature/u-signature.vue b/node_modules/uview-plus/components/u-signature/u-signature.vue
index 4adfc2e..d76ba34 100644
--- a/node_modules/uview-plus/components/u-signature/u-signature.vue
+++ b/node_modules/uview-plus/components/u-signature/u-signature.vue
@@ -1,19 +1,22 @@
<template>
<view class="u-signature">
- <view class="u-signature__canvas-wrap">
- <canvas
- class="u-signature__canvas"
- :canvas-id="canvasId"
- :disable-scroll="true"
- @touchstart="touchStart"
- @touchmove="touchMove"
+ <view class="u-signature__canvas-wrap" :style="{background: bgColor}">
+ <up-canvas
+ ref="signatureCanvas"
+ :canvas-id="canvasId"
+ :width="canvasWidth"
+ :height="canvasHeight"
+ :bg-color="bgColor"
+ @touchstart="touchStart"
+ @touchmove="touchMove"
@touchend="touchEnd"
+ :disable-scroll="true"
+ class="u-signature__canvas"
:style="{
width: canvasWidth + 'px',
height: canvasHeight + 'px',
- background: bgColor
- }"
- ></canvas>
+ }">
+ </up-canvas>
</view>
<view v-if="showToolbar" class="u-signature__toolbar">
@@ -116,7 +119,6 @@
isDrawing: false,
pathStack: [], // 瀛樺偍缁樺埗璺緞鐢ㄤ簬鍥為��
currentPath: [], // 褰撳墠缁樺埗璺緞
- ctx: null,
isEmpty: true,
presetColors: [
'#000000', // 榛戣壊
@@ -130,11 +132,16 @@
],
showBrushSettings: false,
showColorSettings: false,
- lastPoint: null // 淇濆瓨涓婁竴涓偣鐨勫潗鏍�
+ lastPoint: null, // 淇濆瓨涓婁竴涓偣鐨勫潗鏍�
+ canvasInstance: null // 缂撳瓨canvas瀹炰緥
}
},
mounted() {
- this.initCanvas()
+ // 鍒濆鍖栨椂鑾峰彇canvas瀹炰緥
+ this.$nextTick(() => {
+ this.getCanvasInstance();
+ this.clearCanvas();
+ });
},
watch: {
width: {
@@ -163,32 +170,41 @@
}
},
methods: {
- initCanvas() {
- // #ifndef APP-NVUE
- const ctx = uni.createCanvasContext(this.canvasId, this)
- this.ctx = ctx
- this.clearCanvas()
- // #endif
+ t,
+
+ // 鑾峰彇绛惧悕鐢诲竷瀹炰緥
+ getCanvasInstance() {
+ if (this.canvasInstance) {
+ return this.canvasInstance;
+ }
- // #ifdef APP-NVUE
- // NVUE鐜涓嬬殑澶勭悊
- // #endif
+ const canvasRef = this.$refs.signatureCanvas;
+ if (canvasRef) {
+ this.canvasInstance = canvasRef;
+ return canvasRef;
+ }
+ return null;
},
touchStart(e) {
- if (!this.ctx) return
+ if (!this.canvasInstance || !this.canvasInstance.ctx) {
+ this.getCanvasInstance();
+ }
- this.isDrawing = true
- this.isEmpty = false
- this.currentPath = []
+ if (!this.canvasInstance || !this.canvasInstance.ctx) return;
- const { x, y } = this.getCanvasPoint(e)
- this.ctx.beginPath()
- this.ctx.moveTo(x, y)
- this.ctx.setLineCap('round')
- this.ctx.setLineJoin('round')
- this.ctx.setStrokeStyle(this.lineColor)
- this.ctx.setLineWidth(this.lineWidth)
+ this.isDrawing = true;
+ this.isEmpty = false;
+ this.currentPath = [];
+
+ const { x, y } = this.getCanvasPoint(e);
+
+ // 璁剧疆绾挎潯鏍峰紡
+ this.canvasInstance.setLineStyle(this.lineColor, this.lineWidth);
+
+ // 寮�濮嬭矾寰�
+ this.canvasInstance.beginPath();
+ this.canvasInstance.moveTo(x, y);
// 璁板綍璧峰鐐�
this.currentPath.push({
@@ -197,83 +213,69 @@
type: 'start',
color: this.lineColor,
width: this.lineWidth
- })
+ });
// 淇濆瓨涓婁竴涓偣
- this.lastPoint = { x, y }
+ this.lastPoint = { x, y };
// 闃绘榛樿浜嬩欢浠ユ彁楂樻�ц兘
- e.preventDefault()
+ e.preventDefault();
},
touchMove(e) {
- if (!this.isDrawing || !this.ctx) return
+ if (!this.isDrawing || !this.canvasInstance || !this.canvasInstance.ctx) return;
// 闃绘榛樿浜嬩欢浠ユ彁楂樻�ц兘
- e.preventDefault()
+ e.preventDefault();
- const { x, y } = this.getCanvasPoint(e)
+ const { x, y } = this.getCanvasPoint(e);
- // 浣跨敤鏇村瘑闆嗙殑鐐归噰鏍风‘淇濈嚎鏉¤繛璐��
- if (this.lastPoint) {
- // 璁＄畻涓ょ偣闂磋窛绂�
- const distance = Math.sqrt(Math.pow(x - this.lastPoint.x, 2) + Math.pow(y - this.lastPoint.y, 2))
- // 鏍规嵁璺濈纭畾鎻掑�肩偣鏁伴噺锛岀‘淇濈偣闂磋窛涓嶈秴杩�1鍍忕礌浠ヨ幏寰楁洿骞虫粦鐨勭嚎鏉�
- const steps = Math.max(1, Math.floor(distance / 1))
-
- // 鍦ㄤ袱鐐归棿鎻掑叆鎻掑�肩偣
- for (let i = 1; i <= steps; i++) {
- const t = i / steps
- const midX = this.lastPoint.x + (x - this.lastPoint.x) * t
- const midY = this.lastPoint.y + (y - this.lastPoint.y) * t
-
- this.ctx.lineTo(midX, midY)
- this.ctx.stroke()
- this.currentPath.push({
- x: midX,
- y: midY,
- type: 'move'
- })
- }
- } else {
- this.ctx.lineTo(x, y)
- this.ctx.stroke()
- this.currentPath.push({
- x,
- y,
- type: 'move'
- })
- }
-
- this.ctx.draw(true)
+ // 浠庝笂涓�涓偣鐢荤嚎鍒板綋鍓嶇偣
+ this.canvasInstance.lineTo(x, y);
+ this.canvasInstance.stroke(); // 瀹炴椂缁樺埗褰撳墠绾挎
+ this.currentPath.push({
+ x,
+ y,
+ type: 'move'
+ });
+ this.canvasInstance.draw(false);
// 鏇存柊涓婁竴涓偣
- this.lastPoint = { x, y }
+ this.lastPoint = { x, y };
},
touchEnd(e) {
- if (!this.isDrawing || !this.ctx) return
+ if (!this.isDrawing || !this.canvasInstance || !this.canvasInstance.ctx) return;
- this.isDrawing = false
- this.ctx.closePath()
- this.lastPoint = null
+ this.isDrawing = false;
+ this.canvasInstance.closePath();
+ this.lastPoint = null;
// 灏嗗綋鍓嶈矾寰勫姞鍏ユ爤涓敤浜庡洖閫�
if (this.currentPath.length > 0) {
- this.pathStack.push([...this.currentPath])
+ this.pathStack.push([...this.currentPath]);
}
+
+ // 鏈�鍚庣粺涓�鎵ц涓�娆＄粯鍒�
+ this.canvasInstance.draw(true);
},
// 鍚屾鑾峰彇canvas鍧愭爣鐐癸紙鍏煎澶勭悊锛�
getCanvasPoint(e) {
- const touch = e.touches[0]
- const canvas = uni.createSelectorQuery().in(this).select('.u-signature__canvas')
+ // #ifdef MP-WEIXIN
+ const touch = e.touches && e.touches[0] ? e.touches[0] : e.mp.touches[0];
+ // #endif
+ // #ifndef MP-WEIXIN
+ const touch = e.touches[0];
+ // #endif
- // 杩斿洖涓�涓寘鍚潗鏍囩殑瀵硅薄
+ // 璁＄畻鐩稿浜巆anvas鐨勫潗鏍�
+ // 鐢变簬鏃犳硶鐩存帴鑾峰彇canvas浣嶇疆锛岃繖閲岀畝鍖栧鐞�
+ // 瀹為檯搴旂敤涓彲鑳介渶瑕侀�氳繃uni.createSelectorQuery鑾峰彇canvas浣嶇疆
return {
x: touch.x,
y: touch.y
- }
+ };
},
// 閫夋嫨棰滆壊
@@ -294,84 +296,83 @@
// 閲嶆柊缁樺埗鎵�鏈夎矾寰�
redraw() {
- this.clearCanvas()
-
- if (this.pathStack.length === 0) {
- this.isEmpty = true
- return
+ if (!this.canvasInstance) {
+ this.getCanvasInstance();
}
- this.isEmpty = false
+ if (!this.canvasInstance) return;
- // #ifndef APP-NVUE
+ // 鍏堟竻绌虹敾甯�
+ this.canvasInstance.clearCanvas();
+
+ if (this.pathStack.length === 0) {
+ this.isEmpty = true;
+ return;
+ }
+
+ this.isEmpty = false;
+
+ // 閫愪釜缁樺埗璺緞
this.pathStack.forEach(path => {
- if (path.length === 0) return
+ if (path.length === 0) return;
- this.ctx.beginPath()
- this.ctx.setLineCap('round')
- this.ctx.setLineJoin('round')
+ this.canvasInstance.beginPath();
- let lastPoint = null
+ let lastPoint = null;
path.forEach((point, index) => {
if (index === 0 && point.type === 'start') {
- // 璁剧疆璧峰鐐规牱寮�
- this.ctx.setStrokeStyle(point.color)
- this.ctx.setLineWidth(point.width)
- this.ctx.moveTo(point.x, point.y)
- lastPoint = { x: point.x, y: point.y }
+ // 璁剧疆绾挎潯鏍峰紡
+ this.canvasInstance.setLineStyle(point.color, point.width);
+ this.canvasInstance.moveTo(point.x, point.y);
+ lastPoint = { x: point.x, y: point.y };
} else if (point.type === 'move') {
- this.ctx.lineTo(point.x, point.y)
- lastPoint = { x: point.x, y: point.y }
+ this.canvasInstance.lineTo(point.x, point.y);
+ lastPoint = { x: point.x, y: point.y };
}
- })
-
- this.ctx.stroke()
- this.ctx.draw(true)
- })
- // #endif
- },
-
- // 娓呯┖鐢诲竷
- clear() {
- this.pathStack = []
- this.currentPath = []
- this.isEmpty = true
- this.lastPoint = null
- this.clearCanvas()
+ });
+ this.canvasInstance.stroke();
+ this.canvasInstance.draw(true);
+ });
},
// 娓呯┖鐢诲竷鍐呭
clearCanvas() {
- if (!this.ctx) return
+ if (!this.canvasInstance) {
+ this.getCanvasInstance();
+ }
- // #ifndef APP-NVUE
- this.ctx.setFillStyle(this.bgColor)
- this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
- this.ctx.draw()
- // #endif
+ if (!this.canvasInstance) return;
+
+ this.canvasInstance.clearCanvas();
},
// 瀵煎嚭绛惧悕鍥剧墖
- exportSignature() {
- if (this.isEmpty) return
+ async exportSignature() {
+ if (this.isEmpty) {
+ console.warn('绛惧悕涓虹┖锛屾棤娉曞鍑�');
+ return;
+ }
- // #ifndef APP-NVUE
- uni.canvasToTempFilePath({
- canvasId: this.canvasId,
- fileType: 'png',
- quality: 1,
- success: (res) => {
- this.$emit('confirm', res.tempFilePath)
- },
- fail: (err) => {
- this.$emit('error', err)
- }
- }, this)
- // #endif
+ if (!this.canvasInstance) {
+ this.getCanvasInstance();
+ }
- // #ifdef APP-NVUE
- // NVUE鐜涓嬪彲鑳介渶瑕佺壒娈婂鐞�
- // #endif
+ if (!this.canvasInstance) {
+ console.error('鏃犳硶鑾峰彇鐢诲竷瀹炰緥');
+ return;
+ }
+
+ try {
+ // 鍏堥噸缁樻暣涓鍚嶅唴瀹�
+ this.redraw();
+
+ // 瀵煎嚭鍥剧墖
+ const imagePath = await this.canvasInstance.exportImage('png', 1);
+ this.$emit('confirm', imagePath);
+ } catch (error) {
+ console.error('瀵煎嚭绛惧悕鍥剧墖澶辫触:', error);
+ this.$emit('error', error);
+ }
},
// 鍒囨崲绗旂敾璁剧疆鏄剧ず
--
Gitblit v1.9.3