El método textBounds() de p5.Font en p5.js es devolver un cuadro delimitador estrecho para la string dada usando la fuente en la que se usa. Este método solo admite líneas individuales.
Sintaxis:
textBounds( line, x, y, [fontSize], [options] )
Parámetros: esta función acepta cinco parámetros, como se mencionó anteriormente y se describe a continuación:
- línea: es una string que denota la línea de texto para la que se debe encontrar el cuadro delimitador.
- x: Es un número que denota la posición x.
- y: es un número que denota la posición y.
- fontSize: Es un Número que denota el tamaño de fuente a utilizar. El valor predeterminado es 12. Es un parámetro opcional.
- opciones: es un objeto que se puede utilizar para especificar opciones de tipo abierto. Las fuentes Opentype contienen opciones como alineación y opciones de línea de base. Los valores predeterminados son «IZQUIERDA» y «alfabético». Es un parámetro opcional.
Los siguientes ejemplos ilustran la función textBounds() en p5.js:
Ejemplo 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); }
Producción:
Ejemplo 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); } }
Producción:
Editor en línea: https://editor.p5js.org/
Configuración del entorno: https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
Referencia: https://p5js.org/ referencia/#/p5.Font/textBounds
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA