修复6155人员信息第一个字体缺失问题,画布取值加载预热机制
This commit is contained in:
@ -34,7 +34,9 @@
|
||||
currentCanvasWidth: 0,
|
||||
currentCanvasHeight: 0,
|
||||
// Canvas上下文(复用)
|
||||
ctx: null
|
||||
ctx: null,
|
||||
// 标记是否已经预热过画布
|
||||
canvasWarmed: false
|
||||
};
|
||||
},
|
||||
computed: {
|
||||
@ -62,10 +64,67 @@
|
||||
this.ctx.fillRect(0, 0, this.currentCanvasWidth, this.currentCanvasHeight);
|
||||
},
|
||||
|
||||
/**
|
||||
* 预热画布,确保画布和字体完全准备好(解决APP重新打开后第一次获取数据不完整的问题)
|
||||
*/
|
||||
async warmupCanvas() {
|
||||
if (this.canvasWarmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
// 设置画布尺寸
|
||||
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 API已准备好
|
||||
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() {
|
||||
// 第一次调用时先预热画布(解决APP重新打开后第一次获取数据不完整的问题)
|
||||
await this.warmupCanvas();
|
||||
|
||||
let convertCharToMatrix=function(imageData) {
|
||||
// console.log("imgData=",imageData)
|
||||
@ -119,7 +178,7 @@
|
||||
|
||||
// 3. 设置文字样式
|
||||
ctx.setFillStyle(this.color);
|
||||
ctx.setTextBaseline('middle');
|
||||
ctx.setTextBaseline('middle');
|
||||
// ctx.setTextAlign('center')
|
||||
ctx.setFontSize(this.fontSize);
|
||||
ctx.font = `${this.fontSize}px "PingFangBold", "PingFang SC", Arial, sans-serif`;
|
||||
|
||||
Reference in New Issue
Block a user