From a3865e2f26eae990c8ca9cb797bf898e7f91593b Mon Sep 17 00:00:00 2001
From: liub <itliubiao@qq.com>
Date: Thu, 31 Jul 2025 13:54:20 +0800
Subject: [PATCH] =?UTF-8?q?=E6=B7=BB=E5=8A=A0=E6=96=87=E6=9C=AC=E8=A1=8C?=
 =?UTF-8?q?=E8=BD=AC=E7=82=B9=E9=98=B5=E7=9A=84=E6=8F=92=E4=BB=B6?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 components/TextToHex/TextToHex.vue | 149 +++++++++++++++++++++++++++++
 1 file changed, 149 insertions(+)
 create mode 100644 components/TextToHex/TextToHex.vue

diff --git a/components/TextToHex/TextToHex.vue b/components/TextToHex/TextToHex.vue
new file mode 100644
index 0000000..bb8a6d8
--- /dev/null
+++ b/components/TextToHex/TextToHex.vue
@@ -0,0 +1,149 @@
+<template>
+	<view>
+		<!-- 只创建一个Canvas用于复用 -->
+		<canvas
+		  type="2d"
+		  canvas-id="reusableCanvas"
+		  :width="currentCanvasWidth"
+		  :height="currentCanvasHeight"		 
+		  class="offscreen-canvas"
+		></canvas>
+	</view>
+</template>
+
+<script>
+	export default {
+		name: "TextToHex",
+		props: {
+			txts: {
+				type: Array,
+				default: () => [],
+				validator: (value) => value.every(item => typeof item === 'string')
+			},
+			fontSize: {
+				type: Number,
+				default: 16,
+				validator: (value) => value > 0 && value <= 100
+			},
+			bgColor:{
+				type:String,
+				default:"#000000"
+			},
+			color:{
+				type:String,
+				default:"#FFFFFF"
+			}
+		},
+		data() {
+			return {
+				// 当前Canvas的宽高（动态调整）
+				currentCanvasWidth: 0,
+				currentCanvasHeight: 0,
+				// Canvas上下文（复用）
+				ctx: null
+			};
+		},
+		computed: {
+			validTxts() {
+				return this.txts.filter(line => line.trim() !== '');
+			}
+		},
+		mounted() {
+			// 初始化Canvas上下文（只创建一次）
+			this.ctx = uni.createCanvasContext('reusableCanvas', this);
+		},
+		methods: {
+			/**
+			 * 估算单行文本所需的Canvas宽度
+			 */
+			calcLineWidth(textLine) {
+				return textLine.length * this.fontSize;
+			},
+			
+			/**
+			 * 清除Canvas内容
+			 */
+			clearCanvas() {
+				this.ctx.setFillStyle(this.bgColor);
+				this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
+			},
+			
+			/**
+			 * 复用单个Canvas处理所有文本行
+			 */
+			async drawAndGetPixels() {
+				if (this.validTxts.length === 0) {
+					return [];
+				}
+				
+				const result = [];
+				const ctx = this.ctx;
+				
+				// 循环处理每行文本
+				for (let i = 0; i < this.validTxts.length; i++) {
+					const textLine = this.validTxts[i];
+					// 1. 动态调整Canvas尺寸
+					this.currentCanvasWidth = this.calcLineWidth(textLine);
+					this.currentCanvasHeight = this.fontSize;
+					
+					// 2. 清空Canvas（绘制背景）
+					this.clearCanvas();
+					
+					// 3. 设置文字样式
+					ctx.setFillStyle(this.color);
+					ctx.setTextBaseline('middle');
+					ctx.setFontSize(this.fontSize);
+					ctx.font = `${this.fontSize}px SimHei, Microsoft YaHei, Arial, sans-serif`;
+					
+					// 4. 绘制当前行文本
+					let currentX = 0;
+					const currentY = this.fontSize / 2;
+					for (let j = 0; j < textLine.length; j++) {
+						const char = textLine[j];
+						ctx.fillText(char, currentX, currentY);
+						// 按实际字符宽度计算间距
+						const charWidth = ctx.measureText(char).width;
+						currentX += charWidth ;
+					}
+					
+					// 5. 异步绘制并获取像素数据（串行处理避免冲突）
+					await new Promise((resolve, reject) => {
+						ctx.draw(false, () => {
+							uni.canvasGetImageData({
+								canvasId: 'reusableCanvas',
+								x: 0,
+								y: 0,
+								width: this.currentCanvasWidth,
+								height: this.currentCanvasHeight,
+								success: res => {
+									result.push({
+										line: textLine,
+										pixelData: res.data,
+										width: this.currentCanvasWidth,
+										height: this.currentCanvasHeight
+									});
+									resolve();
+								},
+								fail: err => {
+									// console.error(`处理第${i+1}行失败:`, err);
+									reject(err
+								}
+							});
+						});
+					});
+				}
+				
+				return result;
+			}
+		}
+	};
+</script>
+
+<style >
+	.offscreen-canvas {
+		position: fixed;
+		left: -9999px;
+		top: -9999px;
+		visibility: hidden;
+	}
+</style>