p5.js | beginContour()函数

p5.js 中的beginContour()函数用于在其他形状中创建负形状，也就是说，它可以用于移除具有给定顶点的形状的一部分。此函数开始记录必须删除的形状。它与停止记录顶点的endContour()函数一起使用。

内部形状的顶点必须以与外部形状相反的方向定义。如果外部形状的顶点按顺时针方向定义，则内部形状必须按逆时针方向定义。

此函数只能在beginShape()或endShape()函数内部使用。 translate() 、 rotate()和scale()等转换不适用于形状和轮廓。

句法：

beginContour()

参数：此函数不接受任何参数。

下面的程序说明了 p5.js 中的beginContour()函数：

示例 1：

function setup() {
  createCanvas(400, 300);
  textSize(16);
}
  
function draw() {
  clear();
  fill("black");
  text("The inside of the letter is cut"+
       " out using a countour", 10, 20);
  fill("yellow");
  
  // Starting the shape using beginShape()
  beginShape();
  
  // Specifying all the vertices
  // of the exterior shape
  vertex(50, 50);
  vertex(200, 50);
  vertex(200, 200);
  vertex(50, 200);
  
  // Starting a contour
  beginContour();
  
  // Specifying all the vertices
  // of the interior shape
  // in counter-clockwise order
  vertex(100, 175);
  vertex(175, 175);
  vertex(175, 75);
  vertex(100, 75);
  
  // Ending the contour
  endContour();
  
  // Ending the shape
  endShape(CLOSE);
  
  // Draw Circles for demonstration
  // Red ones for exterior shape
  fill("red");
  circle(50, 50, 10);
  circle(200, 50, 10);
  circle(200, 200, 10);
  circle(50, 200, 10);
  
  fill("blue");
  // Blue ones for interior shape
  circle(100, 175, 10);
  circle(175, 175, 10);
  circle(175, 75, 10);
  circle(100, 75, 10);
}

输出：

示例 2：

function setup() {
  createCanvas(400, 300);
  textSize(16);
}
  
function draw() {
  clear();
  background("green");
  text("The inside of the letter is cut out"+
       " using a countour", 10, 20);
  
  // Starting the shape using beginShape()
  beginShape();
  
  // Specifying all the vertices
  // of the exterior shape
  vertex(50, 250);
  vertex(50, 50);
  vertex(175, 50);
  vertex(175, 150);
  vertex(90, 150);
  vertex(90, 250);
  
  // Starting a contour
  beginContour();
  
  // Specifying all the vertices
  // of the interior shape
  // in counter-clockwise order
  vertex(90, 120);
  vertex(140, 120);
  vertex(140, 75);
  vertex(90, 75);
  
  // Ending the contour
  endContour();
  
  // Ending the shape
  endShape(CLOSE);
}

输出：

在线编辑器： https://editor.p5js.org/
环境设置： https://www.geeksforgeeks.org/p5-js-soundfile-object-installation-and-methods/

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