canvas解决绘制文字自动换行问题

最新推荐文章于 2024-07-04 15:52:48 发布

知猪狭

最新推荐文章于 2024-07-04 15:52:48 发布

阅读量4.4k

点赞数 7

分类专栏： javascript

本文链接：https://blog.csdn.net/qq_37054093/article/details/109210106

版权

canvas 小程序数据可视化 javascript

javascript 专栏收录该内容

12 篇文章

订阅专栏

这篇博客探讨了在小程序的Canvas中使用ctx.fillText绘制文字时如何实现自动换行。作者通过计算画布宽度、字体大小和每行字数，确定所需行数，并用for循环实现文字的多行绘制。提供的代码示例展示了具体的实现方法，适用于小程序开发者解决类似问题。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

今天在写小程序的canvas时，遇到一个蛮有趣的问题：使用canvas的ctx.fillText绘制文字时，即使超出画布了，也不会自动换行。

于是琢磨出了如下思路：

首先获取画布总宽度，然后获取每个字体的大小，这样就可以计算出每一行需要多少字。

然后根据每一行需要多少字，就可以计算出需要多少行。

接着canvas绘制的时候，就可以通过循环，实现自动换行绘制文字的功能。

解决方案代码如下：

  text(str) {
      // 画布总宽度 px单位
      let canvasWidth = wx.getSystemInfoSync().windowWidth * wx.getSystemInfoSync().pixelRatio * 0.9
      // 字体大小 px单位
      let fontSize = parseInt((wx.getSystemInfoSync().windowWidth/375) * 30)
      // 每行所需字数 = 画布总宽度 / 单个字体大小
      let rowFontNum = Math.floor(canvasWidth / fontSize)
      // 字符串总长度
      let strLength = str.length
      // 所需行数 = 字符总长度 / 每行所需字数
      let rows = Math.ceil(strLength / rowFontNum)
      return {canvasWidth,fontSize,rowFontNum,strLength,rows}
  },

然后在canvas的绘制中调用该函数，并使用for循环进行绘制。

        let result = this.text(data.summary)
        for (let i = 0; i <= result.rows; i++) {
          ctx.fillText(data.summary.slice(result.rowFontNum*(i-1),result.rowFontNum*i),20,630+i*70)
        }