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

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; justify-content: space-between;
align-items: center; align-items: center;
font-size: 28rpx; font-size: 28rpx;
color: #FFFFFF; color: #FFFFFFde;
} }
</style> </style>

View File

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

View File

@ -60,7 +60,7 @@
* 清除Canvas内容 * 清除Canvas内容
*/ */
clearCanvas() { clearCanvas() {
this.ctx.setFillStyle(this.bgColor); this.ctx.setFillStyle('#FFFFFF'); //this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight); this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
}, },
@ -81,7 +81,7 @@
this.clearCanvas(); this.clearCanvas();
// 绘制一个测试字符来预热字体和画布 // 绘制一个测试字符来预热字体和画布
this.ctx.setFillStyle(this.color); this.ctx.setFillStyle('#000000'); //this.color
this.ctx.setFontSize(this.fontSize); this.ctx.setFontSize(this.fontSize);
this.ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`; this.ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
this.ctx.setTextBaseline('middle'); this.ctx.setTextBaseline('middle');
@ -125,39 +125,38 @@
async drawAndGetPixels() { async drawAndGetPixels() {
// 第一次调用时先预热画布解决APP重新打开后第一次获取数据不完整的问题 // 第一次调用时先预热画布解决APP重新打开后第一次获取数据不完整的问题
// await this.warmupCanvas(); // await this.warmupCanvas();
let convertCharToMatrix = function(imageData) {
let convertCharToMatrix=function(imageData) {
debugger;
// console.log("imgData=",imageData) // console.log("imgData=",imageData)
let matrix = []; let matrix = [];
// 逐行处理 // 逐行处理
for (let y = 0; y < 16; y++) { for (let y = 0; y < 16; y++) {
let byte1 = 0, let byte1 = '',
byte2 = 0; byte2 = '';
// 每行16个像素分为两个字节
for (let x = 0; x < 16; x++) { for (let x = 0; x < 16; x++) {
// 计算像素在imageData中的索引 (RGBA格式)
let index = (y * 16 + x) * 4;
let red = imageData[index];
// 黑色像素R值较低视为1白色视为0 let index = (y * 16 + x) * 4;
let isBlack = red < 128; 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) { if (x < 8) {
// 第一个字节左8位 byte1+=bit;
if (isBlack) {
byte1 |= 0x80 >> x; // 从左到右设置位
}
} else { } else {
// 第二个字节右8位 byte2+=bit;
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' + byte1.toString(16).padStart(2, '0').toUpperCase());
matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase()); matrix.push('0x' + byte2.toString(16).padStart(2, '0').toUpperCase());
@ -166,7 +165,8 @@
return matrix; return matrix;
} }
let drawTxt=async (textLine)=> {
let drawTxt = async (textLine) => {
debugger; debugger;
let result = {}; let result = {};
let ctx = this.ctx; let ctx = this.ctx;
@ -179,11 +179,11 @@
this.clearCanvas(); this.clearCanvas();
// 3. 设置文字样式 // 3. 设置文字样式
ctx.setFillStyle(this.color); ctx.setFillStyle('#000000'); //this.color
ctx.setTextBaseline('middle'); ctx.setTextBaseline('middle');
// ctx.setTextAlign('center') // ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize); 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. 绘制当前行文本 // 4. 绘制当前行文本
let currentX = 0; let currentX = 0;
@ -207,7 +207,7 @@
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,
@ -228,7 +228,7 @@
let arr = []; let arr = [];
// 循环处理每行文本 // 循环处理每行文本
for (let i = 0; i < this.validTxts.length; i++) { for (let i = 0; i < this.validTxts.length; i++) {
debugger; debugger;
let linePixls = []; let linePixls = [];
let item = this.validTxts[i]; let item = this.validTxts[i];

View File

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

View File

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

View File

@ -65,7 +65,7 @@
* 清除Canvas内容 * 清除Canvas内容
*/ */
clearCanvas() { clearCanvas() {
this.ctx.setFillStyle(this.bgColor); this.ctx.setFillStyle('#FFFFFF');//this.bgColor
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight); this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
}, },
@ -82,9 +82,9 @@
this.currentCanvasWidth = 16; this.currentCanvasWidth = 16;
this.currentCanvasHeight = 16; this.currentCanvasHeight = 16;
this.clearCanvas(); this.clearCanvas();
this.ctx.setFillStyle(this.color); this.ctx.setFillStyle('#000000');//this.color
this.ctx.setFontSize(this.fontSize); 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.setTextBaseline('middle');
this.ctx.fillText('测', 0, 8); this.ctx.fillText('测', 0, 8);
@ -158,12 +158,20 @@
// pixels.push(R < 128 ? 1 : 0); // pixels.push(R < 128 ? 1 : 0);
const R = imageData[i]; // const R = imageData[i];
const G = imageData[i + 1]; // const G = imageData[i + 1];
const B = imageData[i + 2]; // const B = imageData[i + 2];
const gray = 0.299 * R + 0.587 * G + 0.114 * B; // 灰度转换 // const gray = 0.299 * R + 0.587 * G + 0.114 * B; // 灰度转换
pixels.push(gray < 128 ? 1 : 0); // 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); const lowBytes = new Array(charWidth).fill(0);
@ -197,11 +205,11 @@
this.clearCanvas(); this.clearCanvas();
// 3. 设置文字样式 // 3. 设置文字样式
ctx.setFillStyle(this.color); ctx.setFillStyle('#000000');//this.color
ctx.setTextBaseline('middle'); ctx.setTextBaseline('middle');
// ctx.setTextAlign('center') // ctx.setTextAlign('center')
ctx.setFontSize(this.fontSize); 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. 绘制当前行文本 // 4. 绘制当前行文本
debugger; debugger;

View File

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

View File

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

View File

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