如何移动填充图像的椭圆来掩盖相似的背景？

Question

我是来自意大利的超级早期编码用户。 我想出了一个在他们的网站上推广公司徽标的想法，我几乎达到了目标，所以我分享这个问题。

这个想法是当鼠标/光标在图像上移动时获得一种剪贴蒙版效果 到目前为止，我已经编写了一个可以处理静止椭圆的代码。

当我将椭圆的位置参数设置为 mouseX 和 mouseY 时，如果不只是开始时出现一点小故障，效果就不起作用。 我怎样才能让它按预期工作？

在这里你可以找到我现在拥有的链接： https://editor.p5js.org/francesco.ficini.designer/full/FLBuhggW-

这里是代码：

let img;
let imgbg2;
let maskImage;

function preload() {
  img = loadImage("NeroP.jpg");
  imgbg2 = loadImage("RossoP.jpg");
}
function setup() {
  createCanvas(400, 225);
  img.mask(img);
}

function draw() {
  background(imgbg2, 0, 0);
  //Images
  image(imgbg2, 0, 0);
  image(img,0,0);

  // Ellipse Mask
  maskImage = createGraphics(400, 225);
  maskImage.ellipse(200, 100, 50, 50);
  imgbg2.mask(maskImage);
  image(imgbg2, 0, 0);
}

Answer 1

p5.Image.mask

函数的特点是它会修改被遮罩的图像。这意味着任何被遮罩清除的像素都将永远消失。因此，如果您想动态更改蒙版，则需要复制原始蒙版，并在更改时重新应用修改后的蒙版。

此外，您需要避免在

draw()

函数中创建图像和图形对象，因为这可能会导致过多的内存分配。相反，创建一组图形/图像并重复使用它们。

let img;
let imgbg2;
let maskImage;
let maskResult;

function preload() {
  img = loadImage("https://www.paulwheeler.us/files/NeroP.jpeg");
  imgbg2 = loadImage("https://www.paulwheeler.us/files/RossoP.jpeg");
}

function setup() {
  createCanvas(400, 225);
  // Create graphics and image buffers in setup
  maskImage = createGraphics(imgbg2.width, imgbg2.height);
  maskResult = createImage(imgbg2.width, imgbg2.height);
}

function mouseMoved() {
  if (maskResult) {
    maskImage.clear();
    // Ellipse
    maskImage.ellipse(mouseX, mouseY, 50, 50);
    // Copy the original imgbg2 to the maskResult image
    maskResult.copy(
      imgbg2,
      0, 0, imgbg2.width, imgbg2.height,
      0, 0, imgbg2.width, imgbg2.height
    );
    // apply the mask to maskResult
    maskResult.mask(maskImage);
  }
}

function draw() {
  //Immagini
  image(img, 0, 0);
  // draw the masked version of the image
  image(maskResult, 0, 0);
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/1.4.0/p5.js"></script>