[英]Change image on button click in p5.js
我有填充单元格的二维数组。 我希望这个单元格在按钮按下时更新图像。 我想将值传递给构造函数,但出现问题并且它现在不起作用。我的想法是传递给构造函数图像值 this.img = img 然后在 show_cell function 中将图像值更改为 this.img 值。 当我按下按钮时,它启动 function 我将图像添加到构造函数并显示网格。 这些都不起作用。 请帮忙,这让我很头疼。
您必须在draw()
中绘制网格。 注意, draw()
被系统不断调用,重绘整个window,就是应用循环。 在开始draw
你必须设置背景颜色( background()
),然后你必须绘制整个场景。
按下按钮时设置 state 变量( show_grid
):
let show_grid = false;
function a(){
show_grid = true;
}
根据变量的 state 绘制网格:
function draw() {
background(255);
if (show_grid) {
grid.display();
}
fill(255);
stroke(0);
let fps = frameRate();
text("FPS: " + fps.toFixed(0), 10, height - 10);
}
如果您想通过单击将图像更改为按钮,那么您ve to use a variable (eg
current_img`)来绘制单元格:
class Cell {
constructor (column, row, size) {
this.x = column;
this.y = row;
this.w = size;
}
show_cell () {
image(current_img, this.x * this.w , this.y * this.w , this.w , this.w );
}
}
单击按钮时,必须更改current_image
:
function a(){
show_grid = true;
current_img = img1;
}
function b(){
show_grid = true;
current_img = img2;
}
请参阅示例:
var grid; var current_img; var img1; var img2; function preload(){ img1 = loadImage('https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/fish64.png'); img2 = loadImage('https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/ball64.png'); } function setup() { const background_btn1 = select('#BgCategory1-btn1'); background_btn1.mousePressed(a); const background_btn2 = select('#BgCategory1-btn2'); background_btn2.mousePressed(b); let cnv = createCanvas(1000, 1000); cnv.parent('canvas-holder'); grid = new Grid(40); current_img = img1; } function draw() { background(128); if (show_grid) { grid.display(); } fill(255); stroke(0); let fps = frameRate(); text("FPS: " + fps.toFixed(0), 10, 30); } let show_grid = false; function a(){ show_grid = true; current_img = img1; } function b(){ show_grid = true; current_img = img2; } class Grid { constructor (cellSize) { this.cellSize = cellSize; this.numberOfColumns = floor(width / this.cellSize); this.numberOfRows = floor(height / this.cellSize); this.cells = new Array(this.numberOfColumns); for (var column = 0; column < this.numberOfColumns; column ++) { this.cells[column] = new Array(this.numberOfRows); } for (var column = 0; column < this.numberOfColumns; column ++) { for (var row = 0; row < this.numberOfRows; row++) { this.cells[column][row] = new Cell(column, row, cellSize) } } } display () { for (var column = 0; column < this.numberOfColumns; column ++) { for (var row = 0; row < this.numberOfRows; row++) { this.cells[column][row].show_cell(); } } } } class Cell { constructor (column, row, size) { this.x = column; this.y = row; this.w = size; } show_cell () { image(current_img, this.x * this.w, this.y * this.w, this.w, this.w ); } }
#BgCategory1-btn1 { position: absolute; top: 0; left: 0; } #BgCategory1-btn2 { position: absolute; top: 0; left: 10%; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/p5.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.9.0/addons/p5.dom.js"></script> <button id= "BgCategory1-btn1" >image 1</button> <button id= "BgCategory1-btn2" >image 2</button> <div id = "canvas-holder"></div>
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.