收藏
回答

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

框架类型 问题类型 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 在绘制结束后销毁画布,问题还是会重现



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

回答关注问题邀请回答
收藏

8 个回答

  • 社区技术运营专员-娇华
    社区技术运营专员-娇华
    2018-11-30

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

    2018-11-30
    有用
    回复 11
    查看更多(6)
  • 赞赞赞🤣🤣
    赞赞赞🤣🤣
    2018-12-03

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

    2018-12-03
    有用 2
    回复 1
    • lcl123456
      lcl123456
      2018-12-03

      是有用,谢谢

      2018-12-03
      1
      回复
  • C.Barnaby
    C.Barnaby
    2018-12-03

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

    2018-12-03
    有用 1
    回复 1
    • 0o李云鹏o0
      0o李云鹏o0
      2019-01-23

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

      2019-01-23
      1
      回复
  • 白
    2018-12-03

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

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

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

    2018-11-30
    有用 1
    回复 3
  • lcl123456
    lcl123456
    2019-01-10

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


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


    2019-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
    有用
    回复
登录 后发表内容