关键代码:
封装了一个画文字的方法如下,所有文字都是通过这个方法画出来的,我在这里打了两个 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;
ctx.setFontSize(fontSize) ctx.setFillStyle(color)
console.log( "text config:" , `fontSize:${fontSize}`, `color: ${color}`, `textAlign:${textAlign}`)
draw ? ctx.fillText(text, x + rowSpace + textIndent, y + rowSpace + offsetY) : doNoThing; }; |
表现如下:
表现正常时截图:
表现正常时配置截图:
重复绘制整个画布若干次(也有可能一进来第一次就错乱),会偶然性出现错乱:
可以看到,错乱的那一句的样式和 “--by lcl 的评论” 这一行是一样的,但是看配置的话,却不应该是这样的,出现错乱时配置截图:
经过测试:
这个问题只在安卓下出现(测过魅蓝、小米均出现),在 苹果下不会出现(测过 iPhone S, iphone x)
不是每次必现,频繁重新绘制和文字多的时候出现概率比较大(由于问题比较诡异,还没找到具体的规律)
尝试过用 wx:if 在绘制结束后销毁画布,问题还是会重现
因为这个问题目前只发现在安卓下出现,比较倾向认为这是微信小程序框架实现上的差异问题,不知道有没有人曾遇到过同样问题,还请指导一二?
保存图片的时候,延时300ms就没有问题。
是有用,谢谢
出现过这个问题,在draw的回调函数里面延迟个300毫秒能保证大部分都正常显示,如果还会有问题再加一点时间
我给到了1000可还是有一定概率出现样式错乱问题,大佬还有其他解决方案么?
延长生成时间....垃圾手机不能做到100ms渲染 改成500之后比较好
去掉
ctx.setTextAlign(textAlign) 就正常了,这api有问题
最近发现每次绘制前更新一下 context 好像也可以解决绘制错乱问题:
// 我的绘制方法
draw() {
// 每次创建新的ctx
const ctx = wx.createCanvasContext(id, component)
// ...
}
我有遇到这样的问题,我这边出现这种问题的时候一般是绘制长串的英文或者数字,这个时候多试几次就会变得错乱,除了绘制的位置错乱,字体颜色也可能会错乱,会拿上面设置过的颜色绘制,而不是重新定义过的颜色
我这边也是的,感觉是 canvas 的 context 错乱了
我 也出现这个问题,有时候字体不一样,有时候颜色不一样,每次刷新出来 的都不一样,正常的时候很少
麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)
亲 我想问一下 UpdateMannager.onCheckForUpdate 是实时监听小程序的更新吗, 比如我在玩小程序 这个时候小程序更新了,能检测到吗
帖子那已经看到有答复了额
嗯嗯 本来想问小姐姐你的
问题有人回复了 但是这个问题没办法测试
点我头像看我发表的帖子