From c8ea753b8e2050d5280939ca5445454668959221 Mon Sep 17 00:00:00 2001 From: fengerli <528575642@qq.com> Date: Mon, 17 Nov 2025 09:29:05 +0800 Subject: [PATCH] =?UTF-8?q?=E6=81=A2=E5=A4=8D7305=E4=BB=A3=E7=A0=81?= =?UTF-8?q?=E5=86=B2=E7=AA=81?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextToHex/textToDotMatrixFor7305.vue | 198 ++++-------------- 1 file changed, 37 insertions(+), 161 deletions(-) diff --git a/components/TextToHex/textToDotMatrixFor7305.vue b/components/TextToHex/textToDotMatrixFor7305.vue index 307b03b..7160bf5 100644 --- a/components/TextToHex/textToDotMatrixFor7305.vue +++ b/components/TextToHex/textToDotMatrixFor7305.vue @@ -1,6 +1,6 @@ @@ -27,16 +27,6 @@ color: { type: String, default: "#000000" - }, - // 二值化阈值（0~1），越大越细；默认偏清晰 - threshold: { - type: Number, - default: 0.45 - }, - // 是否启用轻度笔画修复（3x3 膨胀）；默认关闭以避免变粗 - sharpen: { - type: Boolean, - default: false } }, data() { @@ -58,16 +48,6 @@ this.ctx = uni.createCanvasContext('reusableCanvas', this); }, methods: { - /** - * 外部可调用：复位画布为纯背景并立即提交 - */ - async resetCanvas() { - if (!this.ctx) return; - this.clearCanvas(); - await new Promise((resolve) => { - this.ctx.draw(true, () => setTimeout(resolve, 30)); - }); - }, /** * 估算单行文本所需的Canvas宽度 */ @@ -79,8 +59,6 @@ * 清除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); }, @@ -89,11 +67,6 @@ * 复用单个Canvas处理所有文本行 */ async drawAndGetPixels() { - // 发送前：确保画布处于干净背景态 - await this.resetCanvas(); - // 超采样比例（提高分辨率再降采样，减少模糊） - const SCALE = 3; - const PADDING_X = 1 * SCALE; // 左侧预留像素，避免首字裁剪 let binaryToHex = (binaryArray) => { if (!Array.isArray(binaryArray) || binaryArray.length !== 8) { throw new Error("输入必须是包含8个元素的二进制数组"); @@ -117,107 +90,25 @@ return hexString; } - let convertCharToMatrix = (drawResult, item) => { - // 设备端使用13x13点阵渲染（保持输出13列×13行），但只在内部采样12×12，保留右侧与底部1像素缓冲 + let convertCharToMatrix = (imageData, item) => { const charWidth = 13; - const charHeight = 13; - const effectiveWidth = 12; // 仅采样前12列 - const effectiveHeight = 12; // 仅采样前12行 - const { pixelData, width, height } = drawResult; - // 将高分辨率像素降采样为13x13的布尔矩阵 - const target = new Array(charWidth * charHeight).fill(0); - const threshold = Math.max(0.2, Math.min(0.8, this.threshold || 0.45)); - - // 确保采样区域严格对齐，从PADDING_X开始，只采样12列（右侧预留1px），12行（底部预留1px） - // 字符实际绘制区域：从PADDING_X开始，宽度为12*SCALE - const charStartX = PADDING_X; - const charEndX = PADDING_X + effectiveWidth * SCALE; // 仅采样到第12列 - - for (let y = 0; y < charHeight; y++) { - for (let x = 0; x < charWidth; x++) { - // 超出有效采样区域（第13列或第13行）直接置0，作为缓冲 - if (x >= effectiveWidth || y >= effectiveHeight) { - target[y * charWidth + x] = 0; - continue; - } - 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; - - // 边界检查：确保不超出Canvas边界，且不超出字符实际绘制区域 - if (px < 0 || py < 0 || px >= width || py >= height) { - // 边界外视为背景（黑色） - continue; - } - // 额外检查：确保不采样到字符右侧的残留区域 - if (px >= charEndX) { - // 超出字符区域，视为背景 - 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; - // 计算亮度 - const luminance = 0.299 * R + 0.587 * G + 0.114 * B; - const alpha = A / 255; - // 背景是黑色，文字是白色，所以判断亮色（>=128）为文字点 - if (luminance >= 128 && alpha > 0.5) onCount++; - total++; - } - } - // 当亮色占比超过阈值时判为1（至少需要采样到一些像素） - target[y * charWidth + x] = (total > 0 && onCount / total >= threshold) ? 1 : 0; - } + const charHeight = 12; + const pixels = []; + for (let i = 0; i < imageData.length; i += 4) { + const R = imageData[i]; + pixels.push(R < 128 ? 1 : 0); } - // 轻度笔画修复：可选 3x3 膨胀（启用时阈值更严格，避免变粗） - if (this.sharpen) { - const dilated = target.slice(); - for (let y = 0; y < effectiveHeight; y++) { - for (let x = 0; x < effectiveWidth; x++) { - const idx = y * charWidth + x; - if (target[idx] === 1) continue; - let neighbors = 0; - for (let dy = -1; dy <= 1; dy++) { - for (let dx = -1; dx <= 1; dx++) { - if (dx === 0 && dy === 0) continue; - const nx = x + dx; - const ny = y + dy; - if (nx < 0 || ny < 0 || nx >= effectiveWidth || ny >= effectiveHeight) continue; - if (target[ny * charWidth + nx] === 1) neighbors++; - } - } - // 使用更严格的邻居门限，避免整体变粗 - if (neighbors >= 5) { - dilated[idx] = 1; - } - } - } - for (let i = 0; i < target.length; i++) target[i] = dilated[i]; - } - const lowBytes = new Array(charWidth).fill(0); const highBytes = new Array(charWidth).fill(0); - // 按列打包，每列13行分成上下两字节：低字节0-7行（8行），高字节8-12行（5行） + for (let col = 0; col < charWidth; col++) { for (let row = 0; row < charHeight; row++) { - const pixel = target[row * charWidth + col]; + const pixel = pixels[row * charWidth + col]; if (pixel === 1) { if (row < 8) { - // 低字节：0-7行，从低位到高位 lowBytes[col] |= (1 << row); } else { - // 高字节：8-12行，从低位到高位（使用5位，剩余3位未使用） highBytes[col] |= (1 << (row - 8)); } } @@ -230,32 +121,34 @@ let result = {}; let ctx = this.ctx; - // 1. 动态调整Canvas尺寸（高分辨率） - // 设备端使用13x13点阵渲染 - this.currentCanvasWidth = 13 * SCALE + PADDING_X; - this.currentCanvasHeight = 13 * SCALE; + // 1. 动态调整Canvas尺寸 + this.currentCanvasWidth = 13; + this.currentCanvasHeight = 12; // 2. 清空Canvas（绘制背景） this.clearCanvas(); - // 3. 设置文字样式（整数像素对齐，顶部基线，避免首字裁剪） + // 3. 设置文字样式 ctx.setFillStyle(this.color); - 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`; + ctx.setTextBaseline('middle'); + // ctx.setTextAlign('center') + ctx.setFontSize(this.fontSize); + ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`; - // 4. 绘制单个字符（每个字符独立绘制在固定位置） - // 确保字符始终从PADDING_X开始绘制，Y坐标为0，保证采样一致性 - const charX = PADDING_X; - const charY = 0; - ctx.fillText(textLine, charX, charY); + // 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; + } // 5. 异步绘制并获取像素数据（串行处理避免冲突） - const grabPixels = () => new Promise((resolve, reject) => { - // 立即绘制并给一点缓冲时间，避免取像素过早 - ctx.draw(true, () => { + await new Promise((resolve, reject) => { + ctx.draw(false, () => { setTimeout(() => { uni.canvasGetImageData({ canvasId: 'reusableCanvas', @@ -272,22 +165,14 @@ }; resolve(); }, - fail: err => reject(err) + fail: err => { + // console.error(`处理第${i+1}行失败:`, err); + reject(err) + } }); - }, 70); + }, 100); }); }); - - await grabPixels(); - // 一次性校验：若像素全黑或明显异常，重绘重取一次 - let nonZero = false; - for (let i = 0; i < result.pixelData.length; i += 4) { - if (result.pixelData[i] || result.pixelData[i+1] || result.pixelData[i+2]) { nonZero = true; break; } - } - if (!nonZero) { - await new Promise(r => setTimeout(r, 50)); - await grabPixels(); - } return result; } @@ -299,23 +184,13 @@ let item = this.validTxts[i]; // console.log("item=", item); for (var j = 0; j < item.length; j++) { - 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); - // 在字符间增加轻微延时，避免相邻提取竞争（尤其是末字符） - await new Promise(r => setTimeout(r, 20)); + let result = await drawTxt(item[j]); + linePixls.push(convertCharToMatrix(result.pixelData, item)); } // console.log("hexs=", linePixls.join(",")); arr.push(linePixls); - // 每行结束再等一会，提高末字符稳定性 - await new Promise(r => setTimeout(r, 40)); } - // 发送后：再次清空画布，避免残留影响下一次 - await this.resetCanvas(); return arr; } } @@ -327,5 +202,6 @@ position: fixed; left: -9999px; top: -9999px; + visibility: hidden; } \ No newline at end of file