La función textWidth() se usa para calcular el ancho del texto dado como parámetro.
Sintaxis:
textWidth( theText )
Parámetros: esta función acepta un solo parámetro como se mencionó anteriormente y se describe a continuación:
- theText: contiene la string de la que se debe medir el ancho.
Valor devuelto: Devuelve un número que denota el ancho del texto dado.
Los siguientes ejemplos ilustran la función textWidth() en p5.js:
Ejemplo 1:
let sampleChar = "P"; let sampleLine = "This is a sample text"; // Canvas area creating function setup() { createCanvas(400, 200); textSize(20); text('The widths of the text are ' + 'displayed below:', 20, 20); // Checking textwidth sampleChar text(sampleChar, 20, 80); let charWidth = textWidth(sampleChar); text("Width of the character is: " + charWidth, 20, 100); // Checking textwidth sampleLine text(sampleLine, 20, 140); let lineWidth = textWidth(sampleLine); text("Width of the line is: " + lineWidth, 20, 160); }
Producción:
Ejemplo 2: uso de la medida del ancho del texto para subrayar el texto.
let sampleText = "This is a sample sentence."; // Canvas area creating function setup() { createCanvas(400, 200); textSize(20); text('Click the button to underline' + ' the text below', 20, 40); text(sampleText, 20, 80); // Creating button btn = createButton("Underline text"); btn.position(30, 120); btn.mousePressed(underlineText); } // Messuring text width and // creating underline function underlineText() { let width = textWidth(sampleText); line(20, 90, width + 20, 90); }
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/reference/#/p5/textWidth
Publicación traducida automáticamente
Artículo escrito por sayantanm19 y traducido por Barcelona Geeks. The original can be accessed here. Licence: CCBY-SA