From d06cd6cdfdf94321f5257891a85516b066ff8014 Mon Sep 17 00:00:00 2001 From: =?UTF-8?q?=E5=BE=AE=E5=BE=AE=E4=B8=80=E7=AC=91?= <709648985@qq.com> Date: Tue, 4 Nov 2025 19:30:47 +0800 Subject: [PATCH] =?UTF-8?q?=E4=BF=AE=E5=A4=8D=E5=A4=8D=E6=9D=82=E5=AD=97?= =?UTF-8?q?=E4=BD=93=E6=B8=B2=E6=9F=93=E8=AE=BE=E5=A4=87=E7=AB=AF=E4=B9=B1?= =?UTF-8?q?=E5=BA=8F=E9=97=AE=E9=A2=98?= MIME-Version: 1.0 Content-Type: text/plain; charset=UTF-8 Content-Transfer-Encoding: 8bit --- .../TextToHex/textToDotMatrixFor7305.vue | 107 ++++++++++++------ pages/7305/BJQ7305.vue | 36 ++++-- 2 files changed, 100 insertions(+), 43 deletions(-) diff --git a/components/TextToHex/textToDotMatrixFor7305.vue b/components/TextToHex/textToDotMatrixFor7305.vue index 6fc362b..86e2e95 100644 --- a/components/TextToHex/textToDotMatrixFor7305.vue +++ b/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); diff --git a/pages/7305/BJQ7305.vue b/pages/7305/BJQ7305.vue index 087bd56..2148a84 100644 --- a/pages/7305/BJQ7305.vue +++ b/pages/7305/BJQ7305.vue @@ -262,7 +262,8 @@ alarmStatus: null, detailPageUrl: "/pages/6155/deviceDetail", showConfirm: false - } + }, + sendSeq: 0 } }, @@ -1083,6 +1084,8 @@ this.Status.Pop.showPop = true; }, sendUsr() { + this.sendSeq++; + const currentSeq = this.sendSeq; let f = this.getDevice(); if (!f) { these.showBleUnConnect() @@ -1111,7 +1114,7 @@ }); this.setBleFormData(); let task = async () => { - var sendTxtPackge = (rgbdata, type, str) => { + var sendTxtPackge = (rgbdata, type, str, lineIndex) => { var promise = new Promise((resolve, reject) => { try { @@ -1136,6 +1139,16 @@ dataView.setUint8(bufferSize - 1, 0xFF); // 2. 将完整数据包切片成20字节的小块进行发送 + // 打印完整数据包，便于首次与再次发送对比 + try { + const fullBytes = new Uint8Array(fullBuffer); + const hexString = Array.from(fullBytes).map(b => b.toString(16).padStart(2, '0')).join(' '); + console.log('[7305][SEQ ' + currentSeq + '][Line ' + lineIndex + '] 完整BLE数据包 len=261 type=' + type + ' text="' + (str || '') + '"'); + console.log('[7305][SEQ ' + currentSeq + '][Line ' + lineIndex + '] HEX:\n' + hexString); + } catch (e) { + console.warn('[7305][SEQ ' + currentSeq + '] 打印完整BLE数据包失败:', e); + } + const chunkSize = 20; const numChunks = Math.ceil(fullBuffer.byteLength / chunkSize); let chunkIndex = 0; @@ -1150,25 +1163,26 @@ const end = Math.min(start + chunkSize, fullBuffer.byteLength); const chunk = fullBuffer.slice(start, end); - const hexArray = Array.from(new Uint8Array(chunk)).map(b => b - .toString(16).padStart(2, '0')); - console.log(`发送数据块 ${chunkIndex + 1}/${numChunks}:`, hexArray - .join(' ')); + const hexArray = Array.from(new Uint8Array(chunk)).map(b => b.toString(16).padStart(2, '0')); + console.log(`[7305][SEQ ${currentSeq}][Line ${lineIndex}] 发送块 ${chunkIndex + 1}/${numChunks}: ${hexArray.join(' ')}`); ble.sendData(f.deviceId, chunk, f.writeServiceId, f .wirteCharactId, 100).then(() => { chunkIndex++; - setTimeout(sendNextChunk, 30); // 每个小包之间延时30ms + // 前3个小包放慢节奏，给设备解析时间 + const gap = chunkIndex <= 3 ? 60 : 30; + setTimeout(sendNextChunk, gap); }).catch(err => { if (err.code == '10007') { - setTimeout(sendNextChunk, 30); + setTimeout(sendNextChunk, 50); } else { reject(err); } }); } - sendNextChunk(); + // 初次发送前增加更长延迟，避免第一次发送异常 + setTimeout(sendNextChunk, 100); } catch (ex) { console.log("ex=", ex); @@ -1211,7 +1225,9 @@ try { // console.log("1111"); - await sendTxtPackge(rgb, h3dic[i], str); + await sendTxtPackge(rgb, h3dic[i], str, i); + // 每行之间插入小延迟，避免行首解析异常 + await new Promise(r => setTimeout(r, 120)); // console.log("222222"); } catch (ex) { flag = false;