使用 p5.js 进行遮罩或剪切蒙版

Question

我想在 P5.js

中使用一种形状（例如矩形）作为另一种形状（例如圆形或直线）的蒙版或剪切路径

我可以看到将图像用作蒙版而非形状的解决方案。似乎 mask() 不是形状的函数： https://p5js.org/reference/#/p5.Image/mask

Answer 1

无法使用 P5.js 开箱即用。

现在你的问题更像是一个数学问题，而不是 P5.js 问题。我建议搜索类似 "circle rectangle intersection" 的内容以获得大量结果，包括这个：Circle-Rectangle 碰撞检测（交叉点）

根据您想执行的操作，您可以将形状绘制成图像，然后将这些图像用作蒙版。但更有可能的是，您将不得不自己计算交点。您也许可以找到一个为您执行此操作的库，但同样，P5.js.

没有简单的开箱即用方式

Answer 2

是的，你可以。

使用 createGraphics() 创建额外的渲染上下文。
在 draw 循环中绘制一些东西到这个上下文中，这将是你的面具。结果中应该可见的任何内容都必须着色使用 Alpha 通道，例如 fill('rgba(0, 0, 0, 1)'.
将蒙版应用于原始图像 myImage.mask(circleMask)。
您的原始图像现已被遮罩修改，将其渲染到屏幕：image(myImage, x, y, w, h)

这是一个工作代码示例：

let circleMask;
let myImage;

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

  circleMask = createGraphics(128, 128);

  myImage = loadImage('FzFH41IucIY.jpg');
}

function draw() {
  background(255);

  circleMask.fill('rgba(0, 0, 0, 1)');

  circleMask.circle(64, 64, 128);

  myImage.mask(circleMask);

  image(myImage, 200 - 64, 200 - 64, 128, 128);
}

使用 p5.js 进行遮罩或剪切蒙版

masking, or clipping mask with p5.js

clipping

mask

masking

p5.js