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();
        }

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

Answer 1

您可能需要先将图像加载移动到 preload()（有关详细信息，请参阅 loadImage() reference）：

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

不清楚 boxes[i] 是什么，但希望它们是 p5.Image（或 p5.Graphics）实例，否则您将无法将它们用作掩码。

目前看起来您正在对同一图像应用蒙版：每个 mask() 调用将覆盖前一个框，因此只有最后一个框将用作蒙版。或者，您可以使用 p5.Graphics 实例使用 box[i] x, y, w, h 属性在黑色背景上绘制白框。

一旦 img 被加载，您可以制作一个副本，如果您想“重置”回原始图像，如果多次将蒙版应用到原始图像最终会完全腐蚀图像，您可以重复使用该副本。

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

1 个答案: