p5.js | textWidth()函数

在p5.js中，textWidth()是文本函数之一，用于计算文本的宽度。在许多情况下，我们需要知道要渲染的文本的宽度，以便正确地对齐，布局和渲染文本。该函数使用特定字体和字号计算给定文本的宽度。

语法

textWidth(str)

str：传递要计算宽度的字符串参数。

示例

// 在setup()函数中创建画布并加载字体
function setup() {
  createCanvas(400, 400);
  textAlign(CENTER, CENTER);
  textFont('Arial', 32);
}

function draw() {
  background(220);

  // 绘制一段文本
  let str = 'Hello, World!';
  fill(0);
  text(str, width/2, height/2);

  // 计算文本的宽度
  let w = textWidth(str);

  // 绘制一个边框来显示文本的宽度
  noFill();
  stroke(0);
  strokeWeight(2);
  rect(width/2 - w/2, height/2 - 15, w, 30);
}

在上面的例子中，我们首先在setup()函数中创建画布，设置文本的对齐方式和字体。在draw()函数中，我们绘制一段文本并使用textWidth()函数计算宽度。然后，我们使用rect()函数绘制一个边框来显示文本的宽度。

注意事项

• textWidth()函数计算的宽度仅适用于当前字体和字号。
• 在使用textWidth()函数之前，请确保已选择正确的字体并设置正确的字号。否则，函数的结果可能不准确。
• 如果文本换行，则计算出的宽度可能不准确。在这种情况下，请考虑使用textWidth()的返回值计算每行文本的宽度。

参考链接

• textWidth() | Reference | p5.js