收藏
回答

measureText获取字体宽度有问题

框架类型 问题类型 API/组件名称 终端类型 微信版本 基础库版本
小程序 Bug measureText 客户端 7.0.3 2.6.4

- 当前 Bug 的表现(可附上截图)


- 预期表现


- 复现路径


- 提供一个最简复现 Demo


measureText获取字体宽度有问题,


wordNumber = ‘1233333’

nameWidth = ctx.measureText(wordNumber).width,


allReading = nameWidth / app.globalData.ratio + 325;


第一次获取wordNumber的宽度和第二次的不一样,第二次的正确,请问这是什么原因?截图如下,红线框内的分别是两次打印的数值。

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

3 个回答

  • 北笙
    北笙
    2020-12-25

    我之前碰到的,ctx.measureText('内容').width第二次比和第一次返回的宽度要大,然后在ctx.measureText('内容').width之前先设置好ctx.setFontSize(14)字体大小就没问了。ctx.measureText('内容').width 会以第一次的 字体大小来计算字体长度。

    2020-12-25
    有用 2
    回复 1
    • 马林
      马林
      07-24
      他说的对,第一次如果没设置字体大小和行高,用系统默认的算,第二次由于页面没刷新,你设置过大小和行高了就用你设置的算。所以就出现差异
      07-24
      回复
  • Lemon  Chen
    Lemon Chen
    2019-08-27

    这个获取纯数字的长度在ios上面就会有问题 ,可以在后面 + " " 就可以解决这个问题了

    2019-08-27
    有用 2
    回复 2
    • 刘员外
      刘员外
      2020-03-16
      试过了,好像没用
      2020-03-16
      回复
    • 沙瓤西瓜
      沙瓤西瓜
      2022-07-22回复刘员外
      这样就行了
      2022-07-22
      回复
  • 灵芝
    灵芝
    2019-04-10

    麻烦提供能复现问题的代码片段(https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

    2019-04-10
    有用
    回复 6
    • Mr姜
      Mr姜
      2019-04-10

      const ctx = wx.createCanvasContext('myCanvas')

      let nameWidth = ctx.measureText('123456').width

      console.log(nameWidth 'nameWidth')


      就是这些代码,在绘制的时候,获取‘1234566’的宽度在iOS客户端,获取不到值


      2019-04-10
      回复
    • 灵芝
      灵芝
      2019-04-11回复Mr姜

      这边测试是正常的

      2019-04-11
      回复
    • Mr姜
      Mr姜
      2019-04-11回复灵芝

      额,我这边是真的不行,我最终是这样解决的,就是获取数字正常下的宽度除以数字的个数,得到每个数字的宽度,然后再除以像素屏幕比,再乘以动态获取的数字length长度,计算得出最终的宽度。(正常数字的宽度/个数/像素屏幕比*动态获取的数字length=总数字的宽度

      2019-04-11
      回复
    • 灵芝
      灵芝
      2019-04-12回复Mr姜

      具体机型和微信版本号是啥呀,给个代码片段看看呗,我这边测试是可以的https://developers.weixin.qq.com/miniprogram/dev/devtools/minicode.html

      2019-04-12
      回复
    • Mr姜
      Mr姜
      2019-04-12回复灵芝

      iOS8,版本12.1.4  代码就是我发的那些

      2019-04-12
      回复
    查看更多(1)
登录 后发表内容