p5.j​​s 中垂直居中的文本未正确对齐

Posted 2023-03-05

【中文标题】p5.j​​s 中垂直居中的文本未正确对齐

【英文标题】：Vertically centered text in p5.js is not aligned properly

【发布时间】：2021-09-10 23:28:41

【问题描述】：

我最近开始更多地使用 p5.js，并注意到当我使用 textAlign() 函数使文本居中时，它的偏移量高于我在调用 text() 时指定的坐标。它的偏移量在不同字体大小之间似乎是恒定的，大约是我输入的 y 坐标上方的 fontSize()/12。

这方面的一个例子可以在this p5.js sketch 看到，显示默认居中在左侧，文本在右侧被 fontSize()/12 偏移，使其在不同的文本大小时正确居中。

有没有一种方法可以解决此问题并正确对齐所有文本，而无需在每次调用文本时指定我希望将文本向下移动以使其正确居中所需的像素量？有没有办法修改文本函数以内置此功能？

(编辑：我能够通过用我自己的代码覆盖默认文本函数来“解决”这个问题，尽管我不知道这是否是一个很好的做法。可以找到修复的链接here ，固定文本对齐方式为黑色，默认 p5.js 对齐方式为绿色。）

【参考方案1】：

这与您认为的字形垂直“中心”有关。从您的示例中可以明显看出，您将“中心”视为大写字母的中心线。但是，根据这个指标，所有小写字母大多会出现在中心下方，而且它也没有考虑字形下降（即出现在字体基线下方的某些小写字形的数量）。

这是一个我认为清楚地展示了各种垂直定位类型如何工作的示例。

function setup() 
  createCanvas(windowWidth, windowHeight);
  noLoop();


function windowResized() 
  resizeCanvas(windowWidth, windowHeight);
  redraw();


function draw() 
  let w = width / 4;
  
  push();
  stroke('blue');
  line(0, height / 2, width, height / 2);
  pop();
  
  drawText(0, 0, w, height, TOP);
  drawText(w, 0, w, height, CENTER);
  drawText(w * 2, 0, w, height, BASELINE);
  drawText(w * 3, 0, w, height, BOTTOM);


const str = 'Age';
const size = 48;

function drawText(x, y, w, h, valign) 
  push();
  textSize(size);
  textAlign(LEFT, valign);
  let tw = textWidth(str);
  let yOff = 0;
  switch (valign) 
    case TOP:
      yOff = -size / 2;
      break;
    case BOTTOM:
      yOff = size / 2;
      break;
    case BASELINE:
      yOff = size / 2 - textDescent();
  
  
  stroke('limegreen');
  rectMode(CENTER);
  noFill();
  rect(x + w / 2, y + h / 2, tw, size);
  
  translate(x + w / 2 - tw / 2, height / 2 + yOff);
  
  stroke('red');
  line(0, 0, tw, 0);
  
  strokeWeight(4);
  point(0, 0);
  
  noStroke();
  fill('black');
  text(str, 0, 0);
  pop();

body, html 
margin: 0;
padding: 0;
overflow: hidden;

<script src="https://cdn.jsdelivr.net/npm/p5@1.3.1/lib/p5.js"></script>