p5.js | p5.Font textBounds() 方法

textBounds() 方法是 p5.js 库中 p5.Font 对象的一个成员方法，它用于计算给定文本的边界框。

语法

使用 textBounds() 方法获取文本边界框，语法如下：

font.textBounds(text, x, y, [fontSize], [options])

参数

• text：需要计算边界框的文本字符串。
• x 和 y：文本边界框的左上角坐标。
• fontSize：可选参数，文本字体大小。
• options：可选参数，包含各种样式控制选项的对象。

返回值

textBounds() 方法返回一个对象，其中包含以下属性：

• w：文本边界框的宽度。
• h：文本边界框的高度。
• x：文本边界框的左上角 x 坐标。
• y：文本边界框的左上角 y 坐标。

示例

let myFont;

function preload() {
  myFont = loadFont('myFont.ttf');
}

function setup() {
  createCanvas(400, 400);
  textSize(40);
  textFont(myFont);
  fill(255, 0, 0);
  noStroke();
}

function draw() {
  background(220);
  let textString = 'Hello, World!';
  let textPos = textBounds(textString, 20, 50);
  text(textString, textPos.x, textPos.y);
  rect(textPos.x, textPos.y, textPos.w, textPos.h);
}

上述代码中，我们加载了自定义字体文件 myFont.ttf，并且在 setup() 函数中设置了文本的字体和大小。在 draw() 函数中，我们使用 textBounds() 方法计算了文本字符串 Hello, World! 的边界框，并在画布上绘制了文本和边框。运行上述代码，我们可以看到画布上绘制出了文本及其边界框。

注意事项

• 如果未指定 fontSize，则默认为 12。
• options 参数是一个包含各种样式控制选项的对象，可以用来控制文本的样式，包括文本颜色、字体样式、字重等等。具体的选项请参考 p5.js 文档。