Canvas转盘标签文本自动换行与字体适配问题求助

完全不用从零编写，基于现有代码就能实现长文本标签的自动换行、弹性字号适配，针对长单词排版问题也有具体优化方法：

一、文本自动换行与长单词处理 #

• 先计算每个扇形的可用绘制区域：根据扇形的径向长度减去内边距，得到文本的最大单行宽度。
• 用ctx.measureText()逐段检测文本宽度，把长文本拆分成多行；遇到单个单词超过最大宽度时，要么按字符截断并添加连字符，要么先尝试缩小字号，不行再拆分单词。
• 示例换行函数逻辑：

  function wrapText(ctx, text, maxWidth) {
    const words = text.split(' ');
    const lines = [];
    let currentLine = words[0];
  
    for (let i = 1; i < words.length; i++) {
      const word = words[i];
      const width = ctx.measureText(currentLine + ' ' + word).width;
      if (width < maxWidth) {
        currentLine += ' ' + word;
      } else {
        // 检查单个单词是否超宽
        if (ctx.measureText(word).width > maxWidth) {
          // 拆分长单词
          let splitWord = '';
          for (const char of word) {
            if (ctx.measureText(splitWord + char).width < maxWidth) {
              splitWord += char;
            } else {
              lines.push(splitWord);
              splitWord = char;
            }
          }
          lines.push(splitWord);
        } else {
          lines.push(currentLine);
          currentLine = word;
        }
      }
    }
    lines.push(currentLine);
    return lines;
  }
  

二、弹性字号适配 #

• 放弃固定字号，改为动态计算：先设定一个最大字号，循环减小字号，直到多行文本的总高度不超过扇形的可用高度，同时每行宽度不超限制。
• 结合换行函数的适配逻辑：

  function getFittedText(ctx, text, maxWidth, maxHeight) {
    let fontSize = 24; // 初始最大字号
    let lines = [];
    let totalHeight = 0;
    const lineSpacing = 4; // 行间距
  
    do {
      ctx.font = `${fontSize}px Arial`;
      lines = wrapText(ctx, text, maxWidth);
      totalHeight = lines.length * (fontSize + lineSpacing) - lineSpacing;
      fontSize--;
    } while ((totalHeight > maxHeight || ctx.measureText(lines[0]).width > maxWidth) && fontSize >= 8); // 最小字号限制
  
    return { fontSize: fontSize + 1, lines }; // 回退到最后一个符合条件的字号
  }
  

三、现有转盘代码的修改点 #

• 找到原代码中绘制扇形文本的函数（比如原代码里的drawSector相关逻辑），替换原固定文本绘制部分：
  1. 计算当前扇形的可用宽度（径向长度-内边距）和可用高度（扇形对应的弧长方向的高度，可通过扇形角度换算）；
  2. 调用getFittedText获取适配后的字号和行；
  3. 以扇形的中线为基准，逐行计算文本的绘制位置，确保文本在扇形内居中对齐。

四、长单词排版优化 #

• 优先在单词的自然分隔点（比如连字符、斜杠）拆分，避免生硬截断；
• 可以开启Canvas的ctx.clip()，在绘制文本前先裁剪出当前扇形的区域，确保文本不会超出扇形边界。

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