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

p5.js中p5.Image的resize()方法用於將圖像調整為給定的寬度和高度。通過使用0作為寬度和高度的值之一，可以按比例縮放圖像。

用法:

resize( width, height )

參數：該函數接受上麵提到和下麵描述的兩個參數。

width:它是一個數字，指定調整大小後的圖像的寬度。
height:它是一個數字，指定調整大小後的圖像的高度。

以下示例說明了p5.js中的resize()方法：

範例1：

Javascript

function preload() { 
    img_orig = loadImage("sample-image.png"); 
} 
  
function setup() { 
    createCanvas(500, 400); 
    textSize(20); 
  
    heightSlider = 
      createSlider(0, 500, 200); 
    heightSlider.position(30, 300); 
  
    widthSlider = 
      createSlider(0, 500, 400); 
    widthSlider.position(30, 340); 
} 
  
function draw() { 
    clear(); 
  
    text("Move the sliders to resize the image", 
      20, 20); 
    image(img_orig, 20, 40); 
  
    new_height = heightSlider.value(); 
    new_width = widthSlider.value(); 
      
    img_orig.resize(new_width, new_height); 
}

輸出：

範例2：

Javascript

function preload() { 
    img_orig = loadImage("sample-image.png"); 
} 
  
function setup() { 
    createCanvas(500, 400); 
    textSize(20); 
  
    sizeSlider = 
      createSlider(0, 500, 250); 
    sizeSlider.position(30, 240); 
} 
  
function draw() { 
    clear(); 
  
    text("Move the slider to resize " + 
      "the image proportionally", 20, 20); 
    image(img_orig, 20, 40); 
  
    new_size = sizeSlider.value(); 
      
    // Setting one of the values as 0, 
    // for proportional resizing 
    img_orig.resize(new_size, 0); 
}

輸出：

在線編輯： https://editor.p5js.org/
環境設置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/
參考： https://p5js.org/reference/#/p5.Image/resize

相關用法

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