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

p5.js 中 p5.Font 的textBounds() 方法是使用它所使用的字体为给定字符串返回一个紧密的边界框。此方法仅支持单行。
句法：

textBounds( line, x, y, [fontSize], [options] )

参数：该函数接受上面提到的五个参数，如下所述：

• line：它是一个字符串，表示必须找到边界框的文本行。
• x：是表示x位置的数字。
• y：它是一个表示 y 位置的数字。
• fontSize：它是一个数字，表示要使用的字体大小。默认值为 12。它是一个可选参数。
• options：它是一个对象，可用于指定 opentype 选项。 Opentype 字体包含对齐和基线选项等选项。默认值为“左”和“字母”。它是一个可选参数。

以下示例说明了 p5.js 中的textBounds()函数：
示例 1：

javascript

let inputElem;
let currFont;
  
function preload() {
  currFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(600, 300);
  
  textFont(currFont);
}
  
function draw() {
  clear();
  textSize(16);
  let text1 = "Hello GeeksforGeeks";
  let text2 = "GeeksforGeeks is a computer science portal";
  text("Below is the example of text bounds using 2 font sizes", 20, 20);
  
  // Set new font size
  let fontSizeSmall = 16;
  textSize(fontSizeSmall);
  // Get the bounding box dimensions
  let bounding_box = currFont.textBounds(text1, 20, 50, fontSizeSmall);
  // Draw the bounding box
  fill(255);
  stroke(0);
  rect(bounding_box.x, bounding_box.y, bounding_box.w, bounding_box.h);
  fill(0);
  noStroke();
  // Show the text
  text(text1, 20, 50);
  
  // Set new font size
  let fontSizeLarge = 22;
  textSize(fontSizeLarge);
  // Get the bounding box dimensions
  let bounding_box2 = currFont.textBounds(text2, 20, 100, fontSizeLarge);
  // Draw the bounding box
  fill(255);
  stroke(0);
  rect(bounding_box2.x, bounding_box2.y, bounding_box2.w, bounding_box2.h);
  fill(0);
  noStroke();
  
  text(text2, 20, 100);
}

输出：

示例 2：

javascript

let inputElem;
let currfontSize = 28;
let currFont;
  
function preload() {
  currFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(600, 300);
  
  // Create button to increase font size
  let fontBtn = createButton("Increase Font Size");
  fontBtn.mouseClicked(() => {
    currfontSize += 2;
  });
  fontBtn.position(20, 70);
  
  // Create input box
  inputElem = createInput("");
  inputElem.position(20, 40);
  
  textFont(currFont, currfontSize);
}
  
function draw() {
  clear();
  textSize(18);
  text(
    "Write in input to change the text and observe the bounding box",
    10,
    20
  );
  
  // Display text and line if input not empty
  let enteredText = inputElem.value();
  if (enteredText != "") {
    // Get the bounding box dimensions
    let bounding_box = currFont.textBounds(enteredText, 20, 150, currfontSize);
  
    // Show the properties of the boundig box
    text("Box Position X: " + bounding_box.x, 20, 180);
    text("Box Position Y: " + bounding_box.y, 20, 200);
    text("Box Height: " + bounding_box.h, 20, 220);
    text("Box Width: " + bounding_box.w, 20, 240);
  
    textSize(currfontSize);
  
    // Set properties for drawing the box
    fill(255);
    stroke(0);
  
    // Draw the bounding box
    rect(bounding_box.x, bounding_box.y, bounding_box.w, bounding_box.h);
    fill(0);
    noStroke();
  
    // Show the entered text inside the box
    text(enteredText, 20, 150);
  }
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
参考： https://p5js.org/reference/#/p5.Font/textBounds