Изменить изображение по нажатию кнопки в p5.js - PullRequest
Новая
       54

Изменить изображение по нажатию кнопки в p5.js

1 голос
/ 03 ноября 2019

У меня есть 2-х мерный массив, заполненный ячейками. Я хочу, чтобы эта ячейка обновляла изображение при нажатии кнопки. Я хочу передать значение конструктору, но что-то идет не так, и его nowt работает. Моя мысль состояла в том, чтобы передать значение изображения конструктора this.img = img, а затем в функции show_cell изменить значение изображения на значение this.img. Когда я нажимаю кнопку, запускается функция добавления изображения в конструктор и отображения сетки. не из этого работает. Пожалуйста, помогите, у меня болит голова.

1 Ответ

1 голос
/ 03 ноября 2019

Вы должны нарисовать сетку в draw(). Обратите внимание, draw() постоянно вызывается системой и перерисовывает все окно, это цикл приложения. В начале draw Вы должны установить цвет фона (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.g 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>
...