修复复杂字体渲染设备端乱序问题

components/TextToHex/textToDotMatrixFor7305.vue

@@ -59,6 +59,8 @@
 			 * 清除Canvas内容
 			 */
 			clearCanvas() {
+				// 先清除，再用背景色填充，确保无残留
+				this.ctx.clearRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 				this.ctx.setFillStyle(this.bgColor);
 				this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
 			},
@@ -67,6 +69,9 @@
 			 * 复用单个Canvas处理所有文本行
 			 */
 			async drawAndGetPixels() {
+				// 超采样比例（提高分辨率再降采样，减少模糊）
+				const SCALE = 3;
+				const PADDING_X = 1 * SCALE; // 左侧预留像素，避免首字裁剪
 				let binaryToHex = (binaryArray) => {
 					if (!Array.isArray(binaryArray) || binaryArray.length !== 8) {
 						throw new Error("输入必须是包含8个元素的二进制数组");
@@ -90,25 +95,61 @@
 					return hexString;
 				}
 
-				let convertCharToMatrix = (imageData, item) => {
+				let convertCharToMatrix = (drawResult, item) => {
 					const charWidth = 13;
 					const charHeight = 12;
-					const pixels = [];
-					for (let i = 0; i < imageData.length; i += 4) {
-						const R = imageData[i];
-						pixels.push(R < 128 ? 1 : 0);
+					const { pixelData, width, height } = drawResult;
+					// 将高分辨率像素降采样为13x12的布尔矩阵
+					const target = new Array(charWidth * charHeight).fill(0);
+					const threshold = 0.5; // 每个小块中超过50%深色判为1
+					
+					// 确保采样区域严格对齐，从PADDING_X开始，但只采样13列
+					for (let y = 0; y < charHeight; y++) {
+						for (let x = 0; x < charWidth; x++) {
+							let onCount = 0;
+							let total = 0;
+							// 采样区域：字符从PADDING_X开始绘制，每列宽度为SCALE
+							const startX = PADDING_X + x * SCALE;
+							const startY = y * SCALE;
+							
+							for (let sy = 0; sy < SCALE; sy++) {
+								for (let sx = 0; sx < SCALE; sx++) {
+									const px = startX + sx;
+									const py = startY + sy;
+									if (px < 0 || py < 0 || px >= width || py >= height) {
+										// 边界外视为背景（白色）
+										continue;
+									}
+									const idx = (py * width + px) * 4;
+									const R = pixelData[idx];
+									const G = pixelData[idx + 1];
+									const B = pixelData[idx + 2];
+									const A = pixelData[idx + 3] || 255;
+									// 使用更严格的阈值，考虑alpha通道
+									const luminance = 0.299 * R + 0.587 * G + 0.114 * B;
+									const alpha = A / 255;
+									// 只有深色且不透明才计入
+									if (luminance < 128 && alpha > 0.5) onCount++;
+									total++;
+								}
+							}
+							// 当深色占比超过阈值时判为1（至少需要采样到一些像素）
+							target[y * charWidth + x] = (total > 0 && onCount / total >= threshold) ? 1 : 0;
+						}
 					}
 
 					const lowBytes = new Array(charWidth).fill(0);
 					const highBytes = new Array(charWidth).fill(0);
-
+					// 按列打包，每列12行分成上下两字节
 					for (let col = 0; col < charWidth; col++) {
 						for (let row = 0; row < charHeight; row++) {
-							const pixel = pixels[row * charWidth + col];
+							const pixel = target[row * charWidth + col];
 							if (pixel === 1) {
 								if (row < 8) {
+									// 低字节：0-7行，从低位到高位
 									lowBytes[col] |= (1 << row);
 								} else {
+									// 高字节：8-11行，从低位到高位
 									highBytes[col] |= (1 << (row - 8));
 								}
 							}
@@ -121,30 +162,26 @@
 					let result = {};
 					let ctx = this.ctx;
 
-					// 1. 动态调整Canvas尺寸
-					this.currentCanvasWidth = 13;
-					this.currentCanvasHeight = 12;
+					// 1. 动态调整Canvas尺寸（高分辨率）
+					this.currentCanvasWidth = 13 * SCALE + PADDING_X;
+					this.currentCanvasHeight = 12 * SCALE;
 
 					// 2. 清空Canvas（绘制背景）
 					this.clearCanvas();
 
-					// 3. 设置文字样式
+					// 3. 设置文字样式（整数像素对齐，顶部基线，避免首字裁剪）
 					ctx.setFillStyle(this.color);
-					ctx.setTextBaseline('middle');
-					// ctx.setTextAlign('center')
-					ctx.setFontSize(this.fontSize);
-					ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
+					ctx.setTextBaseline('top');
+					ctx.setTextAlign('left');
+					const fs = Math.max(1, Math.round(this.fontSize)) * SCALE;
+					ctx.setFontSize(fs);
+					ctx.font = `${fs}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;
-					}
+					// 4. 绘制单个字符（每个字符独立绘制在固定位置）
+					// 确保字符始终从PADDING_X开始绘制，Y坐标为0，保证采样一致性
+					const charX = PADDING_X;
+					const charY = 0;
+					ctx.fillText(textLine, charX, charY);
 
 					// 5. 异步绘制并获取像素数据（串行处理避免冲突）
 					await new Promise((resolve, reject) => {
@@ -156,12 +193,12 @@
 								width: this.currentCanvasWidth,
 								height: this.currentCanvasHeight,
 								success: res => {
-									result = {
-										line: textLine,
-										pixelData: res.data,
-										width: this.currentCanvasWidth,
-										height: this.currentCanvasHeight
-									};
+								result = {
+									line: textLine,
+									pixelData: res.data,
+									width: this.currentCanvasWidth,
+									height: this.currentCanvasHeight
+								};
 									resolve();
 								},
 								fail: err => {
@@ -182,8 +219,12 @@
 					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 char = item[j];
+						let result = await drawTxt(char);
+						let matrix = convertCharToMatrix(result, item);
+						// 调试：打印每个字符的点阵数据
+						console.log(`[点阵生成] 字符"${char}" 点阵数据:`, matrix.map(b => '0x' + b.toString(16).padStart(2, '0')).join(' '));
+						linePixls.push(matrix);
 					}
 					// console.log("hexs=", linePixls.join(","));
 					arr.push(linePixls);