当前位置: 首页>>代码示例 >>用法及示例精选 >>正文


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。非经特殊声明,原始代码版权归原作者所有,本译文未经允许或授权,请勿转载或复制。