p5.js中为何特定反转裁剪（invert clip）无法应用到形状？

在p5.js中使用beginClip({invert: true})对特定形状应用反转裁剪时失效，但关闭反转或对其他形状（椭圆、简单图形、带贝塞尔曲线的普通图形）应用反转裁剪均正常。

原因分析 #

该问题大概率是**裁剪路径的缠绕顺序（Winding Order）**导致的。p5.js的裁剪区域判断依赖路径绘制方向（顺时针/逆时针），当路径方向与invert选项的预期不匹配时，会出现反转裁剪未生效的情况；此外，部分复杂贝塞尔路径的内部区域判定可能存在偏差，导致反转裁剪逻辑异常。

解决方案 #

方案1：反转裁剪路径的顶点顺序 #

调整裁剪路径的绘制方向（顺时针改逆时针，反之亦然），修正区域判定逻辑：

修改后的裁剪代码片段：

beginClip({
  invert: true
});
beginShape();
// 反转原路径的顶点顺序与贝塞尔曲线方向
vertex(332.83, 125.59);
bezierVertex(358.67, 125.59, 364.44, 143.45, 364.44, 153.9);
vertex(303.01, 153.9);
bezierVertex(303.01, 143.18, 308.92, 125.59, 332.83, 125.59);
endShape(CLOSE);
endClip();

方案2：手动实现反转裁剪（更可靠） #

通过绘制「画布区域减去目标裁剪形状」的方式实现反转裁剪，避免依赖invert选项的内部判定：

完整测试代码：

function setup() {
  createCanvas(400, 400);
  background(200);

  push();
  translate(-130, 50);

  // 手动实现反转裁剪：画布区域减去目标形状
  beginClip();
  beginShape();
  // 先绘制覆盖整个画布的基础区域
  vertex(0, 0);
  vertex(width, 0);
  vertex(width, height);
  vertex(0, height);
  // 使用beginContour挖掉原裁剪形状
  beginContour();
  vertex(332.83, 125.59);
  bezierVertex(308.92, 125.59, 303.01, 143.18, 303.01, 153.9);
  vertex(364.44, 153.9);
  bezierVertex(364.44, 143.45, 358.67, 125.59, 332.83, 125.59);
  endContour();
  endShape(CLOSE);
  endClip();

  // 绘制目标形状
  beginShape();
  vertex(397.15, 174.93);
  vertex(303.42, 174.93);
  bezierVertex(304.66, 187.99, 317.71, 194.58, 339.15, 194.58);
  bezierVertex(371.31, 194.58, 394.26, 186.33, 395.5, 185.92);
  vertex(395.5, 212.86);
  bezierVertex(394.54, 213.27, 376.81, 221.79, 337.23, 221.79);
  bezierVertex(289.95, 221.79, 267.96, 199.66, 267.96, 162.42);
  bezierVertex(267.96, 125.18, 292.42, 100.85, 332.56, 100.85);
  bezierVertex(379.15, 100.85, 397.43, 132.32, 397.43, 165.17);
  bezierVertex(397.43, 168.61, 397.43, 172.18, 397.16, 174.93);
  endShape(CLOSE);

  pop();
}

内容的提问来源于stack exchange，提问作者Pedro Gonçalves