p5.js | imageMode()函数

imageMode()函数用于设置图像的图像模式。图像模式通过改变传递给image()函数的参数的解释方式来定义图像在画布中的位置。

句法：

imageMode( mode )

参数：此函数接受定义要使用的模式的单个参数模式。它可以具有以下值：

• CORNER：此模式将给 image() 的第二个和第三个参数解释为图像的左上角。
• CORNERS：此模式将传递给 image() 的第二个和第三个参数解释为图像的左上角，第四个和第五个参数解释为图像的右下角。
• CENTER：此模式将传递给 image() 的第二个和第三个参数解释为图像的中心点。另外，如果指定了第四个和第五个参数，它们被用作图像的宽度和高度。

下面的例子说明了 p5.js 中的imageMode()函数：

例子：

function preload() {
  img = loadImage('sample-image.png');
}
  
function setup() {
  imageModes = [
    CORNER,
    CORNERS,
    CENTER
  ];
  i = 0;
  currMode = imageModes[i];
  
  createCanvas(600, 400);
  textSize(22);
  
  // Create a button for the switching
  // the imageMode
  switchBtn = createButton("Change imageMode");
  switchBtn.position(30, 400)
  switchBtn.mousePressed(switchMode);
}
  
function draw() {
  clear();
  text("Click on the button change the current"+
                           " imageMode", 20, 20);
  text("Current imageMode: " + currMode, 20, 40);
  
  // Creating a rectangle to demonstrate
  // the location of the image
  rect(150, 150, 200, 200);
  
  // Setting the imageMode
  imageMode(currMode);
  
  // Drawing the image
  image(img, 150, 150, 200, 200);
}
  
function switchMode() {
  // Change the current imageMode
  if (i < imageModes.length - 1)
    i++;
  else
    i = 0;
  currMode = imageModes[i];
}

输出：

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

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

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