如何解决如何在 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
被加载,您可以制作一个副本,如果您想“重置”回原始图像,如果多次将蒙版应用到原始图像最终会完全腐蚀图像,您可以重复使用该副本。
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。