[代码] 去掉[代码][代码]ctx.setTextAlign(textAlign) 就正常了,这api有问题[代码] [代码][代码]
安卓下 canvas 绘制文字偶发性错乱,非常诡异关键代码: 封装了一个画文字的方法如下,所有文字都是通过这个方法画出来的,我在这里打了两个 log 来记录画文字的配置: [代码]// 画文字[代码][代码] [代码][代码]const _drawText = [代码][代码]function[代码][代码](text = [代码][代码]""[代码][代码], x = 0, y = 0, draw = [代码][代码]true[代码][代码], textIndent = 0) {[代码][代码] [代码][代码]const doNoThing = undefined;[代码][代码] [代码][代码]const {lineHeight, fontSize, color, bold, textAlign} = config.text;[代码][代码] [代码][代码]const rowSpace = (lineHeight - fontSize) / 2;[代码][代码] [代码][代码]const offsetY = -3; [代码][代码]/** 修复文字上方的默认空隙 */[代码] [代码] [代码] [代码] [代码][代码]ctx.setFontSize(fontSize)[代码][代码] [代码][代码]ctx.setFillStyle(color)[代码][代码] [代码][代码]ctx.setTextAlign(textAlign)[代码] [代码] [代码] [代码] [代码][代码]console.log([代码][代码]"text config:"[代码][代码], `fontSize:${fontSize}`, `color: ${color}`, `textAlign:${textAlign}`)[代码][代码] [代码][代码]console.log([代码][代码]"text:"[代码][代码], text, x + rowSpace + textIndent, y + rowSpace + offsetY)[代码] [代码] [代码] [代码] [代码][代码]draw ? ctx.fillText(text, x + rowSpace + textIndent, y + rowSpace + offsetY) : doNoThing;[代码][代码] [代码][代码]};[代码] 表现如下: 表现正常时截图: [图片] 表现正常时配置截图: [图片] 重复绘制整个画布若干次(也有可能一进来第一次就错乱),会偶然性出现错乱: [图片] 可以看到,错乱的那一句的样式和 “--by lcl 的评论” 这一行是一样的,但是看配置的话,却不应该是这样的,出现错乱时配置截图: [图片] 经过测试: 这个问题只在安卓下出现(测过魅蓝、小米均出现),在 苹果下不会出现(测过 iPhone S, iphone x) 不是每次必现,频繁重新绘制和文字多的时候出现概率比较大(由于问题比较诡异,还没找到具体的规律) 尝试过用 wx:if 在绘制结束后销毁画布,问题还是会重现 因为这个问题目前只发现在安卓下出现,比较倾向认为这是微信小程序框架实现上的差异问题,不知道有没有人曾遇到过同样问题,还请指导一二?
2021-12-13