262 lines
6.7 KiB
Vue
262 lines
6.7 KiB
Vue
<template>
|
||
<view>
|
||
<canvas type="2d" canvas-id="reusableCanvas" :width="currentCanvasWidth" :height="currentCanvasHeight"
|
||
class="offscreen-canvas"></canvas>
|
||
</view>
|
||
</template>
|
||
|
||
<script>
|
||
export default {
|
||
name: "textToDotMatrixFor7305",
|
||
props: {
|
||
txts: {
|
||
type: Array,
|
||
default: () => [],
|
||
validator: (value) => value.every(item => typeof item === 'string')
|
||
},
|
||
|
||
fontSize: {
|
||
type: Number,
|
||
default: 16,
|
||
validator: (value) => value > 0 && value <= 100
|
||
},
|
||
bgColor: {
|
||
type: String,
|
||
default: "#ffffff"
|
||
},
|
||
color: {
|
||
type: String,
|
||
default: "#000000"
|
||
}
|
||
},
|
||
data() {
|
||
return {
|
||
// 当前Canvas的宽高（动态调整）
|
||
currentCanvasWidth: 0,
|
||
currentCanvasHeight: 0,
|
||
// Canvas上下文（复用）
|
||
ctx: null,
|
||
// 标记画布是否已预热（解决首次发送像素不完整问题）
|
||
canvasWarmed: false
|
||
};
|
||
},
|
||
computed: {
|
||
validTxts() {
|
||
return this.txts.filter(line => line.trim() !== '');
|
||
}
|
||
},
|
||
mounted() {
|
||
// 初始化Canvas上下文（只创建一次）
|
||
this.ctx = uni.createCanvasContext('reusableCanvas', this);
|
||
},
|
||
methods: {
|
||
/**
|
||
* 估算单行文本所需的Canvas宽度
|
||
*/
|
||
calcLineWidth(textLine) {
|
||
return textLine.length * this.fontSize;
|
||
},
|
||
|
||
/**
|
||
* 清除Canvas内容
|
||
*/
|
||
clearCanvas() {
|
||
this.ctx.setFillStyle(this.bgColor);
|
||
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||
},
|
||
|
||
/**
|
||
* 预热画布，防止 APP 首次调用时获取到的像素数据不完整
|
||
*/
|
||
async warmupCanvas() {
|
||
if (this.canvasWarmed) {
|
||
return;
|
||
}
|
||
|
||
try {
|
||
// 先用一个最小画布绘制测试字形，触发字体和 canvas 初始化
|
||
this.currentCanvasWidth = 16;
|
||
this.currentCanvasHeight = 16;
|
||
this.clearCanvas();
|
||
this.ctx.setFillStyle(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, () => {
|
||
// 读取一次数据，确保 canvasGetImageData 就绪
|
||
setTimeout(() => {
|
||
uni.canvasGetImageData({
|
||
canvasId: 'reusableCanvas',
|
||
x: 0,
|
||
y: 0,
|
||
width: 16,
|
||
height: 16,
|
||
success: () => {
|
||
this.canvasWarmed = true;
|
||
resolve();
|
||
},
|
||
fail: () => {
|
||
// 即便失败也认为已尝试过，避免反复预热阻塞流程
|
||
this.canvasWarmed = true;
|
||
resolve();
|
||
}
|
||
});
|
||
}, 100);
|
||
});
|
||
});
|
||
// 额外等待，确保字体完全加载
|
||
await new Promise(resolve => setTimeout(resolve, 200));
|
||
} catch (ex) {
|
||
console.log("画布预热异常:", ex);
|
||
this.canvasWarmed = true;
|
||
}
|
||
},
|
||
|
||
/**
|
||
* 复用单个Canvas处理所有文本行
|
||
*/
|
||
async drawAndGetPixels() {
|
||
// 首次调用先做预热，避免第一次上报缺字
|
||
await this.warmupCanvas();
|
||
|
||
let binaryToHex = (binaryArray) => {
|
||
if (!Array.isArray(binaryArray) || binaryArray.length !== 8) {
|
||
throw new Error("输入必须是包含8个元素的二进制数组");
|
||
}
|
||
|
||
// 检查每个元素是否为0或1
|
||
if (!binaryArray.every(bit => bit === 0 || bit === 1)) {
|
||
throw new Error("数组元素必须只能是0或1");
|
||
}
|
||
|
||
// 将二进制数组转换为十进制数
|
||
let decimalValue = 0;
|
||
for (let i = 0; i < 8; i++) {
|
||
// 计算每个位的权重并累加
|
||
decimalValue += binaryArray[i] * Math.pow(2, 7 - i);
|
||
}
|
||
|
||
// 将十进制转换为十六进制字符串，并添加0x前缀
|
||
const hexString = "0x" + decimalValue.toString(16).padStart(2, '0').toUpperCase();
|
||
|
||
return hexString;
|
||
}
|
||
|
||
let convertCharToMatrix = (imageData, item) => {
|
||
const charWidth = 13;
|
||
const charHeight = 13;
|
||
const pixels = [];
|
||
for (let i = 0; i < imageData.length; i += 4) {
|
||
const R = imageData[i];
|
||
pixels.push(R < 128 ? 1 : 0);
|
||
}
|
||
|
||
const lowBytes = new Array(charWidth).fill(0);
|
||
const highBytes = new Array(charWidth).fill(0);
|
||
|
||
for (let col = 0; col < charWidth; col++) {
|
||
for (let row = 0; row < charHeight; row++) {
|
||
const pixel = pixels[row * charWidth + col];
|
||
if (pixel === 1) {
|
||
if (row < 8) {
|
||
lowBytes[col] |= (1 << row);
|
||
} else {
|
||
highBytes[col] |= (1 << (row - 8));
|
||
}
|
||
}
|
||
}
|
||
}
|
||
return [...lowBytes, ...highBytes];
|
||
}
|
||
|
||
let drawTxt = async (textLine) => {
|
||
let result = {};
|
||
let ctx = this.ctx;
|
||
|
||
// 1. 动态调整Canvas尺寸
|
||
this.currentCanvasWidth = 13;
|
||
this.currentCanvasHeight = 13;
|
||
|
||
// 2. 清空Canvas（绘制背景）
|
||
this.clearCanvas();
|
||
|
||
// 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`;
|
||
|
||
// 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. 异步绘制并获取像素数据（串行处理避免冲突）
|
||
await new Promise((resolve, reject) => {
|
||
ctx.draw(false, () => {
|
||
setTimeout(() => {
|
||
uni.canvasGetImageData({
|
||
canvasId: 'reusableCanvas',
|
||
x: 0,
|
||
y: 0,
|
||
width: this.currentCanvasWidth,
|
||
height: this.currentCanvasHeight,
|
||
success: res => {
|
||
result = {
|
||
line: textLine,
|
||
pixelData: res.data,
|
||
width: this.currentCanvasWidth,
|
||
height: this.currentCanvasHeight
|
||
};
|
||
resolve();
|
||
},
|
||
fail: err => {
|
||
// console.error(`处理第${i+1}行失败:`, err);
|
||
reject(err)
|
||
}
|
||
});
|
||
}, 100);
|
||
});
|
||
});
|
||
|
||
return result;
|
||
}
|
||
let arr = [];
|
||
// 循环处理每行文本
|
||
for (let i = 0; i < this.validTxts.length; i++) {
|
||
|
||
let linePixls = [];
|
||
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));
|
||
}
|
||
// console.log("hexs=", linePixls.join(","));
|
||
arr.push(linePixls);
|
||
}
|
||
|
||
return arr;
|
||
}
|
||
}
|
||
};
|
||
</script>
|
||
|
||
<style>
|
||
.offscreen-canvas {
|
||
position: fixed;
|
||
left: -9999px;
|
||
top: -9999px;
|
||
visibility: hidden;
|
||
}
|
||
</style> |