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); 
}

输出：

beginContour-with-circles

范例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); 
}

输出：
beginContour-letter-P

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

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

相关用法

注：本文由纯净天空筛选整理自sayantanm19大神的英文原创作品 p5.js | beginContour() Function。非经特殊声明，原始代码版权归原作者所有，本译文未经允许或授权，请勿转载或复制。