如何使用Konva实现自动调整字号以适配容器的多行文本功能

核心逻辑是利用Konva节点自带的离线测量能力，通过二分法快速定位最优字号，完全兼容多行换行场景，不会出现强制单行导致字号过小的问题。

实现步骤 #

• 提前确定文本容器的固定宽高，记为maxWidth、maxHeight，同时根据业务场景设置允许的字号上下限，避免出现不可读的极小/极大字号
• 创建临时的Konva.Text节点（无需挂载到画布，仅用于尺寸测量），传入和实际展示文本完全一致的字体、行高、内边距、文本内容等属性，同时设置节点width为maxWidth触发自动换行规则
• 用二分法在字号区间内迭代测试：每次取区间中间值作为临时字号设置给测量节点，读取节点渲染后的实际高度
  • 若高度小于等于maxHeight，说明还有富余空间，调大字号下限
  • 若高度大于maxHeight，说明内容溢出，调小字号上限
• 当字号上下限差值小于1时，即可取当前的下限值作为最终适配字号，设置给实际展示的文本节点即可

代码示例 #

/**
 * 计算适配容器的最优文本字号
 * @param {string} textContent 待展示的文本内容
 * @param {number} maxWidth 容器最大宽度
 * @param {number} maxHeight 容器最大高度
 * @param {object} fontAttrs 文本样式配置（字体、行高、内边距等，和实际展示保持一致）
 * @returns {number} 最优字号
 */
function getFitFontSize(textContent, maxWidth, maxHeight, fontAttrs = {}) {
  // 字号上下限可根据业务需求自行调整
  let minFontSize = 10
  let maxFontSize = 72
  // 临时测量节点，无需加入stage
  const measureText = new Konva.Text({
    text: textContent,
    width: maxWidth,
    ...fontAttrs
  })

  // 二分法迭代，精度到1px即可
  while (maxFontSize - minFontSize > 1) {
    const midSize = Math.floor((minFontSize + maxFontSize) / 2)
    measureText.fontSize(midSize)
    const currentHeight = measureText.height()
    if (currentHeight <= maxHeight) {
      minFontSize = midSize
    } else {
      maxFontSize = midSize
    }
  }
  // 销毁临时节点释放内存
  measureText.destroy()
  return minFontSize
}

// 实际调用
const fitSize = getFitFontSize(
  '这是一段多行测试文本，会自动按照容器宽度折行，最终字号会适配容器的宽高限制，不会强制单行显示。',
  300, // 容器宽度
  250, // 容器高度
  {
    fontFamily: 'PingFang SC',
    lineHeight: 1.6,
    padding: 8
  }
)
// 给实际显示的文本设置字号
realTextNode.fontSize(fitSize)

注意事项 #

• 测量用的临时节点样式必须和实际展示的文本节点完全一致，包括字体、字重、行高、内边距等，否则会出现尺寸计算偏差
• 如果使用的是富文本节点Konva.RichText，仅需将临时测量节点的类型替换为Konva.RichText即可，逻辑完全通用

内容的提问来源于stack exchange，提问作者Will