如何在p5.js和matter.js中用图像填充形状

Question

我正在尝试使用 p5.js 和 Matter.js

var Engine = Matter.Engine,
            World = Matter.World,
            Body = Matter.Body,
            Events = Matter.Events,
            Bodies = Matter.Bodies;
        var engine;
        var world;
        var box1;
        var boxes = [];

        var ground;

        var img;

        function setup() {
            createCanvas(window.innerWidth, window.innerHeight);
            engine = Engine.create();
            world = engine.world;
            Engine.run(engine);
            ground = new Boundary(window.innerWidth /2, window.innerHeight, window.innerWidth, 10);
            World.add(world, ground);
            img = loadImage("https://i.ibb.co/jZccXfR/image.png");
        }

            

        function mouseDragged() {
            boxes.push(new Ball(mouseX, mouseY, 20))
        }
        function mousePressed() {
            boxes.push(new Ball(mouseX, mouseY, 20))
        }

        function draw() {
            background(51);

            for(var i = 0; i < boxes.length; i++){
                boxes[i].show();
                img.mask(boxes[i]);
            }
            ground.show();
        }

这是我写的代码。 （绘图中没有遮罩功能，效果很好）
当我运行此代码时，出现错误“srcImage.loadPixels 不是函数”。 如何用图像填充形状？

Answer 1

您可能需要先将图像加载移动到

preload()

（有关更多详细信息，请参阅loadImage()参考）：

function preload(){
   img = loadImage("https://i.ibb.co/jZccXfR/image.png");
}

不清楚

boxes[i]

是什么，但希望它们是 p5.Image （或 p5.Graphics）实例，否则你将无法将它们用作遮罩。

目前看起来您正在将蒙版应用于同一张图像：每个

mask()

调用都会覆盖前一个，因此只有最后一个框将用作蒙版。或者，您可以使用 p5.Graphics 实例使用boxes[i] x、y、w、h 属性在黑色背景上绘制白色框。

加载

img

后，如果您想“重置”回原始图像（如果多次对原始图像应用蒙版最终完全侵蚀图像），您可以制作一个副本，可以重复使用该副本。