使用p5.js实现遮罩或剪辑遮罩

Question

我希望使用一个形状（例如矩形）作为另一个形状（例如圆形或线条）在P5.js中的遮罩或裁剪路径。

我可以看到有关使用图像作为蒙版的解决方案，但没有关于形状的。似乎mask()不是形状的函数： https://p5js.org/reference/#/p5.Image/mask

- amcc

Answer 1

可以的。

• 使用createGraphics()创建一个额外的渲染上下文。
• 在draw循环中，绘制一些具有alpha通道的内容作为遮罩。例如，要在结果中可见的任何内容都必须使用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);
}

- low_rents

Answer 2

使用P5.js没有现成的方法来实现这一点。

目前，你的问题更多是一个数学问题，而不是一个P5.js问题。我建议搜索类似于“圆形矩形相交”的内容，可以得到大量结果，包括这个网址：Circle-Rectangle collision detection (intersection)

根据你想要做什么，你可以通过将形状绘制为图像，然后使用这些图像作为掩码来解决问题。但更有可能的是你需要自己计算相交部分。你可能会找到一个库来帮助你完成这个任务，但再次强调，P5.js没有简单的现成方法。

- Kevin Workman

---

感谢您详细的回复。我将这个特定的项目切换到了paper.js，因为它提供了比P5.js更有用的矢量操作。然而，P5.js在同一项目的其他方面特别有用。这似乎是一个对许多人非常有用的功能。 - amcc