在 Java 脚本中将图像添加到按钮中

Question

我需要使图像可点击（按钮）或将图像添加到按钮。

这是我要修改的代码

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 库。

提前谢谢你。

Answer 1

您可以通过 style() 设置 css 样式属性。例如设置“背景”属性:

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>

在 Java 脚本中将图像添加到按钮中

Adding Image into Button in Java Script

javascript

p5.js

visual-studio-code