修改7305人员信息取模组件，文本自动居中

components/TextToHex/textToDotMatrixFor7305.vue

@@ -14,7 +14,7 @@
 				default: () => [],
 				validator: (value) => value.every(item => typeof item === 'string')
 			},
-			
+
 			fontSize: {
 				type: Number,
 				default: 16,
@@ -27,6 +27,10 @@
 			color: {
 				type: String,
 				default: "#000000"
+			},
+			maxLength: {
+				type: Number,
+				default: 5
 			}
 		},
 		data() {
@@ -145,13 +149,21 @@
 					return hexString;
 				}
 
-				let convertCharToMatrix = (imageData, item) => {
+				let convertCharToMatrix = (imageData) => {
 					const charWidth = 13;
 					const charHeight = 13;
 					const pixels = [];
 					for (let i = 0; i < imageData.length; i += 4) {
+						// const R = imageData[i];
+						// pixels.push(R < 128 ? 1 : 0);
+						
+						
 						const R = imageData[i];
-						pixels.push(R < 128 ? 1 : 0);
+						const G = imageData[i + 1];
+						const B = imageData[i + 2];
+						const gray = 0.299 * R + 0.587 * G + 0.114 * B; // 灰度转换
+						pixels.push(gray < 128 ? 1 : 0);
+						
 					}
 
 					const lowBytes = new Array(charWidth).fill(0);
@@ -173,11 +185,12 @@
 				}
 
 				let drawTxt = async (textLine) => {
+					debugger;
 					let result = {};
 					let ctx = this.ctx;
 
 					// 1. 动态调整Canvas尺寸
-					this.currentCanvasWidth = 13;
+					this.currentCanvasWidth = 13 * this.maxLength;
 					this.currentCanvasHeight = 13;
 
 					// 2. 清空Canvas（绘制背景）
@@ -191,16 +204,15 @@
 					ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
 
 					// 4. 绘制当前行文本
-					let currentX = 0;
-					let currentY = this.fontSize / 2 + 1;
-					for (let j = 0; j < textLine.length; j++) {
-						let char = textLine[j];
-						ctx.fillText(char, currentX, currentY);
-						// 按实际字符宽度计算间距
-						let charWidth = ctx.measureText(char).width;
-						currentX += charWidth;
-					}
+					debugger;
 
+
+					let currentX =(this.maxLength - textLine.length) * this.fontSize / 2;
+					
+
+					let currentY = this.fontSize / 2 + 1;
+					ctx.fillText(textLine, currentX, currentY);
+					
 					// 5. 异步绘制并获取像素数据（串行处理避免冲突）
 					await new Promise((resolve, reject) => {
 						ctx.draw(false, () => {
@@ -212,11 +224,14 @@
 									width: this.currentCanvasWidth,
 									height: this.currentCanvasHeight,
 									success: res => {
+										debugger;
 										result = {
 											line: textLine,
 											pixelData: res.data,
-											width: this.currentCanvasWidth,
-											height: this.currentCanvasHeight
+											width: this
+												.currentCanvasWidth,
+											height: this
+												.currentCanvasHeight
 										};
 										resolve();
 									},
@@ -234,15 +249,34 @@
 				let arr = [];
 				// 循环处理每行文本
 				for (let i = 0; i < this.validTxts.length; i++) {
-
+					debugger;
 					let linePixls = [];
 					let item = this.validTxts[i];
-					// console.log("item=", item);
-					for (var j = 0; j < item.length; j++) {
-						let result = await drawTxt(item[j]);
-						linePixls.push(convertCharToMatrix(result.pixelData, item));
+					let res = await drawTxt(item);
+					let rawData= res.pixelData;
+
+					
+					let result = [[], [], [], [], []];
+					
+					
+					
+					for (let char = 0; char < 5; char++) {
+					    for (let row = 0; row < 13; row++) {
+					        let start = row * (5 * 52) + char * 52 + 1;
+					        let end = start + 51;
+
+					        for (let i = 0; i < 52; i++) {
+					            result[char].push(rawData[start + i]);
+					        }
+					        
+					    }
 					}
-					// console.log("hexs=", linePixls.join(","));
+					debugger;
+					for (var j = 0; j < result.length; j++) {
+
+						linePixls.push(convertCharToMatrix(result[j]));
+					}
+					
 					arr.push(linePixls);
 				}