當前位置: 首頁>>編程示例 >>用法及示例精選 >>正文

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

p5.j​​s 中的 rectMode() 函數用於更改賦予 rect() 函數的參數的解釋方式。這會修改繪製矩形的位置。

這個函數可以有四種模式：

  • CORNER:此模式將前兩個參數解釋為形狀的左上角。第三個和第四個參數是它的寬度和高度。這是默認模式。
  • CORNERS:此模式將前兩個參數解釋為左上角，將其他兩個參數解釋為對角的位置。
  • CENTER:此模式將前兩個參數解釋為形狀的中心點。第三個和第四個參數指定形狀的寬度和高度。
  • RADIUS:此模式將前兩個參數解釋為形狀的中心點。第三個和第四個參數指定形狀寬度和高度的一半。

用法:

rectMode( mode )

參數：該函數接受如上所述和以下描述的單個參數。

  • mode:它是一個常量，它定義了要使用的模式。它可以具有 CORNER、CORNERS、CENTER 或 RADIUS 的值。

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

例：


let currMode;
  
function setup() {
  createCanvas(500, 400);
  textSize(16);
  
  // Define all the rectModes()
  let rectModes = [CORNER, CORNERS, CENTER, RADIUS];
  let index = 0;
  currMode = rectModes[index];
  
  // Define a button to switch between the modes
  let closeBtn = createButton("Change rectMode");
  closeBtn.position(220, 40);
  closeBtn.mouseClicked(() => {
    if (index < rectModes.length - 1) index++;
    else index = 0;
    currMode = rectModes[index];
  });
}
  
function draw() {
  clear();
  text("Click on the button to"+
       " change the rectMode()", 20, 20);
  fill("green");
  
  // Draw the first rectangle with default mode
  rectMode(CORNER);
  rect(100, 100, 100, 100);
  
  fill("red");
  
  // Set the rectMode according to the defined mode
  rectMode(currMode);
  
  // Draw the second rectangle according to the
  // selected rectMode() and different dimensions
  rect(100, 100, 50, 50);
  
  // Draw circles to demonstrate corners of
  // the first rectangle
  circle(100, 100, 10);
  circle(200, 100, 10);
  circle(100, 200, 10);
  circle(200, 200, 10);
  
  fill("black");
  text("Current Mode:" + currMode, 20, 250);
  
  // Show details of parameter according to selected mode
  switch (currMode) {
    case CORNER:
      text("1st Parameter:upper-left"+
           " corner x coord", 20, 280);
      text("2nd Parameter:upper-left"+
           " corner y coord", 20, 300);
      text("3rd Parameter:width", 20, 320);
      text("4th Parameter:height", 20, 340);
      break;
    case CORNERS:
      text("1st Parameter:upper-left corner"+
           " x coord", 20, 280);
      text("2nd Parameter:upper-left corner"+
           " y coord", 20, 300);
      text("3rd Parameter:opposite corner x", 20, 320);
      text("4th Parameter:opposite corner y", 20, 340);
      break;
    case CENTER:
      text("1st Parameter:shape's center"+
           " point x coord", 20, 280);
      text("2nd Parameter:shape's center"+
           " point y coord", 20, 300);
      text("3rd Parameter:width", 20, 320);
      text("4th Parameter:height", 20, 340);
      break;
    case RADIUS:
      text("1st Parameter:shape's center"+
           " point x coord", 20, 280);
      text("2nd Parameter:shape's center"+
           " point y coord", 20, 300);
      text("3rd Parameter:half of shape's"+
           " width", 20, 320);
      text("4th Parameter:half of shape's"+
           " height", 20, 340);
      break;
    default:
      break;
  }
}

輸出：

rectMode-allModes

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

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

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


相關用法


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