p5.js | Descenso de texto() Función

La función textDescent() en p5.js se usa para averiguar el descenso de la fuente actual en su tamaño actual. El descenso se puede definir como la distancia del carácter descendente más largo por debajo de la línea de base, en píxeles.

Sintaxis:

textDescent()

Parámetros: Esta función no tiene parámetros.

Valor devuelto: Devuelve un número que denota el descenso en píxeles.

El siguiente ejemplo ilustra la función textDescent() en p5.js:

Ejemplo 1: Este ejemplo muestra el descenso del texto utilizando la fuente predeterminada.

let inputElem;
let currfontSize = 28;
let fontBaseline = 150;
  
function setup() {
  createCanvas(600, 300);
  
  // Create button to increase font size
  let fontBtn = createButton("Increase Font Size");
  fontBtn.mouseClicked(() => {
    currfontSize += 1;
  });
  fontBtn.position(20, 70);
  
  // Create input box
  inputElem = createInput("");
  inputElem.position(20, 40);
}
  
function draw() {
  clear();
  textSize(18);
  text("Write in input to change the text and observe text descent", 10, 20);
  textSize(currfontSize);
  
  // This value depends on the font used
  let fontScalar = 0.8;
  
  // Display text and line if input not empty
  let enteredText = inputElem.value();
  if (enteredText != "") {
    text(enteredText, 20, fontBaseline);
  
    // Draw the Base line
    stroke("black");
    line(0, fontBaseline, width, fontBaseline);
  
    // Draw the Descent Line
    stroke("green");
    descVal = textDescent() * fontScalar;
    line(0, fontBaseline + descVal, width, fontBaseline + descVal);
    noStroke();
  
    textSize(18);
    text("Text Descent Value: " + descVal, 20, 275);
  }
}

Producción:

textDescent-defaultFont

Ejemplo 2: Este ejemplo muestra el descenso del texto utilizando una fuente personalizada.

let inputElem;
let currfontSize = 28;
let fontBaseline = 150;
let newFont;
  
function preload() {
  newFont = loadFont("fonts/Montserrat.otf");
}
  
function setup() {
  createCanvas(600, 300);
  
  textFont(newFont);
  
  // Create button to increase font size
  let fontBtn = createButton("Increase Font Size");
  fontBtn.mouseClicked(() => {
    currfontSize += 1;
  });
  fontBtn.position(20, 70);
  
  // Create input box
  inputElem = createInput("");
  inputElem.position(20, 40);
}
  
function draw() {
  clear();
  textSize(18);
  text("Write in input to change the text and observe text descent", 10, 20);
  textSize(currfontSize);
  
  // This value depends on the font used
  let fontScalar = 0.8;
  
  // Display text and line if input not empty
  let enteredText = inputElem.value();
  if (enteredText != "") {
    text(enteredText, 20, fontBaseline);
  
    // Sraw the Base line
    stroke("black");
    line(0, fontBaseline, width, fontBaseline);
  
    // Draw the Descent Line
    stroke("green");
    descVal = textDescent() * fontScalar;
    line(0, fontBaseline + descVal, width, fontBaseline + descVal);
    noStroke();
      
    textSize(18);
    text("Text Descent Value: " + descVal, 20, 275);
  }
}

Producción:

textDescent-loadedFont