微信小程序 canvas绘制多行文本（文本换行）

效果图

https://www.jianshu.com/p/4d2711cd104b

代码实现

/**
 *【drawTxt】canvas 绘制多行文本
 *【TODO: 中英混排且考虑单词截断...】
 * 
 * @param {*} context 绘制上下文环境 【必传】
 * @param {*} scale 缩放比  windowWidth / 750
 * @param {*} text 文本内容
 * @param {*} broken 单词是否截断显示  【true  如果不考虑英文单词的完整性 适用于所有情况】 【false  考虑英文单词的完整性 仅适用于纯英文】
 * @param {*} fillStyle 文本颜色
 * @param {*} fontSize 文本大小
 * @param {*} x 文本左上角x坐标
 * @param {*} y 文本左上角y坐标
 * @param {*} lineHeight 行高
 * @param {*} maxWidth 最大宽度
 * @returns  此次绘制文本的高度 单位: px
 */

function drawTxt({context, scale = 0.5, text = 'test text', fillStyle = '#000', broken = true, ...rest}) {
  if (!context) throw Error('请传入绘制上下文环境context')
  // 默认设置
  let origin = {x: 0, y: 0, lineHeight: 30, maxWidth: 630 , fontSize: 28}

  // 比例计算正确的尺寸
  for (let item in rest) {
    rest[item] *= scale
  }

  // 获取计算后的值
  let {x, y, lineHeight, maxWidth, fontSize} = {...origin, ...rest}

  // 设置字体样式
  context.setTextAlign('left')
  context.setTextBaseline('top')
  context.setFillStyle(fillStyle)
  context.setFontSize(fontSize)

  // broken: true  如果不考虑英文单词的完整性 适用于所有情况
  // broken: false  考虑英文单词的完整性 仅适用于纯英文
  //【TODO: 中英混排且考虑单词截断...】

  let splitChar = broken ? '' : ' '

  let arrText = text.split(splitChar)
  let line = ''
  let linesCount = 0

  for (var n = 0; n < arrText.length; n++) {
    let testLine = line + arrText[n] + splitChar
    let testWidth = context.measureText(testLine).width
    if (testWidth > maxWidth && n > 0) {
      // 一行已经绘制完成
      linesCount++
      context.fillText(line, x, y)
      line = arrText[n] + splitChar
      y += lineHeight
    } else {
      // 一行还未绘制完成
      line = testLine
    }
  }

  linesCount++
  context.fillText(line, x, y)
  return linesCount * lineHeight
}

//【drawTxt example】
// let drawTxtHeight = drawTxt({
//   context,
//   scale,
//   text: 'Free Classifieds Using Them To Promote Your Stuff Online',
//   broken: false,
//   fillStyle: '#ccc',
//   x: 0,
//   y: 0,
//   lineHeight: 66,
//   maxWidth: 630,
//   fontsize: 48
// })
// console.log(`此次绘制总高度：${drawTxtHeight}px`)

结语

有什么问题尽管留言~

个人链接

• github：https://github.com/webxing
• 简书：https://www.jianshu.com/u/489662a091fd

本人两年纯小程序开发经验 新建了一个交流群 欢迎加入

以下是我独立开发的小程序 第一次Pro 欢迎使用 欢迎吐槽