p5.js | función textAscent()

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

Sintaxis:

textAscent()

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

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

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

Ejemplo 1: Este ejemplo muestra el ascenso del texto usando la fuente predeterminada.

let inputElem;
let currfontSize = 24;
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 ascent", 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 Ascent Line
    stroke("green");
    ascVal = textAscent() * fontScalar;
    line(0, fontBaseline - ascVal, width, fontBaseline - ascVal);
    noStroke();
  
    textSize(18);
    text("Text Ascent Value: " + ascVal, 20, 275);
  }
}

Producción:

textAscent-defaultFont

Ejemplo 2: Este ejemplo muestra el ascenso del texto usando una fuente personalizada.

let inputElem;
let currfontSize = 24;
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 ascent", 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 Ascent Line
    stroke("green");
    ascVal = textAscent() * fontScalar;
    line(0, fontBaseline - ascVal, width, fontBaseline - ascVal);
    noStroke();
      
    textSize(18);
    text("Text Ascent Value: " + ascVal, 20, 275);
  }
}

Producción:

textAscent-loadedFont