如何在p5.js矩形框内绘制文本？代码问题求助

原代码的核心问题 #

• 开头出现undefined：rtnQuoteLines未初始化，默认值是undefined，第一次拼接字符时会把undefined和字符连在一起，导致前缀异常。
• 结尾显示数组格式：else if分支里直接调用splitQuote.toString()，数组转字符串会自动用逗号分隔每个元素，比如['h','i']会变成"h,i"，不是正常的文本。
• 循环逻辑混乱：用初始数组长度size作为循环终止条件，但每次splitQuote.shift()会修改数组长度，同时else if的判断时机不对，会导致提前中断循环，未处理完当前累积的文本。

修复后的代码 #

let quote = tweetsTable.getRow(row).get("Quote");
let splitQuote = quote.split('');
let yOff = 0;
let rtnQuoteLines = ''; // 初始化空字符串
const charsPerLine = 44;

for (let i = 0; i < splitQuote.length; i++) {
  rtnQuoteLines += splitQuote[i]; // 直接取元素，避免用shift破坏原数组
  // 每满44个字符就输出一行
  if ((i + 1) % charsPerLine === 0) {
    text(rtnQuoteLines, 1100, yOff);
    console.log("rtn:    " + rtnQuoteLines);
    yOff += 250;
    rtnQuoteLines = '';
  }
}
// 循环结束后，输出剩余的不足一行的文本
if (rtnQuoteLines.length > 0) {
  text(rtnQuoteLines, 1100, yOff);
  console.log("rtn:    " + rtnQuoteLines);
}

更简洁的实现方法 #

不用手动拆字符数组，有两种更高效的方式：

方法1：用p5.js内置自动换行

设置文本宽度限制后，p5会自动处理换行：

let quote = tweetsTable.getRow(row).get("Quote");
textWrap(WORD); // 按单词换行，避免截断单词；强制按字符换行用CHAR
textSize(20); // 先设置字号，确保换行计算准确
text(quote, 1100, 0, 800); // 第三个参数是文本块宽度，超过自动换行

方法2：正则快速切割字符串

如果必须按固定字符数换行，用正则直接分割：

let quote = tweetsTable.getRow(row).get("Quote");
const charsPerLine = 44;
// 分割成每44个字符一组的数组
const lines = quote.match(new RegExp(`.{1,${charsPerLine}}`, 'g'));
let yOff = 0;
lines.forEach(line => {
  text(line, 1100, yOff);
  yOff += 250;
});

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