Блог

Мне нужно сделать изображение интерактивным (кнопка) или добавить изображение к кнопке.

Вот код, который я хочу изменить

 class Button{
    constructor(){
      this.button1 = createButton("Test");
      }
 
    display(){
      this.button1.position(displayWidth - 1150, displayHeight/2 - 300);
      this.button1.size(125.6,183.3);
      }
    
    this.button1.mousePressed(()=>{
      console.log("Worked!!");
  });
  

Я создаю код в Visual Studio, и у меня есть воспроизведение на p5 и p5.js библиотека.

Заранее благодарю вас.

Вы можете задать свойство стиля css с помощью style() . Например, установите свойство «background»:

 button.style('background', "url(https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/apple64.png)");
  

 let button;
function setup() {
    createCanvas(100, 100);
    background(0);
    button = createButton("Test");
    button.style('color', "white");
    button.style('background', "url(https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/apple64.png)");
    button.style('width', "64px");
    button.style('height', "64px");
    button.position(19, 19);
    button.mousePressed(buttonPressed);
}

function buttonPressed() {
    button.style('background', "url(https://raw.githubusercontent.com/Rabbid76/graphics-snippets/master/resource/texture/banana64.png)");
}  

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