如何用图像填充P5.js形状 [英] How to Fill P5.js Shape with an Image

问题描述

我已使用eginShape、endShape和curveVertex创建了一个形状。我的代码如下所示：

function setup() {
 createCanvas(400, 400);
}

function draw() {
 background(220);

 strokeWeight(5);
 point(84, 91);
 point(68, 19);
 point(21, 17);
 point(32, 91);
 strokeWeight(1);

 fill(0); // HOW TO FILL WITH IMAGE
 beginShape();
 curveVertex(84, 91);
 curveVertex(84, 91);
 curveVertex(68, 19);
 curveVertex(21, 17);
 curveVertex(32, 91);
 curveVertex(32, 91);
 endShape(CLOSE);
}

我不想用颜色填充形状，而是想用图像填充它。P5.js可以吗？

推荐答案

您可以使用mask()函数来完成。在您的示例中，创建一个图形对象并绘制所需的形状，然后将其用作图像的蒙版：

数据-lang="js"数据-隐藏="假"数据-控制台="真"数据-巴贝尔="假">

let img
let shape 

function preload(){
 img = loadImage('https://picsum.photos/100')
}

function setup() {
 createCanvas(300, 100);
 
 // Create new p5 graphics object
 shape = createGraphics(100, 100);
 
 background(220);

 // Draw the shape
 shape.strokeWeight(5);
 shape.point(84, 91);
 shape.point(68, 19);
 shape.point(21, 17);
 shape.point(32, 91);
 shape.strokeWeight(1);

 shape.fill(0);
 shape.beginShape();
 shape.curveVertex(84, 91);
 shape.curveVertex(84, 91);
 shape.curveVertex(68, 19);
 shape.curveVertex(21, 17);
 shape.curveVertex(32, 91);
 shape.curveVertex(32, 91);
 shape.endShape(CLOSE);
 
 image(img, 0, 0)
 image(shape, 100, 0)
 
 // Use the shape as a mask
 img.mask(shape)
 
 image(img, 200, 0)
}

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

这篇关于如何用图像填充P5.js形状的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！