Canvas绘制WhatsApp对话：文本容器矩形精准缩放问题求助

我之前做聊天气泡绘制的需求时也碰到过一模一样的问题——靠预设系数算出来的矩形要么留白太多，要么装不下文本，完全没法适配不同字号、字体和换行场景。给你几个实用的解决方案：

1. 用Canvas原生API计算精确文本尺寸 #

Canvas的measureText()方法能直接获取单行文本的像素宽度，结合自定义的最大换行宽度，就能精准算出文本的总行数和整体尺寸：

function getTextBounds(text, fontSize, fontFamily, maxBubbleWidth) {
  const tempCanvas = document.createElement('canvas');
  const ctx = tempCanvas.getContext('2d');
  ctx.font = `${fontSize}px ${fontFamily}`;

  // 拆分单词并逐行计算换行
  const wordList = text.split(' ');
  let currentLine = wordList[0];
  const lines = [];

  for (let i = 1; i < wordList.length; i++) {
    const testLine = `${currentLine} ${wordList[i]}`;
    const testWidth = ctx.measureText(testLine).width;
    if (testWidth <= maxBubbleWidth) {
      currentLine = testLine;
    } else {
      lines.push(currentLine);
      currentLine = wordList[i];
    }
  }
  lines.push(currentLine);

  // 行高通常取字号的1.2-1.3倍（可根据目标字体微调）
  const lineHeight = fontSize * 1.25;
  const totalWidth = Math.max(...lines.map(line => ctx.measureText(line).width));
  const totalHeight = lines.length * lineHeight;

  return { width: totalWidth, height: totalHeight, lineCount: lines.length };
}

这个函数会根据你设定的气泡最大宽度自动换行，返回的宽高完全贴合文本，再也不用依赖随机预设的系数。

2. 适配字体特性调整行高 #

不同字体的行高表现差异很大，比如WhatsApp常用的Roboto或Segoe UI这类无衬线字体，行高取字号的1.2-1.3倍就很合适；如果是衬线字体，可能需要调到1.3-1.4倍。你也可以通过getBoundingClientRect()获取实际渲染文本的高度，进一步优化精度。

3. 考虑设备像素比（DPR）避免模糊 #

如果要适配高分辨率屏幕，别忘了把设备像素比纳入计算，不然绘制的矩形和文本可能会模糊：

const dpr = window.devicePixelRatio || 1;
// 初始化Canvas时缩放DPR
ctx.scale(dpr, dpr);
// 计算尺寸时同步乘以DPR，绘制时对应调整坐标

4. 测试边界场景 #

比如超长连续文本、全中文/全英文内容、特殊符号等情况，都要在你的fiddle里测试一遍，确保矩形能完美包裹文本，不会出现溢出或留白过多的问题。

等你把这些逻辑整合好，矩形尺寸的精度应该就完全达标了，发布GitHub的时候可以把这个文本尺寸计算封装成独立工具函数，方便其他开发者复用~

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