安卓下 canvas 绘制文字偶发性错乱,非常诡异
发布于 5 年前 作者 yan15 19852 次浏览 来自 问答

关键代码:

封装了一个画文字的方法如下,所有文字都是通过这个方法画出来的,我在这里打了两个 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 的评论” 这一行是一样的,但是看配置的话,却不应该是这样的,出现错乱时配置截图:

经过测试:

  1. 这个问题只在安卓下出现(测过魅蓝、小米均出现),在 苹果下不会出现(测过 iPhone S, iphone x)

  2. 不是每次必现,频繁重新绘制和文字多的时候出现概率比较大(由于问题比较诡异,还没找到具体的规律)

  3. 尝试过用 wx:if 在绘制结束后销毁画布,问题还是会重现

因为这个问题目前只发现在安卓下出现,比较倾向认为这是微信小程序框架实现上的差异问题,不知道有没有人曾遇到过同样问题,还请指导一二?

8 回复

我也遇到了这个问题,安卓出现的概率比较高。。。但是找不到规律

保存图片的时候,延时300ms就没有问题。

出现过这个问题,在draw的回调函数里面延迟个300毫秒能保证大部分都正常显示,如果还会有问题再加一点时间

延长生成时间…垃圾手机不能做到100ms渲染 改成500之后比较好

我有遇到这样的问题,我这边出现这种问题的时候一般是绘制长串的英文或者数字,这个时候多试几次就会变得错乱,除了绘制的位置错乱,字体颜色也可能会错乱,会拿上面设置过的颜色绘制,而不是重新定义过的颜色

最近发现每次绘制前更新一下 context 好像也可以解决绘制错乱问题:

// 我的绘制方法
draw() {
  // 每次创建新的ctx
  const ctx = wx.createCanvasContext(id, component)
  // ...
}

我 也出现这个问题,有时候字体不一样,有时候颜色不一样,每次刷新出来 的都不一样,正常的时候很少

回到顶部