p5.js Font textBounds()用法及代碼示例

p5.js中p5.Font的textBounds()方法是使用給定的字符串使用它的字體返回一個緊密的邊界框。此方法僅支持單行。語法：

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

參數：該函數接受上述和以下所述的五個參數：

line:它是一個字符串，表示必須為其找到邊界框的文本行。
x:它是一個數字，表示x-position。
y:它是一個數字，表示y-position。
fontSize:它是一個數字，表示要使用的字體大小。默認值為12。這是一個可選參數。
options:它是一個對象，可用於指定opentype選項。 Opentype字體包含諸如對齊和基線選項之類的選項。默認值為“LEFT”和“alphabetic”。它是一個可選參數。

以下示例說明了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); 
}

輸出：

textBounds-twoSizes

範例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 properites 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); 
  } 
}

輸出：

textBounds-interactive

在線編輯： https://editor.p5js.org/
環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
參考： https://p5js.org/reference/#/p5.Font/textBounds

相關用法

注：本文由純淨天空篩選整理自sayantanm19大神的英文原創作品 p5.js | p5.Font textBounds() Method。非經特殊聲明，原始代碼版權歸原作者所有，本譯文未經允許或授權，請勿轉載或複製。