如何在p5.js中获取textWrap自动换行文本的边界形状

不需要自行重写textWrap()的换行逻辑，p5.Font 内置的textBounds()方法本身就支持自动适配换行规则，只要传入和渲染文本时完全一致的排版参数，就能直接拿到换行后完整文本块的边界，不需要手动拆分多行内容。

具体实现方法 #

在完成所有文本样式设置、调用text()渲染文本前，直接调用字体对象的textBounds()方法，传入对应参数即可：

let font;

function preload() {
  font = loadFont('SomeFont.otf');
}

function setup() {
  createCanvas(400, 400);
  background(220);
  const enteredText = 'This is an exmple of a long text that should split';
  const fontSize = 30;
  const textBoxW = 200; // 注：原示例传20宽度远小于字号，会导致单字强制换行，这里调整为合理值
  const textBoxH = 200;
  const leadingVal = 0.83 * fontSize;

  textWrap(WORD);
  textSize(fontSize);
  textAlign(CENTER, CENTER);
  textFont(font);
  textLeading(leadingVal);
  rectMode(CENTER);
  fill(0);
  noStroke();

  // 传入和渲染完全一致的参数，获取换行后的文本边界
  const textBBox = font.textBounds(
    enteredText,
    width / 2,
    height / 2,
    fontSize,
    {
      xAlign: CENTER,
      yAlign: CENTER,
      maxWidth: textBoxW,
      maxHeight: textBoxH,
      leading: leadingVal
    }
  );

  // 正常渲染文本
  text(enteredText, width / 2, height / 2, textBoxW, textBoxH);

  // 基于返回的边界添加装饰即可，textBBox包含x(包围盒左边界)、y(包围盒上边界)、w(总宽度)、h(总高度)四个属性
  // 示例：在文本块右侧10px位置绘制红色装饰圆
  fill(255,0,0);
  circle(textBBox.x + textBBox.w + 10, textBBox.y + textBBox.h/2, 20);
}

注意事项 #

• 传入textBounds()的字号、对齐方式、行高、文本框宽高必须和调用text()时的参数完全一致，否则计算出的边界会错位
• 该方法完全复用p5内部的换行计算逻辑，不管是WORD/CHAR换行模式，还是自定义字体、特殊对齐规则都能正确适配，不需要额外处理
• 如果使用的是1.4之前的旧版本p5.js，升级到最新稳定版即可正常使用该参数能力，不需要修改其他业务逻辑

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