uview-plus 3.4.84 → 3.4.86

package/changelog.md

@@ -1,7 +1,14 @@
+## 3.4.86（2025-08-12）
+feat: 新增signature签名签字组件
+
+## 3.4.85（2025-08-11）
+feat: 完善图片裁剪功能支持props及JS两种方式
+
+fix: 修复H5下裁剪后图片黑屏
+
 ## 3.4.84（2025-08-11）
 feat: 新增cropper图片裁剪组件
 
-
 ## 3.4.83（2025-08-11）
 feat: 新增barcode无三方依赖条码组
 

package/components/u-cropper/u-cropper.vue

@@ -1,12 +1,12 @@
-<template name="u-cropper">
-	<view>
-		<image :src="imgSrc.imgSrc" @click="select" :style="[ imgStyle ]" class="my-avatar"></image>
-		<canvas canvas-id="avatar-canvas" id="avatar-canvas" class="my-canvas"
+<template>
+	<view class="u-cropper">
+		<!-- <image :src="imgSrc.imgSrc" @click="select" :style="[ imgStyle ]" class="my-avatar"></image> -->
+		<canvas :canvas-id="'avatar-canvas-' + instanceId" :id="'avatar-canvas-' + instanceId" class="my-canvas"
 			:style="{top: styleTop, height: cvsStyleHeight}" disable-scroll="false"></canvas>
-		<canvas canvas-id="oper-canvas" id="oper-canvas" class="oper-canvas"
+		<canvas :canvas-id="'oper-canvas-' + instanceId" :id="'oper-canvas-' + instanceId" class="oper-canvas"
 			:style="{top: styleTop, height: cvsStyleHeight}"
 			disable-scroll="false" @touchstart="start" @touchmove="move" @touchend="end"></canvas>
-		<canvas canvas-id="prv-canvas" id="prv-canvas" class="prv-canvas"disable-scroll="false"
+		<canvas :canvas-id="'prv-canvas-' + instanceId" :id="'prv-canvas-' + instanceId" class="prv-canvas"disable-scroll="false"
 			@touchstart="hideImg":style="{ height: cvsStyleHeight, top: prvTop }"></canvas>
 		<view class="oper-wrapper" :style="{display: styleDisplay}">
 			<view class="oper">
@@ -24,6 +24,11 @@
 				</view>
 			</view>
 		</view>
+		<view @click="chooseImage(0, {})" v-if="styleDisplay == 'none'">
+			<slot>
+				
+			</slot>
+		</view>
 	</view>
 </template>
 
@@ -33,6 +38,8 @@
 		name: "u-cropper",
 		data() {
 			return {
+				// 添加实例ID用于区分不同实例
+				instanceId: Date.now() + '-' + Math.random().toString(36).substr(2, 9),
 				cvsStyleHeight: '0px',
 				styleDisplay: 'none',
 				styleTop: '-10000px',
@@ -45,6 +52,17 @@
 				},
 				btnWidth: '19%',
 				btnDsp: 'flex',
+				// 裁剪区域宽度，用于设置选择区域的宽度
+				arWidth: '',
+				// 裁剪区域高度，用于设置选择区域的高度
+				arHeight: '',
+				// 导出图片宽度，用于设置最终导出图片的宽度
+				expWidth: '',
+				// 导出图片高度，用于设置最终导出图片的高度
+				expHeight: '',
+				// 是否允许调整裁剪框大小
+				letChangeSize: false,
+				
 			};
 		},
 		watch: {
@@ -54,16 +72,6 @@
 		},
 		emits: ['avtinit', 'confirm'],
 		props:{
-			// 裁剪区域宽度，用于设置选择区域的宽度
-			areaWidth: '',
-			// 裁剪区域高度，用于设置选择区域的高度
-			areaHeight: '',
-			// 导出图片宽度，用于设置最终导出图片的宽度
-			exportWidth: '',
-			// 导出图片高度，用于设置最终导出图片的高度
-			exportHeight: '',
-			// 是否允许调整裁剪框大小
-			canChangeSize: false,
 			minScale: '',
 			maxScale: '',
 			canScale: true,
@@ -76,17 +84,25 @@
 			inner: false,
 			quality: '',
 			index: '',
+			canChangeSize: false,
+			areaWidth: '300rpx',
+			// 裁剪区域高度，用于设置选择区域的高度
+			areaHeight: '300rpx',
+			// 导出图片宽度，用于设置最终导出图片的宽度
+			exportWidth: '260rpx',
+			// 导出图片高度，用于设置最终导出图片的高度
+			exportHeight: '260rpx',
 		},
 		created() {
-			this.ctxCanvas = uni.createCanvasContext('avatar-canvas', this);
-			this.ctxCanvasOper = uni.createCanvasContext('oper-canvas', this);
-			this.ctxCanvasPrv = uni.createCanvasContext('prv-canvas', this);
+			this.ctxCanvas = uni.createCanvasContext('avatar-canvas-' + this.instanceId, this);
+			this.ctxCanvasOper = uni.createCanvasContext('oper-canvas-' + this.instanceId, this);
+			this.ctxCanvasPrv = uni.createCanvasContext('prv-canvas-' + this.instanceId, this);
 			this.qlty = parseInt(this.quality) || 0.9;
-			this.imgSrc.imgSrc = this.avatarSrc;
+			this.imgSrc.imgSrc = this.imageSrc;
 			this.letRotate = (this.canRotate === false || this.inner === true) ? 0 : 1;
 			this.letScale = this.canScale === false ? 0 : 1;
 			// 是否允许调整裁剪框大小，false表示不允许，其他值表示允许
-			this.letChangeSize = this.canChangeSize === false ? 0 : 1;
+			this.letChangeSize = this.canChangeSize;
 			this.isin = this.inner === true ? 1 : 0;
 			this.indx = this.index || undefined;
 			this.mnScale = this.minScale || 0.3;
@@ -162,8 +178,8 @@
 					this.imgStyle = obj;
 				}
 
-				this.exportWidth && (this.exportWidth = this.exportWidth.indexOf('rpx') >= 0 ? parseInt(this.exportWidth)*this.pxRatio : parseInt(this.exportWidth));
-				this.exportHeight && (this.exportHeight = this.exportHeight.indexOf('rpx') >= 0 ? parseInt(this.exportHeight)*this.pxRatio : parseInt(this.exportHeight));
+				this.expWidth && (this.expWidth = this.expWidth.indexOf('rpx') >= 0 ? parseInt(this.expWidth)*this.pxRatio : parseInt(this.expWidth));
+				this.expHeight && (this.expHeight = this.expHeight.indexOf('rpx') >= 0 ? parseInt(this.expHeight)*this.pxRatio : parseInt(this.expHeight));
 
 				if(this.styleDisplay === 'flex') {
 					this.drawInit(true);
@@ -190,9 +206,9 @@
 								this.path = path;
 								if( !this.hasSel ) {
 									let style = this.selStyle || {};
-									if( this.areaWidth && this.areaHeight ) {
-										let areaWidth  = this.areaWidth.indexOf('rpx')  >= 0 ? parseInt(this.areaWidth)  * this.pxRatio: parseInt(this.areaWidth),
-											areaHeight = this.areaHeight.indexOf('rpx') >= 0 ? parseInt(this.areaHeight) * this.pxRatio: parseInt(this.areaHeight);
+									if( this.arWidth && this.arHeight ) {
+										let areaWidth  = this.arWidth.indexOf('rpx')  >= 0 ? parseInt(this.arWidth)  * this.pxRatio: parseInt(this.arWidth),
+											areaHeight = this.arHeight.indexOf('rpx') >= 0 ? parseInt(this.arHeight) * this.pxRatio: parseInt(this.arHeight);
 										style.width = areaWidth + 'px';
 										style.height = areaHeight + 'px';
 										style.top = (this.windowHeight - areaHeight - tabHeight)/2 + 'px';
@@ -240,12 +256,12 @@
 					y = parseInt(style.top),
 					width = parseInt(style.width),
 					height = parseInt(style.height),
-					expWidth = this.exportWidth || width,
-					expHeight = this.exportHeight || height;
+					expWidth = this.expWidth || width,
+					expHeight = this.expHeight || height;
 
 				// #ifdef H5
-				x *= this.pixelRatio;
-				y *= this.pixelRatio;
+				// x *= this.pixelRatio;
+				// y *= this.pixelRatio;
 				expWidth = width;
 				expHeight = height;
 				// #endif
@@ -262,18 +278,17 @@
 					height: height,
 					destWidth: expWidth,
 					destHeight: expHeight,
-					canvasId: 'avatar-canvas',
+					canvasId: 'avatar-canvas-' + this.instanceId,
 					fileType: 'png',
 					quality: this.qlty,
 					success: (r)=>{
 						r = r.tempFilePath;
 						// #ifdef H5
-						alert()
 						this.btop(r).then((r)=> {
-							if(this.exportWidth && this.exportHeight) {
+							if(this.expWidth && this.expHeight) {
 								let ctxCanvas = this.ctxCanvas;
-								expWidth = this.exportWidth,
-								expHeight = this.exportHeight;
+								expWidth = this.expWidth,
+								expHeight = this.expHeight;
 
 								ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
 								ctxCanvas.draw(false,()=>{
@@ -284,7 +299,7 @@
 										height: expHeight,
 										destWidth: expWidth,
 										destHeight: expHeight,
-										canvasId: 'avatar-canvas',
+										canvasId: 'avatar-canvas-' + this.instanceId,
 										fileType: 'png',
 										quality: this.qlty,
 										success: (r)=>{
@@ -335,12 +350,12 @@
 					prvY = this.prvY,
 					prvWidth = this.prvWidth,
 					prvHeight = this.prvHeight,
-					expWidth = this.exportWidth || prvWidth,
-					expHeight = this.exportHeight || prvHeight;
+					expWidth = this.expWidth || prvWidth,
+					expHeight = this.expHeight || prvHeight;
 
 				// #ifdef H5
-				prvX *= this.pixelRatio;
-				prvY *= this.pixelRatio;
+				// prvX *= this.pixelRatio;
+				// prvY *= this.pixelRatio;
 				expWidth = prvWidth;
 				expHeight = prvHeight;
 				// #endif
@@ -358,17 +373,17 @@
 					height: prvHeight,
 					destWidth: expWidth,
 					destHeight: expHeight,
-					canvasId: 'prv-canvas',
+					canvasId: 'prv-canvas-' + this.instanceId,
 					fileType: 'png',
 					quality: this.qlty,
 					success: (r)=>{
 						r = r.tempFilePath;
 						// #ifdef H5
 						this.btop(r).then((r)=> {
-							if(this.exportWidth && this.exportHeight) {
+							if(this.expWidth && this.expHeight) {
 								let ctxCanvas = this.ctxCanvas;
-								expWidth = this.exportWidth,
-								expHeight = this.exportHeight;
+								expWidth = this.expWidth,
+								expHeight = this.expHeight;
 
 								ctxCanvas.drawImage(r, 0, 0, expWidth, expHeight);
 								ctxCanvas.draw(false, ()=>{
@@ -379,7 +394,7 @@
 										height: expHeight,
 										destWidth: expWidth,
 										destHeight: expHeight,
-										canvasId: 'avatar-canvas',
+										canvasId: 'avatar-canvas-' + this.instanceId,
 										fileType: 'png',
 										quality: this.qlty,
 										success: (r)=>{
@@ -592,30 +607,24 @@
 				if(this.fPreviewing) return;
 				this.fPreviewing = true;
 				setTimeout(()=>{ this.fPreviewing = false; }, 1000);
-
 				let style = this.selStyle,
 					x = parseInt(style.left),
 					y = parseInt(style.top),
 					width = parseInt(style.width),
 					height = parseInt(style.height);
 
-				// #ifdef H5
-				x *= this.pixelRatio;
-				y *= this.pixelRatio;
-				// #endif
-
 				uni.showLoading({ mask: true });
-				console.log('size', x, y, width, height)
+				// console.log('size', x, y, width, height)
 				uni.canvasToTempFilePath({
 					x: x,
 					y: y,
 					width: width,
 					height: height,
-					canvasId: 'avatar-canvas',
+					canvasId: 'avatar-canvas-' + this.instanceId,
 					fileType: 'png',
 					quality: this.qlty,
 					success: (r)=>{
-						console.log(r)
+						// console.log(r)
 						this.prvImgTmp = r = r.tempFilePath;
 
 						let ctxCanvasPrv = this.ctxCanvasPrv,
@@ -635,7 +644,7 @@
 								prvWidth *= radio;
 								prvHeight = useHeight;
 							}
-						// ctxCanvasPrv.setFillStyle('black');
+						ctxCanvasPrv.setFillStyle('black');
 						ctxCanvasPrv.fillRect(0, 0, prvX, prvY);
 						ctxCanvasPrv.fillRect(x, y, width, height);
 						this.prvX = prvX = (prvX-prvWidth)/2;
@@ -643,7 +652,7 @@
 						this.prvWidth = prvWidth;
 						this.prvHeight = prvHeight;
 						ctxCanvasPrv.drawImage(r, prvX, prvY, prvWidth, prvHeight);
-						ctxCanvasPrv.draw(false, () => {alert()
+						ctxCanvasPrv.draw(false, () => {
 							// #ifdef H5
 							this.btop(this.prvImgTmp).then((r)=> {
 								this.showOper = false;
@@ -671,26 +680,28 @@
 			},
 			chooseImage(index=undefined, params=undefined, data=undefined) {
 				if(params) {
-					let areaWidth = params.areaWidth,
-						areaHeight = params.areaHeight,
-						expWidth = params.expWidth,
-						expHeight = params.expHeight,
+					console.log(params)
+					let areaWidth = params.areaWidth || this.areaWidth,
+						areaHeight = params.areaHeight || this.areaHeight,
+						expWidth = params.exportWidth || this.exportWidth,
+						expHeight = params.exportHeight || this.exportHeight,
 						quality = params.quality,
 						canRotate = params.canRotate,
 						canScale = params.canScale,
-						canChangeSize = params.canChangeSize || false,
+						canChangeSize = params.canChangeSize,
 						minScale = params.minScale,
 						maxScale = params.maxScale,
 						stretch = params.stretch,
 						inner = params.inner,
 						lock = params.lock;
+						console.log('areaWidth', this.areaWidth)
 
-					expWidth && (this.exportWidth = expWidth.indexOf('rpx') >= 0 ? parseInt(expWidth)*this.pxRatio : parseInt(expWidth));
-					expHeight && (this.exportHeight = expHeight.indexOf('rpx') >= 0 ? parseInt(expHeight)*this.pxRatio : parseInt(expHeight));
+					expWidth && (this.expWidth = expWidth.indexOf('rpx') >= 0 ? parseInt(expWidth)*this.pxRatio : parseInt(expWidth));
+					expHeight && (this.expHeight = expHeight.indexOf('rpx') >= 0 ? parseInt(expHeight)*this.pxRatio : parseInt(expHeight));
 					this.letRotate = canRotate === false ? 0 : 1;
 					this.letScale = canScale === false ? 0 : 1;
 					// 设置是否允许调整裁剪框大小
-					this.letChangeSize = canChangeSize === false ? 0 : 1;
+					this.letChangeSize = canChangeSize || false;
 					this.qlty = parseInt(quality) || 0.9;
 					this.mnScale = minScale || 0.3;
 					this.mxScale = maxScale || 4;
@@ -712,6 +723,7 @@
 						this.selStyle.height = areaHeight + 'px';
 						this.selStyle.top = (this.windowHeight - areaHeight - tabHeight)/2 + 'px';
 						this.selStyle.left = (this.windowWidth - areaWidth)/2 + 'px';
+						// console.log(this.selStyle);
 						this.hasSel = true;
 					}
 				}
@@ -936,7 +948,7 @@
 					prvHeight *= this.pixelRatio;
 					// #endif
 					uni.canvasGetImageData({
-						canvasId: 'prv-canvas',
+						canvasId: 'prv-canvas-' + this.instanceId,
 						x: prvX,
 						y: prvY,
 						width: prvWidth,
@@ -1070,7 +1082,7 @@
 				prvHeight *= this.pixelRatio;
 				// #endif
 				uni.canvasPutImageData({
-					canvasId: 'prv-canvas',
+					canvasId: 'prv-canvas-' + this.instanceId,
 					x: prvX,
 					y: prvY,
 					width: prvWidth,
@@ -1104,7 +1116,8 @@
 	}
 </script>
 
-<style>
+<style lang="scss" scoped>
+.u-cropper {
 	.my-canvas{
 		display: flex;
 		position: fixed !important;
@@ -1196,4 +1209,5 @@
 	.my-slider {
 		flex-grow: 1;
 	}
+}
 </style>

package/components/u-signature/u-signature.vue

@@ -0,0 +1,498 @@
+<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"
+				@touchend="touchEnd"
+				:style="{
+					width: canvasWidth + 'px',
+					height: canvasHeight + 'px',
+					background: bgColor
+				}"
+			></canvas>
+		</view>
+		
+		<view v-if="showToolbar" class="u-signature__toolbar">
+			<view class="u-signature__toolbar-icons u-flex u-flex-x">
+				<view class="u-signature__toolbar-icon" @click="undo">
+					<u-icon name="arrow-left" size="22" :color="pathStack.length === 0 ? '#ccc' : '#999'"></u-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="clear">
+					<u-icon name="trash" size="25" color="#999"></u-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="toggleBrushSettings">
+					<u-icon name="edit-pen" size="25" color="#999"></u-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="toggleColorSettings">
+					<u-icon name="grid" size="24" color="#999"></u-icon>
+				</view>
+				<view class="u-signature__toolbar-icon" @click="exportSignature">
+					<u-icon name="checkmark" size="25" :color="isEmpty ? '#ccc' : '#999'"></u-icon>
+				</view>
+			</view>
+			
+			<!-- 笔画设置 -->
+			<view v-if="showBrushSettings" class="u-signature__brush-settings">
+				<view class="u-signature__progress">
+					<text class="u-signature__progress-label">笔画大小:</text>
+					<up-slider 
+						v-model="lineWidth" 
+						:min="1" 
+						:max="20" 
+						:step="1"
+						@show-value="true"
+						:value-show="(lineWidth)"
+					></up-slider>
+				</view>
+			</view>
+			
+			<!-- 颜色设置 -->
+			<view v-if="showColorSettings" class="u-signature__color-settings">
+				<view class="u-signature__color-picker">
+                    <text class="u-signature__color-label">笔画颜色:</text>
+					<view class="u-signature__colors">
+						<view 
+							v-for="(color, index) in presetColors" 
+							:key="index"
+							class="u-signature__color-item"
+							:class="{'u-signature__color-item--active': lineColor === color}"
+							:style="{ backgroundColor: color }"
+							@click="selectColor(color)"
+						></view>
+					</view>
+				</view>
+			</view>
+		</view>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: 'u-signature',
+		props: {
+			// 画布宽度
+			width: {
+				type: [String, Number],
+				default: 300
+			},
+			// 画布高度
+			height: {
+				type: [String, Number],
+				default: 200
+			},
+			// 背景颜色
+			bgColor: {
+				type: String,
+				default: '#ffffff'
+			},
+			// 默认笔画颜色
+			color: {
+				type: String,
+				default: '#000000'
+			},
+			// 默认笔画粗细
+			thickness: {
+				type: [String, Number],
+				default: 3
+			},
+			// 是否显示工具栏
+			showToolbar: {
+				type: Boolean,
+				default: true
+			}
+		},
+		data() {
+			return {
+				canvasId: 'u-signature-' + Math.random().toString(36).substr(2, 9),
+				canvasWidth: 300,
+				canvasHeight: 200,
+				lineColor: '#000000',
+				lineWidth: 3,
+				isDrawing: false,
+				pathStack: [], // 存储绘制路径用于回退
+				currentPath: [], // 当前绘制路径
+				ctx: null,
+				isEmpty: true,
+				presetColors: [
+					'#000000', // 黑色
+					'#ff0000', // 红色
+					'#00ff00', // 绿色
+					'#0000ff', // 蓝色
+					'#ffff00', // 黄色
+					'#00ffff', // 青色
+					'#ff00ff', // 紫色
+					'#ffffff'  // 白色
+				],
+				showBrushSettings: false,
+				showColorSettings: false,
+				lastPoint: null // 保存上一个点的坐标
+			}
+		},
+		mounted() {
+			this.initCanvas()
+		},
+		watch: {
+			width: {
+				handler(newVal) {
+					this.canvasWidth = Number(newVal)
+				},
+				immediate: true
+			},
+			height: {
+				handler(newVal) {
+					this.canvasHeight = Number(newVal)
+				},
+				immediate: true
+			},
+			color: {
+				handler(newVal) {
+					this.lineColor = newVal
+				},
+				immediate: true
+			},
+			thickness: {
+				handler(newVal) {
+					this.lineWidth = Number(newVal)
+				},
+				immediate: true
+			}
+		},
+		methods: {
+			initCanvas() {
+				// #ifndef APP-NVUE
+				const ctx = uni.createCanvasContext(this.canvasId, this)
+				this.ctx = ctx
+				this.clearCanvas()
+				// #endif
+				
+				// #ifdef APP-NVUE
+				// NVUE环境下的处理
+				// #endif
+			},
+			
+			touchStart(e) {
+				if (!this.ctx) return
+				
+				this.isDrawing = true
+				this.isEmpty = false
+				this.currentPath = []
+				
+				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.currentPath.push({
+					x,
+					y,
+					type: 'start',
+					color: this.lineColor,
+					width: this.lineWidth
+				})
+				
+				// 保存上一个点
+				this.lastPoint = { x, y }
+				
+				// 阻止默认事件以提高性能
+				e.preventDefault()
+			},
+			
+			touchMove(e) {
+				if (!this.isDrawing || !this.ctx) return
+				
+				// 阻止默认事件以提高性能
+				e.preventDefault()
+				
+				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.lastPoint = { x, y }
+			},
+			
+			touchEnd(e) {
+				if (!this.isDrawing || !this.ctx) return
+				
+				this.isDrawing = false
+				this.ctx.closePath()
+				this.lastPoint = null
+				
+				// 将当前路径加入栈中用于回退
+				if (this.currentPath.length > 0) {
+					this.pathStack.push([...this.currentPath])
+				}
+			},
+			
+			// 获取相对于canvas的坐标点
+			getCanvasPoint(e) {
+				const touch = e.touches[0]
+				const rect = uni.createSelectorQuery().in(this).select('.u-signature__canvas').boundingClientRect()
+				
+				return new Promise((resolve) => {
+					rect.boundingClientRect(data => {
+						const x = touch.x - data.left
+						const y = touch.y - data.top
+						resolve({ x, y })
+					}).exec()
+				})
+			},
+			
+			// 同步获取canvas坐标点（兼容处理）
+			getCanvasPoint(e) {
+				const touch = e.touches[0]
+				const canvas = uni.createSelectorQuery().in(this).select('.u-signature__canvas')
+				
+				// 返回一个包含坐标的对象
+				return {
+					x: touch.x,
+					y: touch.y
+				}
+			},
+			
+			// 选择颜色
+			selectColor(color) {
+				this.lineColor = color
+			},
+			
+			// 回退操作
+			undo() {
+				if (this.pathStack.length === 0) return
+				
+				// 弹出最后一个路径
+				this.pathStack.pop()
+				
+				// 重新绘制
+				this.redraw()
+			},
+			
+			// 重新绘制所有路径
+			redraw() {
+				this.clearCanvas()
+				
+				if (this.pathStack.length === 0) {
+					this.isEmpty = true
+					return
+				}
+				
+				this.isEmpty = false
+				
+				// #ifndef APP-NVUE
+				this.pathStack.forEach(path => {
+					if (path.length === 0) return
+					
+					this.ctx.beginPath()
+					this.ctx.setLineCap('round')
+					this.ctx.setLineJoin('round')
+					
+					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 }
+						} else if (point.type === 'move') {
+							this.ctx.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()
+			},
+			
+			// 清空画布内容
+			clearCanvas() {
+				if (!this.ctx) return
+				
+				// #ifndef APP-NVUE
+				this.ctx.setFillStyle(this.bgColor)
+				this.ctx.fillRect(0, 0, this.canvasWidth, this.canvasHeight)
+				this.ctx.draw()
+				// #endif
+			},
+			
+			// 导出签名图片
+			exportSignature() {
+				if (this.isEmpty) 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
+				
+				// #ifdef APP-NVUE
+				// NVUE环境下可能需要特殊处理
+				// #endif
+			},
+			
+			// 切换笔画设置显示
+			toggleBrushSettings() {
+				this.showBrushSettings = !this.showBrushSettings;
+				if (this.showBrushSettings) {
+					this.showColorSettings = false;
+				}
+			},
+			
+			// 切换颜色设置显示
+			toggleColorSettings() {
+				this.showColorSettings = !this.showColorSettings;
+				if (this.showColorSettings) {
+					this.showBrushSettings = false;
+				}
+			},
+		}
+	}
+</script>
+
+<style lang="scss" scoped>
+	.u-signature {
+		display: flex;
+		flex-direction: column;
+		
+		&__canvas-wrap {
+			border: 1px solid #e0e0e0;
+			border-radius: 4px;
+			overflow: hidden;
+		}
+		
+		&__canvas {
+			width: 100%;
+			height: 100%;
+		}
+		
+		&__toolbar {
+			margin-top: 5px;
+            background-color: #fff;
+		}
+		
+		&__toolbar-icons {
+			display: flex;
+			justify-content: space-between;
+			align-items: center;
+			padding: 1px 0;
+			// border: 1px solid #e0e0e0;
+			border-radius: 4px;
+		}
+		
+		&__toolbar-icon {
+			padding: 5px;
+		}
+		
+		&__brush-settings,
+		&__color-settings {
+			margin-top: 15px;
+			padding: 1px;
+			// border: 1px solid #e0e0e0;
+			border-radius: 4px;
+		}
+		
+		&__progress {
+			&-label {
+				display: block;
+				margin-bottom: 10px;
+				font-size: 14px;
+				color: #999;
+			}
+		}
+		
+		&__color-picker {
+			margin-bottom: 10px;
+		}
+		
+		&__color-label {
+			display: block;
+			margin-bottom: 10px;
+			font-size: 14px;
+			color: #999;
+		}
+		
+		&__colors {
+			display: flex;
+            flex-direction: row;
+			flex-wrap: wrap;
+			gap: 10px;
+		}
+		
+		&__color-item {
+			width: 30px;
+			height: 30px;
+			border-radius: 50%;
+			border: 2px solid #f0f0f0;
+			cursor: pointer;
+			
+			&--active {
+				border-color: #2979ff;
+				transform: scale(1.1);
+			}
+		}
+		
+		&__actions {
+			display: flex;
+            flex-direction: row;
+			gap: 10px;
+			justify-content: center;
+		}
+	}
+</style>

package/package.json

@@ -2,8 +2,8 @@
   "id": "uview-plus",
   "name": "uview-plus",
   "displayName": "零云®uview-plus3.0重磅发布，全面的Vue3鸿蒙跨端移动组件库，组件丰富维护更新稳定。",
-  "version": "3.4.84",
-  "description": "零云®uview-plus已兼容vue3，100+全面的组件和便捷的工具会让您信手拈来，如鱼得水。",
+  "version": "3.4.86",
+  "description": "零云®uview-plus已兼容vue3，100+全面的组件和便捷的工具会让您信手拈来。近期新增拖动排序、条码、图片裁剪、下拉刷新、虚拟列表、签名等。",
   "keywords": [
     "uview",
     "uview-plus",