HTML canvas文本换行的问题

基础知识

void ctx.fillText(text, x, y [, maxWidth]);

ctx.measureText(text)

var text = ctx.measureText('foo') // TextMetrics object
text.width // 16;

使用贪心算法实现自动换行

const text = 'Hello World'

// 计算文本应当在何时换行，返回换行处理后的字符串列表
function calculateTextWrapLines(ctx, text, maxWidth) {
  let lines = []
  //
  let words = text.split('')
  let line = ''

  for (let i = 0; i < words.length; i++) {
    const word = words[i]
    const testLine = line + word
    const { width: measuredWidth } = ctx.measureText(testLine)
    if (measuredWidth > maxWidth) {
      lines.push(line)
      // 最后一个词是下一行的行首
      line = word
    } else {
      line = testLine
    }
  }
  // 循环结束时，可能还有字符在缓冲区，把剩下的字符当作最后一行
  line.length && lines.push(line)
  return lines
}

// 调用换行处理函数处理文本换行，
function fillTextWrap(ctx, { text, x, y, width }) {
  // 支持换行符
  const paragraphs = text.split('\n')
  // 将\n分割后的段落交给calculateTextWrapLines处理为换行后的字符串列表
  const lines = paragraphs.reduce((acc, cur) => {
    acc.push(...calculateTextWrapLines(ctx, cur, width))
    return acc
  }, [])
  lines.map((line, index) => {
    // 绘制单行文本，这里使用了lineHeight计算第x行文本的y位置
    ctx.fillText(line, x, y + index * ctx.lineHeight)
  })
}

ctx.font = '12px sans'
ctx.lineHeight = 14
// textBaseline改为top是为了使y的表现与HTML一致，默认情况下，fillText的y指的是文本基线的位置
ctx.textBaseline = 'top'
fillTextWrap(ctx, { text, x: 0, y: 0, width: 300 })

Unicode 换行算法与 CSS 换行标准

句号、逗号、顿号…不出现在一行之首…引号、括号、书名号…前一半不出现在一行之末，后一半不出现在一行之首—— 《标点符号用法》

• line-break：用来处理如何断开带有标点符号的中文、日文或韩文（CJK）文本的行

• word-break：指定怎样在单词内断行

• hyphens：告知浏览器在换行时如何使用连字符连接单词

• overflow-wrap：用来说明当一个不能被分开的字符串太长而不能填充其包裹盒时，为防止其溢出，浏览器是否允许这样的单词中断换行。

import { LineBreaker } from 'css-line-break'

// 代码基本逻辑相同，不再注释
function calculateTextWrapLinesULB(ctx, text, width) {
  let lines = []
  const breaker = LineBreaker(text, {
    lineBreak: 'strict',
    wordBreak: 'normal'
  })
  let bk
  let words = text.split('')
  let line = ''

  while (!(bk = breaker.next()).done) {
    const word = bk.value.slice()
    const testLine = line + word
    const { width: measuredWidth } = ctx.measureText(testLine)
    if (measuredWidth >= width) {
      lines.push(testLine)
      line = word
    } else {
      line = testLine
    }
  }
  line.length && lines.push(line)
  return lines
}

html2canvas 文本排版原理

参考资料

• 标点符号用法 - GB/T15834-2011

• canvas 文本绘制自动换行、字间距、竖排等实现

• 自动换行 - wikipedia

• Unicode 换行算法的数据

• Unicode 换行算法的 CPP 实现

• Unicode 换行算法的在线 demo