小程序canvas画图,多行文字自动换行 / Bug

5月前 阅读 / 372 来源 / 原创 文 / 管理员

在过去小程序分享横行的时代,经常会生成一些图片,里面有大量的文案,这时候就涉及换行问题。

        使用过canvas的人都知道,canvas的文字不会自动换行,不能像css一样去操控布局,那么就涉及到自动换行问题。不多说,直接上代码。


首先页面需要有一个承载

<canvas canvas-id="acanvas" class="canvas"></canvas>

在js中需要创建对象

const context = wx.createCanvasContext('acanvas')

在画布中进行分行

    let title = '我是测试文字测试文字测试文字测试文字我是测试文字测试文字测试文字测试文字'
    let ostrtxt = ''
    let olinenum = 0
    let oarrtxt = []
    context.setFontSize(48)
    context.setFillStyle('#fff')
    context.setTextAlign('center')
    for (let i = 0; i < title.length; i++) {
      ostrtxt = ostrtxt + title[i]
      let ometricsw = context.measureText(ostrtxt) //计算字符宽度
      if (ometricsw.width > 700) {//设置每行的宽度
        olinenum++
        oarrtxt = oarrtxt.concat([ostrtxt])
        ostrtxt = '';
      }
    }
    oarrtxt = oarrtxt.concat([ostrtxt])

将生成的数组画到画布上

for (let j = 0; j < oarrtxt.length; j++) {
    context.fillText(oarrtxt[j], 0, j * 64, 1050)
}
//参数后面的计算主要是分行,例如按照行高64去划分。

这块对参数不了解的可以看下官方文档 

最后创生成画布

    context.draw(false, function() {
      setTimeout(function() {//如果图片内容过多,这块要加定时器,否则样式错乱
        wx.canvasToTempFilePath({
          x: 0,
          y: 0,
          width: 1080,
          height: 1800,
          destWidth: 1080,
          destHeight: 1800,
          canvasId: 'acanvas',
          success(res) {        
          },
          fail(res) {
            wx.showToast({
              icon: 'none',
              title: '生成图片失败,可重试',
            })
          }
        })
      }, 100)
    })

这个就是平时工作的一个小的点,但是很容易出问题。只作为分享讨论,有问题可以直接留言。



3

评论列表
共0条评论
  • 这篇文章还没有收到评论,赶紧来抢沙发吧~