收藏
回答

安卓下 canvas 绘制文字偶发性错乱,非常诡异

问题模块 框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
API和组件 小程序 Bug canvas 客户端 6.7.3 2.4.1

关键代码:

封装了一个画文字的方法如下,所有文字都是通过这个方法画出来的,我在这里打了两个 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 在绘制结束后销毁画布,问题还是会重现



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

最后一次编辑于  2018-11-30  (未经腾讯允许,不得转载)
回答关注问题邀请回答
收藏

8 个回答

  • 赞赞赞
    赞赞赞
    2018-12-03

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

    2018-12-03
    赞同 2
    回复 1
    • lcl123456
      lcl123456
      2018-12-03

      是有用,谢谢

      2018-12-03
      回复
  • 娇华
    娇华
    2018-11-30

    麻烦给个相关的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html)

    2018-11-30
    赞同
    回复 11
    • 串串太郎🍢
      串串太郎🍢
      2018-11-30

      亲  我想问一下 UpdateMannager.onCheckForUpdate 是实时监听小程序的更新吗,   比如我在玩小程序 这个时候小程序更新了,能检测到吗

      2018-11-30
      回复
    • 娇华
      娇华
      2018-11-30回复串串太郎🍢

      帖子那已经看到有答复了额

      2018-11-30
      回复
    • 串串太郎🍢
      串串太郎🍢
      2018-11-30回复娇华

      嗯嗯   本来想问小姐姐你的

      2018-11-30
      回复
    • 这酒有点上头、驾
      这酒有点上头、驾
      2018-11-30回复串串太郎🍢

      请问你解决了吗?

      2018-11-30
      回复
    • 串串太郎🍢
      串串太郎🍢
      2018-11-30回复这酒有点上头、驾

      问题有人回复了   但是这个问题没办法测试

      2018-11-30
      回复
    查看更多(6)
  • C.Barnaby
    C.Barnaby
    2018-12-03

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

    2018-12-03
    赞同 1
    回复 1
    • 0o李云鹏o0
      0o李云鹏o0
      01-23

      我给到了1000可还是有一定概率出现样式错乱问题,大佬还有其他解决方案么?

      01-23
      1
      回复
  • 深藏功与名
    深藏功与名
    2018-12-03

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

    2018-12-03
    赞同 1
    回复
  • 这酒有点上头、驾
    这酒有点上头、驾
    2018-11-30

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

    2018-11-30
    赞同 1
    回复 3
    • 深藏功与名
      深藏功与名
      2018-12-03

      渲染时长增加到500ms 安卓手机渲染速度没有苹果渲染速度快

      2018-12-03
      1
      回复
    • 这酒有点上头、驾
      这酒有点上头、驾
      2018-12-06回复深藏功与名

      谢谢你,太棒了

      2018-12-06
      回复
    • 深藏功与名
      深藏功与名
      2018-12-06回复这酒有点上头、驾

      嗯,没事

      2018-12-06
      回复
  • lcl123456
    lcl123456
    01-10

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


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


    01-10
    赞同
    回复
  • yifangts
    yifangts
    2018-12-03

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

    2018-12-03
    赞同
    回复 1
    • lcl123456
      lcl123456
      2018-12-03

      我这边也是的,感觉是 canvas 的 context 错乱了

      2018-12-03
      回复
  • 坚果
    坚果
    2018-12-03

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

    2018-12-03
    赞同
    回复