在 p5.js 中单击按钮更改图像

Question

我有一个充满单元格的二维数组。我希望此单元格在按下按钮时更新图像。我想将值传递给构造函数，但出了点问题，它现在 working.my 认为是传递给构造函数图像值 this.img = img 然后在 show_cell 函数中将图像值更改为 this.img 值。当我按下按钮时，它开始运行，我将图像添加到构造函数并显示网格。这些都不起作用。求助，很头疼

Answer 1

你必须在 draw(). Note, draw() is continuously called by the system and redraws the entire window, it is the application loop. At the begin of draw You've to set the background color (background()) 中绘制网格，然后你必须绘制整个场景。

按下按钮时设置一个状态变量（show_grid）：

let show_grid = false;
function a(){
    show_grid = true;
}

根据变量的状态绘制网格：

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 (e.gcurrent_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>

在 p5.js 中单击按钮更改图像

Change image on button click in p5.js

javascript

processing

p5.js