本文详解如何将任意长度的句子按单词自动分行，并通过 for 循环动态计算每行水平居中与垂直间距，实现响应式文本排版——无需硬编码坐标，适配不同句子长度与窗口尺寸。
本文详解如何将任意长度的句子按单词自动分行，并通过 for 循环动态计算每行水平居中与垂直间距，实现响应式文本排版——无需硬编码坐标，适配不同句子长度与窗口尺寸。
在 Processing 中实现文本居中显示，尤其是多行句子的动态排版，关键在于分离“文本分割逻辑”与“绘制逻辑”。原代码中直接用嵌套 for 循环遍历坐标（如 textposX += 120）不仅无法真正居中，还会导致重叠、错位，且完全无法适应新输入的句子长度变化。正确做法是：先将句子智能分词/分行长句，再逐行调用 text() 并利用 Processing 内置对齐机制完成居中。
✅ 核心策略：分步解耦
- 文本预处理：将原始句子按空格拆分为单词数组，再按指定最大字符数（或视觉宽度）合并为多行字符串；
- 绘制时居中：启用 textAlign(CENTER)，并统一以 width/2 作为 x 坐标；
- 垂直动态布局：用累加变量（如 textScrPos）控制每行 y 位置，确保行距一致、整体垂直居中可调。
? 实现分词与分行的工具类
以下 TextSplitter 是一个轻量、可复用的静态工具类，它接收原始字符串和每行最大字符数（此处为近似阈值，适用于英文），返回 ArrayList
public static class TextSplitter {
public static ArrayList<string> splitText(String inputText, int maxLength) {
String[] words = split(inputText, ' ');
ArrayList<string> lines = new ArrayList<string>();
String currentLine = "";
for (String word : words) {
// 尝试添加当前单词（含前导空格）
String candidate = currentLine + " " + word;
if (candidate.trim().length() > maxLength && !currentLine.isEmpty()) {
lines.add(currentLine.trim());
currentLine = word; // 新行从当前单词开始
} else {
currentLine = candidate;
}
}
// 添加最后一行（避免空行）
if (!currentLine.isEmpty()) {
lines.add(currentLine.trim());
}
return lines;
}
}</string></string></string>
? 提示：maxLength 是字符数阈值（非像素宽度），适合快速原型；如需精确像素级换行（考虑字体缩放），应改用 textWidth() 动态测量，但本例以简洁性优先。
?️ 绘制函数：简洁、可维护、自适应
在 riddle() 函数中，我们不再手动写死坐标，而是：
- 设置 textAlign(CENTER) 确保每行文本水平居中；
- 使用 textSize(50) 统一字号（注意：textAscent()/textDescent() 可进一步精控基线）；
- 用 textScrPos 从画布顶部起始（可改为 (height - totalHeight)/2 实现垂直居中）；
- 每循环一行，y 坐标递增固定增量（如 64，约等于 textSize * 1.28，兼顾行高）：
void riddle() {
fill(0);
textSize(50);
stroke(0);
textAlign(CENTER); // ← 关键：启用水平居中
int startY = 100; // 起始 Y 坐标（可调整以垂直居中）
int lineHeight = 64;
int textScrPos = startY;
ArrayList<string> lines = TextSplitter.splitText(riddle, 12); // 每行约 12 字符
for (String line : lines) {
text(line, width/2, textScrPos);
textScrPos += lineHeight;
}
}</string>
⚠️ 注意事项与优化建议
- 避免 mousePressed 在 draw() 中重复触发：原代码中 answerBox() 的条件判断易造成多次弹窗，建议改用 mouseReleased() 或状态标志位；
- noLoop() 需谨慎：它会停止 draw() 循环，影响后续交互；若仅需暂停，可用布尔开关控制绘制逻辑；
- 中文支持：当前 splitText 基于空格，中文无空格需改用正则（如 split(inputText, "\b")）或字数切分；
- 响应式增强：可在 setup() 中监听 windowResized()，或于 draw() 开头根据 width/height 动态重算 textSize 和 lineHeight；
- 性能提示：splitText() 在 draw() 中调用无妨（除非句子极长），但若频繁更新，建议缓存结果并在句子变更时重新生成。
✅ 总结
通过封装文本分割逻辑 + 合理利用 textAlign(CENTER) + 动态 y 坐标累加，即可用纯 for 循环优雅实现句子的自适应居中排版。该方案彻底摆脱了硬编码坐标、手动分行的脆弱性，使代码具备可维护性、可扩展性与真正的响应能力——无论用户输入“Hello”还是百字谜题，都能自动整齐居中呈现。
