Merge branch 'main' of http://47.107.152.87:3000/dyf/APP
This commit is contained in:
@ -59,6 +59,8 @@
|
|||||||
* 清除Canvas内容
|
* 清除Canvas内容
|
||||||
*/
|
*/
|
||||||
clearCanvas() {
|
clearCanvas() {
|
||||||
|
// 先清除,再用背景色填充,确保无残留
|
||||||
|
this.ctx.clearRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||||||
this.ctx.setFillStyle(this.bgColor);
|
this.ctx.setFillStyle(this.bgColor);
|
||||||
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||||||
},
|
},
|
||||||
@ -67,6 +69,9 @@
|
|||||||
* 复用单个Canvas处理所有文本行
|
* 复用单个Canvas处理所有文本行
|
||||||
*/
|
*/
|
||||||
async drawAndGetPixels() {
|
async drawAndGetPixels() {
|
||||||
|
// 超采样比例(提高分辨率再降采样,减少模糊)
|
||||||
|
const SCALE = 3;
|
||||||
|
const PADDING_X = 1 * SCALE; // 左侧预留像素,避免首字裁剪
|
||||||
let binaryToHex = (binaryArray) => {
|
let binaryToHex = (binaryArray) => {
|
||||||
if (!Array.isArray(binaryArray) || binaryArray.length !== 8) {
|
if (!Array.isArray(binaryArray) || binaryArray.length !== 8) {
|
||||||
throw new Error("输入必须是包含8个元素的二进制数组");
|
throw new Error("输入必须是包含8个元素的二进制数组");
|
||||||
@ -90,25 +95,61 @@
|
|||||||
return hexString;
|
return hexString;
|
||||||
}
|
}
|
||||||
|
|
||||||
let convertCharToMatrix = (imageData, item) => {
|
let convertCharToMatrix = (drawResult, item) => {
|
||||||
const charWidth = 13;
|
const charWidth = 13;
|
||||||
const charHeight = 12;
|
const charHeight = 12;
|
||||||
const pixels = [];
|
const { pixelData, width, height } = drawResult;
|
||||||
for (let i = 0; i < imageData.length; i += 4) {
|
// 将高分辨率像素降采样为13x12的布尔矩阵
|
||||||
const R = imageData[i];
|
const target = new Array(charWidth * charHeight).fill(0);
|
||||||
pixels.push(R < 128 ? 1 : 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 lowBytes = new Array(charWidth).fill(0);
|
||||||
const highBytes = new Array(charWidth).fill(0);
|
const highBytes = new Array(charWidth).fill(0);
|
||||||
|
// 按列打包,每列12行分成上下两字节
|
||||||
for (let col = 0; col < charWidth; col++) {
|
for (let col = 0; col < charWidth; col++) {
|
||||||
for (let row = 0; row < charHeight; row++) {
|
for (let row = 0; row < charHeight; row++) {
|
||||||
const pixel = pixels[row * charWidth + col];
|
const pixel = target[row * charWidth + col];
|
||||||
if (pixel === 1) {
|
if (pixel === 1) {
|
||||||
if (row < 8) {
|
if (row < 8) {
|
||||||
|
// 低字节:0-7行,从低位到高位
|
||||||
lowBytes[col] |= (1 << row);
|
lowBytes[col] |= (1 << row);
|
||||||
} else {
|
} else {
|
||||||
|
// 高字节:8-11行,从低位到高位
|
||||||
highBytes[col] |= (1 << (row - 8));
|
highBytes[col] |= (1 << (row - 8));
|
||||||
}
|
}
|
||||||
}
|
}
|
||||||
@ -121,30 +162,26 @@
|
|||||||
let result = {};
|
let result = {};
|
||||||
let ctx = this.ctx;
|
let ctx = this.ctx;
|
||||||
|
|
||||||
// 1. 动态调整Canvas尺寸
|
// 1. 动态调整Canvas尺寸(高分辨率)
|
||||||
this.currentCanvasWidth = 13;
|
this.currentCanvasWidth = 13 * SCALE + PADDING_X;
|
||||||
this.currentCanvasHeight = 12;
|
this.currentCanvasHeight = 12 * SCALE;
|
||||||
|
|
||||||
// 2. 清空Canvas(绘制背景)
|
// 2. 清空Canvas(绘制背景)
|
||||||
this.clearCanvas();
|
this.clearCanvas();
|
||||||
|
|
||||||
// 3. 设置文字样式
|
// 3. 设置文字样式(整数像素对齐,顶部基线,避免首字裁剪)
|
||||||
ctx.setFillStyle(this.color);
|
ctx.setFillStyle(this.color);
|
||||||
ctx.setTextBaseline('middle');
|
ctx.setTextBaseline('top');
|
||||||
// ctx.setTextAlign('center')
|
ctx.setTextAlign('left');
|
||||||
ctx.setFontSize(this.fontSize);
|
const fs = Math.max(1, Math.round(this.fontSize)) * SCALE;
|
||||||
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
|
ctx.setFontSize(fs);
|
||||||
|
ctx.font = `${fs}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
|
||||||
|
|
||||||
// 4. 绘制当前行文本
|
// 4. 绘制单个字符(每个字符独立绘制在固定位置)
|
||||||
let currentX = 0;
|
// 确保字符始终从PADDING_X开始绘制,Y坐标为0,保证采样一致性
|
||||||
let currentY = this.fontSize / 2 + 1;
|
const charX = PADDING_X;
|
||||||
for (let j = 0; j < textLine.length; j++) {
|
const charY = 0;
|
||||||
let char = textLine[j];
|
ctx.fillText(textLine, charX, charY);
|
||||||
ctx.fillText(char, currentX, currentY);
|
|
||||||
// 按实际字符宽度计算间距
|
|
||||||
let charWidth = ctx.measureText(char).width;
|
|
||||||
currentX += charWidth;
|
|
||||||
}
|
|
||||||
|
|
||||||
// 5. 异步绘制并获取像素数据(串行处理避免冲突)
|
// 5. 异步绘制并获取像素数据(串行处理避免冲突)
|
||||||
await new Promise((resolve, reject) => {
|
await new Promise((resolve, reject) => {
|
||||||
@ -156,12 +193,12 @@
|
|||||||
width: this.currentCanvasWidth,
|
width: this.currentCanvasWidth,
|
||||||
height: this.currentCanvasHeight,
|
height: this.currentCanvasHeight,
|
||||||
success: res => {
|
success: res => {
|
||||||
result = {
|
result = {
|
||||||
line: textLine,
|
line: textLine,
|
||||||
pixelData: res.data,
|
pixelData: res.data,
|
||||||
width: this.currentCanvasWidth,
|
width: this.currentCanvasWidth,
|
||||||
height: this.currentCanvasHeight
|
height: this.currentCanvasHeight
|
||||||
};
|
};
|
||||||
resolve();
|
resolve();
|
||||||
},
|
},
|
||||||
fail: err => {
|
fail: err => {
|
||||||
@ -182,8 +219,12 @@
|
|||||||
let item = this.validTxts[i];
|
let item = this.validTxts[i];
|
||||||
// console.log("item=", item);
|
// console.log("item=", item);
|
||||||
for (var j = 0; j < item.length; j++) {
|
for (var j = 0; j < item.length; j++) {
|
||||||
let result = await drawTxt(item[j]);
|
let char = item[j];
|
||||||
linePixls.push(convertCharToMatrix(result.pixelData, item));
|
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(","));
|
// console.log("hexs=", linePixls.join(","));
|
||||||
arr.push(linePixls);
|
arr.push(linePixls);
|
||||||
|
|||||||
@ -262,7 +262,8 @@
|
|||||||
alarmStatus: null,
|
alarmStatus: null,
|
||||||
detailPageUrl: "/pages/6155/deviceDetail",
|
detailPageUrl: "/pages/6155/deviceDetail",
|
||||||
showConfirm: false
|
showConfirm: false
|
||||||
}
|
},
|
||||||
|
sendSeq: 0
|
||||||
|
|
||||||
}
|
}
|
||||||
},
|
},
|
||||||
@ -1083,6 +1084,8 @@
|
|||||||
this.Status.Pop.showPop = true;
|
this.Status.Pop.showPop = true;
|
||||||
},
|
},
|
||||||
sendUsr() {
|
sendUsr() {
|
||||||
|
this.sendSeq++;
|
||||||
|
const currentSeq = this.sendSeq;
|
||||||
let f = this.getDevice();
|
let f = this.getDevice();
|
||||||
if (!f) {
|
if (!f) {
|
||||||
these.showBleUnConnect()
|
these.showBleUnConnect()
|
||||||
@ -1111,7 +1114,7 @@
|
|||||||
});
|
});
|
||||||
this.setBleFormData();
|
this.setBleFormData();
|
||||||
let task = async () => {
|
let task = async () => {
|
||||||
var sendTxtPackge = (rgbdata, type, str) => {
|
var sendTxtPackge = (rgbdata, type, str, lineIndex) => {
|
||||||
|
|
||||||
var promise = new Promise((resolve, reject) => {
|
var promise = new Promise((resolve, reject) => {
|
||||||
try {
|
try {
|
||||||
@ -1136,6 +1139,16 @@
|
|||||||
dataView.setUint8(bufferSize - 1, 0xFF);
|
dataView.setUint8(bufferSize - 1, 0xFF);
|
||||||
|
|
||||||
// 2. 将完整数据包切片成20字节的小块进行发送
|
// 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 chunkSize = 20;
|
||||||
const numChunks = Math.ceil(fullBuffer.byteLength / chunkSize);
|
const numChunks = Math.ceil(fullBuffer.byteLength / chunkSize);
|
||||||
let chunkIndex = 0;
|
let chunkIndex = 0;
|
||||||
@ -1150,25 +1163,26 @@
|
|||||||
const end = Math.min(start + chunkSize, fullBuffer.byteLength);
|
const end = Math.min(start + chunkSize, fullBuffer.byteLength);
|
||||||
const chunk = fullBuffer.slice(start, end);
|
const chunk = fullBuffer.slice(start, end);
|
||||||
|
|
||||||
const hexArray = Array.from(new Uint8Array(chunk)).map(b => b
|
const hexArray = Array.from(new Uint8Array(chunk)).map(b => b.toString(16).padStart(2, '0'));
|
||||||
.toString(16).padStart(2, '0'));
|
console.log(`[7305][SEQ ${currentSeq}][Line ${lineIndex}] 发送块 ${chunkIndex + 1}/${numChunks}: ${hexArray.join(' ')}`);
|
||||||
console.log(`发送数据块 ${chunkIndex + 1}/${numChunks}:`, hexArray
|
|
||||||
.join(' '));
|
|
||||||
|
|
||||||
ble.sendData(f.deviceId, chunk, f.writeServiceId, f
|
ble.sendData(f.deviceId, chunk, f.writeServiceId, f
|
||||||
.wirteCharactId, 100).then(() => {
|
.wirteCharactId, 100).then(() => {
|
||||||
chunkIndex++;
|
chunkIndex++;
|
||||||
setTimeout(sendNextChunk, 30); // 每个小包之间延时30ms
|
// 前3个小包放慢节奏,给设备解析时间
|
||||||
|
const gap = chunkIndex <= 3 ? 60 : 30;
|
||||||
|
setTimeout(sendNextChunk, gap);
|
||||||
}).catch(err => {
|
}).catch(err => {
|
||||||
if (err.code == '10007') {
|
if (err.code == '10007') {
|
||||||
setTimeout(sendNextChunk, 30);
|
setTimeout(sendNextChunk, 50);
|
||||||
} else {
|
} else {
|
||||||
reject(err);
|
reject(err);
|
||||||
}
|
}
|
||||||
});
|
});
|
||||||
}
|
}
|
||||||
|
|
||||||
sendNextChunk();
|
// 初次发送前增加更长延迟,避免第一次发送异常
|
||||||
|
setTimeout(sendNextChunk, 100);
|
||||||
|
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
console.log("ex=", ex);
|
console.log("ex=", ex);
|
||||||
@ -1211,7 +1225,9 @@
|
|||||||
|
|
||||||
try {
|
try {
|
||||||
// console.log("1111");
|
// 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");
|
// console.log("222222");
|
||||||
} catch (ex) {
|
} catch (ex) {
|
||||||
flag = false;
|
flag = false;
|
||||||
|
|||||||
Reference in New Issue
Block a user