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

问题描述

我正在尝试使用 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,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 不是函数”。如何用图像填充形状？

解决方法

您可能需要先将图像加载移动到 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 被加载，您可以制作一个副本，如果您想“重置”回原始图像，如果多次将蒙版应用到原始图像最终会完全腐蚀图像，您可以重复使用该副本。

matter.js p5.js