p5.js | rectMode()函数

p5.js 中的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;
  }
}

输出：

在线编辑器： https://editor.p5js.org/

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

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