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

p5.js中的textAscent()函數用於查找當前字體以其當前大小的上升。上升可以定義為基線上方最高下降字符的距離(以像素為單位)。

用法:

textAscent()

參數：此函數沒有參數。

返回值：它返回一個數字，表示以像素為單位的上升。

以下示例說明了p5.js中的textAscent()函數：

範例1：本示例顯示使用默認字體的文本上升。

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); 
  } 
}

輸出：

textAscent-defaultFont

範例2：本示例顯示使用自定義字體的文本上升。

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); 
  } 
}

輸出：

textAscent-loadedFont

在線編輯： https://editor.p5js.org/

環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

參考： https://p5js.org/reference/#/p5/textAscent

相關用法

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