1
0
forked from dyf/APP

优化取模组件,取模效果更好

This commit is contained in:
liub
2026-04-03 17:24:55 +08:00
parent 1264ec70a2
commit 1e51023c00
9 changed files with 132 additions and 89 deletions

View File

@ -107,6 +107,6 @@
justify-content: space-between;
align-items: center;
font-size: 28rpx;
color: #FFFFFF;
color: #FFFFFFde;
}
</style>

View File

@ -58,7 +58,7 @@
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.setFillStyle('#FFFFFF');//this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
@ -73,31 +73,49 @@
// 逐行处理
for (let y = 0; y < 16; y++) {
let byte1 = 0,
byte2 = 0;
let byte1 = '',
byte2 = '';
// 每行16个像素分为两个字节
for (let x = 0; x < 16; x++) {
// 计算像素在imageData中的索引 (RGBA格式)
let index = (y * 16 + x) * 4;
let red = imageData[index];
// 黑色像素R值较低视为1白色视为0
let isBlack = red < 128;
if (x < 8) {
// 第一个字节左8位
if (isBlack) {
byte1 |= 0x80 >> x; // 从左到右设置位
}
} else {
// 第二个字节右8位
if (isBlack) {
byte2 |= 0x80 >> (x - 8);
}
let index = (y * 16 + x) * 4;
let r = imageData[index];
let g = imageData[index+1];
let b = imageData[index+2];
let gray = (r + g + b) / 3;
let bit = gray < 255 ? '1' : '0';
if (x < 8) {
byte1+=bit;
} else {
byte2+=bit;
}
}
// let red = imageData[index];
// // 黑色像素R值较低视为1白色视为0
// let isBlack = red < 128;
// if (x < 8) {
// // 第一个字节左8位
// if (isBlack) {
// byte1 |= 0x80 >> x; // 从左到右设置位
// }
// } else {
// // 第二个字节右8位
// if (isBlack) {
// byte2 |= 0x80 >> (x - 8);
// }
// }
}
byte1=parseInt(byte1,2);
byte2=parseInt(byte2,2);
// 将字节转换为两位十六进制字符串
matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
@ -118,7 +136,7 @@
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setFillStyle('#000000');//this.color
ctx.setTextBaseline('middle');
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFang SC", PingFang SC, Arial, sans-serif`;

View File

@ -60,7 +60,7 @@
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.setFillStyle('#FFFFFF'); //this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
@ -71,22 +71,22 @@
if (this.canvasWarmed) {
return;
}
try {
// 设置画布尺寸
this.currentCanvasWidth = 16;
this.currentCanvasHeight = 16;
// 清空画布
this.clearCanvas();
// 绘制一个测试字符来预热字体和画布
this.ctx.setFillStyle(this.color);
this.ctx.setFillStyle('#000000'); //this.color
this.ctx.setFontSize(this.fontSize);
this.ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
this.ctx.setTextBaseline('middle');
this.ctx.fillText('测', 0, 8);
// 等待画布绘制完成
await new Promise((resolve) => {
this.ctx.draw(false, () => {
@ -110,7 +110,7 @@
}, 100);
});
});
// 额外等待确保字体完全加载
await new Promise(resolve => setTimeout(resolve, 200));
} catch (ex) {
@ -118,55 +118,55 @@
this.canvasWarmed = true; // 即使失败也标记为已预热,避免重复尝试
}
},
/**
* 复用单个Canvas处理所有文本行
*/
async drawAndGetPixels() {
// 第一次调用时先预热画布解决APP重新打开后第一次获取数据不完整的问题
// await this.warmupCanvas();
let convertCharToMatrix=function(imageData) {
debugger;
let convertCharToMatrix = function(imageData) {
// console.log("imgData=",imageData)
let matrix = [];
// 逐行处理
for (let y = 0; y < 16; y++) {
let byte1 = 0,
byte2 = 0;
// 每行16个像素分为两个字节
let byte1 = '',
byte2 = '';
for (let x = 0; x < 16; x++) {
// 计算像素在imageData中的索引 (RGBA格式)
let index = (y * 16 + x) * 4;
let red = imageData[index];
// 黑色像素R值较低视为1白色视为0
let isBlack = red < 128;
if (x < 8) {
// 第一个字节左8位
if (isBlack) {
byte1 |= 0x80 >> x; // 从左到右设置位
}
} else {
// 第二个字节右8位
if (isBlack) {
byte2 |= 0x80 >> (x - 8);
}
let r = imageData[index];
let g = imageData[index+1];
let b = imageData[index+2];
let gray = (r + g + b) / 3;
let bit = gray < 255 ? '1' : '0';
if (x < 8) {
byte1+=bit;
} else {
byte2+=bit;
}
}
byte1=parseInt(byte1,2);
byte2=parseInt(byte2,2);
// 将字节转换为两位十六进制字符串
matrix.push('0x' + byte1.toString(16).padStart(2, '0').toUpperCase());
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
}
return matrix;
}
let drawTxt=async (textLine)=> {
let drawTxt = async (textLine) => {
debugger;
let result = {};
let ctx = this.ctx;
@ -179,12 +179,12 @@
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setFillStyle('#000000'); //this.color
ctx.setTextBaseline('middle');
// ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
ctx.font = `${this.fontSize}px "PingFang SC","PingFangBold", Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;
let currentY = this.fontSize / 2;
@ -206,8 +206,8 @@
width: this.currentCanvasWidth,
height: this.currentCanvasHeight,
success: res => {
result={
result = {
line: textLine,
pixelData: res.data,
width: this.currentCanvasWidth,
@ -228,10 +228,10 @@
let arr = [];
// 循环处理每行文本
for (let i = 0; i < this.validTxts.length; i++) {
debugger;
debugger;
let linePixls = [];
let item = this.validTxts[i];
for (var j = 0; j < item.length; j++) {
let result = await drawTxt(item[j]);
linePixls.push(convertCharToMatrix(result.pixelData));
@ -239,7 +239,7 @@ debugger;
// console.log("hexs=",linePixls.join(","));
arr.push(linePixls);
}
return arr;
}
}

View File

@ -70,7 +70,7 @@
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.setFillStyle('#FFFFFF');//this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
@ -87,7 +87,7 @@
this.clearCanvas();
// 绘制一个测试字符来预热字体和画布
this.ctx.setFillStyle(this.color);
this.ctx.setFillStyle('#000000');//this.color
this.ctx.setFontSize(this.fontSize);
this.ctx.font = `${this.fontSize}px "PingFangBold","PingFang SC", Arial, sans-serif`;
this.ctx.setTextBaseline('middle');
@ -212,7 +212,7 @@
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setFillStyle('#000000');//this.color
ctx.setTextBaseline('middle');
// ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize);

View File

@ -58,7 +58,7 @@
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.setFillStyle('#FFFFFF');//this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
@ -100,10 +100,19 @@
for (let x = 0; x < 16; x++) {
// 计算像素在imageData中的索引 (RGBA格式)
let index = (y * 16 + x) * 4;
let red = imageData[index];
// let red = imageData[index];
let r = imageData[index];
let g = imageData[index+1];
let b = imageData[index+2];
let gray = (r + g + b) / 3;
let bit = gray < 255 ? '1' : '0';
// 黑色像素R值较低视为1白色视为0
let isBlack = red < 128 ? 1 : 0;
let isBlack =gray < 255 ? 1 : 0;// red < 128 ? 1 : 0;
arr.push(isBlack);
}
@ -154,7 +163,7 @@
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setFillStyle('#000000');//this.color
ctx.setTextBaseline('middle');
// ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize);

View File

@ -65,7 +65,7 @@
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.setFillStyle('#FFFFFF');//this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
@ -82,9 +82,9 @@
this.currentCanvasWidth = 16;
this.currentCanvasHeight = 16;
this.clearCanvas();
this.ctx.setFillStyle(this.color);
this.ctx.setFillStyle('#000000');//this.color
this.ctx.setFontSize(this.fontSize);
this.ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
this.ctx.font = `${this.fontSize}px "PingFang SC","PingFangBold", Arial, sans-serif`;
this.ctx.setTextBaseline('middle');
this.ctx.fillText('测', 0, 8);
@ -158,12 +158,20 @@
// pixels.push(R < 128 ? 1 : 0);
const R = imageData[i];
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 R = imageData[i];
// 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);
let r = imageData[i];
let g = imageData[i+1];
let b = imageData[i+2];
let gray = (r + g + b) / 3;
let bit = gray < 255 ? 1 : 0;
pixels.push(bit);
}
const lowBytes = new Array(charWidth).fill(0);
@ -197,11 +205,11 @@
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setFillStyle('#000000');//this.color
ctx.setTextBaseline('middle');
// ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
ctx.font = `${this.fontSize}px "PingFang SC","PingFangBold", Arial, sans-serif`;
// 4. 绘制当前行文本
debugger;

View File

@ -59,7 +59,7 @@
* 清除Canvas内容
*/
clearCanvas() {
this.ctx.setFillStyle(this.bgColor);
this.ctx.setFillStyle('#FFFFFF');//this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
},
@ -105,10 +105,18 @@
let G = imageData[index+1];
let B = imageData[index]+2;
// let r = imageData[i];
// let g = imageData[i+1];
// let b = imageData[i+2];
let gray = (R + G + B) / 3;
let bit = gray < 255 ? 1 : 0;
// 黑色像素R值较低视为1白色视为0
let isBlack = R < 128 ? 1 : 0;
arr.push(isBlack);
// let isBlack = R < 128 ? 1 : 0;
arr.push(bit);
}
}
@ -159,11 +167,11 @@
this.clearCanvas();
// 3. 设置文字样式
ctx.setFillStyle(this.color);
ctx.setFillStyle('#000000');//this.color
ctx.setTextBaseline('middle');
// ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize);
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
ctx.font = `${this.fontSize}px PingFangBold", "PingFang SC", Arial, sans-serif`;
// 4. 绘制当前行文本
let currentX = 0;

View File

@ -39,7 +39,7 @@
</view>
</view>
<view class="warnnig" :class="formData.sta_ShakeBit!==0 ?'':'displayNone'">
<view class="warnnig" :class="formData.sta_ShakeBit!=0 ?'':'displayNone'">
<view>{{formData.sta_ShakeBit==3?'设备疑似受到外力碰撞':'设备声光报警中'}}</view>
<view @click.stop="SOSToggle()">
<uni-icons type="closeempty" color="#FFFFFFde" size="16"></uni-icons>
@ -1418,7 +1418,7 @@
console.error("出现错误", ex)
});
}
let msg = val == 1 ? '确定开启声光报警' : '确定关闭声光报警';
let msg = val == 1 ? '确定开启声光报警' : '确定解除声光报警';
showPop({
message: msg,

View File

@ -668,7 +668,7 @@ class BleHelper {
BleReceive() {
uni.onBLECharacteristicValueChange((receive) => {
//订阅消息
console.log("收到订阅消息", receive);
// console.log("收到订阅消息", receive);
let f = this.data.LinkedList.find((v) => {
return v.deviceId == receive.deviceId;
})