Создание кнопок в for-l oop, каждая из которых имеет свою функцию mousePressed в p5 - PullRequest
Новая
       4

Создание кнопок в for-l oop, каждая из которых имеет свою функцию mousePressed в p5

1 голос
/ 27 февраля 2020

Я хочу иметь четыре кнопки. Каждая кнопка имеет имя и значение. Когда каждая из кнопок нажата, я хочу выполнить функцию, которая принимает значение кнопки в качестве параметра.

Функция, которую я хочу вызвать, на самом деле не импортируется, но, скажем, 

 function fun(value) {
     console.log(value)
}

У меня это работает с использованием этого кода. 

  //   // create 4 buttons
  createButton('fabrics', 'fabrics')
    .position(50, 50 + 25 * 1)
    .mousePressed(function() {
      fun('fabrics');
    })

  createButton('leather', 'leather')
    .position(50, 50 + 25 * 2)
    .mousePressed(function() {
      fun('leather');
    })

  createButton('wood', 'wood')
    .position(50, 50 + 25 * 3)
    .mousePressed(function() {
      fun('wood');
    })

  createButton('metal', 'metal')
    .position(50, 50 + 25 * 4)
    .mousePressed(function() {
      fun('metal');
    })

Это просто кажется абсолютно глупым делать это таким образом и не использовать for-l oop. Я попробовал это в for-l oop: 

  //   // create 4 buttons
  names = ['fabric', 'leather', 'wood', 'metal'];
  for (let i = 0; i < 4; i++) {
    name = names[i]
    createButton(name, name)
      .position(50, fabric[0].height + 25 * (i + 1))
      .mousePressed(function() {fun(name);})
  }

Это создает 4 кнопки в нужном положении, однако mousePressed запускает функцию fun с metal в качестве параметра. Другими словами, хотя position зацикливается, как я и ожидал, mousePressed для каждой кнопки обновляется до последней fun(name) для каждой итерации.

Какой лучший способ сделать это в p5?

1 Ответ

1 голос
/ 27 февраля 2020

Чтобы дать каждой кнопке свою собственную нажатую функцию мыши, вам нужно обернуть эту функцию в замыкание. Попробуйте что-то вроде этого: 

function setup() {
  createCanvas(400, 400);
  background(220);
 var names = ['fabric', 'leather', 'wood', 'metal'];
  for (let i = 0; i < 4; i++) {
    name = names[i]
    createButton(name, name)
      .position(50, 125 + 25 * (i + 1))
      .mousePressed(createMousePressedFunction(name))
  }
}

function createMousePressedFunction(name){
return function() {fun(name);}
}

 function fun(value) {
     console.log(value)
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/p5.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/p5.js/0.8.0/addons/p5.dom.min.js"></script>
...