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

Question

我想在P5.js中使用一个形状（例如一个矩形）作为另一个形状（例如圆圈或直线）的遮罩或剪切路径

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

Answer 1

使用P5.js开箱即用的方法无法实现。

现在你的问题更多的是数学问题而不是P5.js问题。我建议您搜索类似＆＃34;圆形矩形交叉点＆＃34;大量的结果，包括这一个：Circle-Rectangle collision detection (intersection)

根据您的目的，您可以将图形绘制到图像中，然后将这些图像用作蒙版。但你更有可能自己要计算交叉点。您或许可以找到一个能够为您完成此任务的库，但同样，P5.js并不是一个简单易用的方式。

Answer 2

是的，可以。

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

这是一个工作代码示例：

image(myImage, x, y, w, h)