使用 p5.js 屏蔽或剪切蒙版答案

【问题标题】：masking, or clipping mask with p5.js使用 p5.js 屏蔽或剪切蒙版
【发布时间】：2018-09-17 20:18:54
【问题描述】：

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

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

【问题讨论】：

标签： mask masking p5.js clipping

【解决方案1】：

是的，你可以。

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

【讨论】：

【解决方案2】：

没有办法通过 P5.js 开箱即用地做到这一点。

现在您的问题更像是数学问题，而不是 P5.js 问题。我建议搜索诸如“圆形矩形交点”之类的大量结果，包括这个：Circle-Rectangle collision detection (intersection)

根据您想要做什么，您可以将形状绘制到图像上，然后将这些图像用作蒙版。但更有可能您将不得不自己计算交叉点。您也许可以找到一个为您执行此操作的库，但同样，P5.js 并没有一种简单的开箱即用方式。

【讨论】：

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