按下按钮时更改图片

Question

告诉我如何在点击图片时切换到下一张。我使用带有常规按钮的库“ControlP5，cp5.addbutton”，我可以在其中没有图片。我有两个例子，有一个普通的按钮和一张图片，我使用不同的方式通过悬停鼠标并单击来更改图片，以便清楚地向您展示。

"minutesss1" - 带有 public void minutesss1() 的常规按钮，它使用 .setCaptionLabel("ВЫКЛ")。 "minutesss2" - 我认为如何用于图片 .setCaptionLabel("ВЫКЛ") / 不需要 ?????

完整示例代码：

import controlP5.*;
ControlP5 cp5;
int min=0;
Button minutess1;
Button minutess2;

void setup() {
  size(700,400);
  
  PFont fontn = createFont("Times New Roman",18);
  cp5 = new ControlP5(this);
  PFont p = createFont("Times New Roman",18);
  ControlFont font=new
  ControlFont(p);
  cp5.setFont(font);
  
    minutess1 = cp5.addButton("minutesss1")
    .setCaptionLabel("ВЫКЛ")
    .setPosition(200,200)
    .setSize(99,25);
    
    PImage[] imgs1 = {loadImage("0.png"),loadImage("1.png"),loadImage("2.png")}; // ,loadImage("3.png"),loadImage("4.png"),loadImage("5.png"),loadImage("6.png")
    minutess2 = cp5.addButton("minutesss2")
    //.setCaptionLabel("ВЫКЛ")
    .setPosition(400,200)
    .setImages(imgs1);
    minutess2.setSize(99,25);
  
textFont(fontn);}
  public void minutesss1() {
  min+=10;
 if (min>60) {min=0; minutess1.setCaptionLabel("ВЫКЛ"); }
  else  minutess1.setCaptionLabel(str(min)+" Мин");}
void draw(){
  background(0);
  fill(255);}

Answer 1

很高兴您发布了这样格式的代码。如果之前在Processing(Ctrl+T)中格式化就更好了，方便阅读。

很难完全理解你的问题。如果您使用的是翻译工具，您可以尝试将长短语分成更小、更简单的句子。希望翻译工具越做越好

据我了解这里有两个问题：

如何从第二个按钮调用适用于第一个按钮的相同分钟更新函数？
如何使用自定义图像为第二个按钮设置外观？

第一个问题可以通过多种方式解决。这里有几个选项：

选项 1： 使用 controlEvent，它会在更新任何 controlP5 组件时自动调用。您可以检查按下了哪个按钮并相应地调用函数：

import controlP5.*;
ControlP5 cp5;
int min=0;
Button minutess1;
Button minutess2;

void setup() {
  size(700, 400);

  PFont fontn = createFont("Times New Roman", 18);
  cp5 = new ControlP5(this);
  PFont p = createFont("Times New Roman", 18);
  ControlFont font=new
    ControlFont(p);
  cp5.setFont(font);

  minutess1 = cp5.addButton("minutesss1")
    .setCaptionLabel("ВЫКЛ")
    .setPosition(200, 200)
    .setSize(99, 25);

  //PImage[] imgs1 = {loadImage("0.png"), loadImage("1.png"), loadImage("2.png")}; // ,loadImage("3.png"),loadImage("4.png"),loadImage("5.png"),loadImage("6.png")
  PImage[] imgs1 = {getImage(99,25,color(0,0,192)),
                    getImage(99,25,color(0,0,240)),
                    getImage(99,25,color(0,0,120))};
  minutess2 = cp5.addButton("minutesss2")
    //.setCaptionLabel("ВЫКЛ")
    .setPosition(400, 200)
    .setImages(imgs1);
  minutess2.setSize(99, 25);

  textFont(fontn);
}

PImage getImage(int w, int h, int c){
  PImage img = createImage(w, h, RGB);
  java.util.Arrays.fill(img.pixels, c);
  img.updatePixels();
  return img;
}

public void minutesss1() {
  min+=10;
  if (min>60) {
    min=0; 
    minutess1.setCaptionLabel("ВЫКЛ");
  } else  minutess1.setCaptionLabel(str(min)+" Мин");
  println(min,minutess1.getCaptionLabel().getText());
}

void draw() {
  background(0);
  fill(255);
}

public void controlEvent(ControlEvent event) {
  if(event.controller() == minutess2){
    minutesss1();
  }
}

选项2：将第一个按钮按下函数的指令提取到一个单独的函数中，供两者调用。这可能更简单、更直观地阅读：

import controlP5.*;
ControlP5 cp5;
int min=0;
Button minutess1;
Button minutess2;

void setup() {
  size(700, 400);

  PFont fontn = createFont("Times New Roman", 18);
  cp5 = new ControlP5(this);
  PFont p = createFont("Times New Roman", 18);
  ControlFont font=new
    ControlFont(p);
  cp5.setFont(font);

  minutess1 = cp5.addButton("minutesss1")
    .setCaptionLabel("ВЫКЛ")
    .setPosition(200, 200)
    .setSize(99, 25);

  //PImage[] imgs1 = {loadImage("0.png"), loadImage("1.png"), loadImage("2.png")}; // ,loadImage("3.png"),loadImage("4.png"),loadImage("5.png"),loadImage("6.png")
  // don't have images to reproduce: making new ones
  PImage[] imgs1 = {getImage(99,25,color(0,0,192)),
                    getImage(99,25,color(0,0,240)),
                    getImage(99,25,color(0,0,120))};
  minutess2 = cp5.addButton("minutesss2")
    //.setCaptionLabel("ВЫКЛ")
    .setPosition(400, 200)
    .setImages(imgs1);
  minutess2.setSize(99, 25);

  textFont(fontn);
}

PImage getImage(int w, int h, int c){
  PImage img = createImage(w, h, RGB);
  java.util.Arrays.fill(img.pixels, c);
  img.updatePixels();
  return img;
}

void updateMinutes(){
  min+=10;
  if (min>60) {
    min=0; 
    minutess1.setCaptionLabel("ВЫКЛ");
  } else  minutess1.setCaptionLabel(str(min)+" Мин");
  println(min,minutess1.getCaptionLabel().getText());
}

public void minutesss1() {
  updateMinutes();  
}

public void minutesss2() {
  updateMinutes();  
}

void draw() {
  background(0);
  fill(255);
}

关于你问题的第二部分，不清楚你是否想要使用 setImages() or not. If you pass more than 4 or less than 3 images they will be ignored as you can see in the source code

的默认 controlP5 状态（默认、结束、活动、突出显示）的图像

如果您想为每个分钟更新显示不同的图像（例如关闭、10、20、30、40、50、60），那么您需要制作自己的自定义按钮。逻辑并没有那么复杂，您可以使用 Button Example 作为更简单的起点。

封装更复杂的自定义功能会很棒，为此您需要一些面向对象编程 (OOP) 基础知识。您可以查看 Objects tutorial and example

为了便于说明，这里有一个单独的草图，它会为每个按钮按下状态（忽略 over/highlight 状态）显示不同的图像：

ImageButton button;

void setup(){
  size(300, 300);
  // button dimensions
  int w = 75;
  int h = 25;
  // test with generated images
  button = new ImageButton(112, 137, w, h, 
               new PImage[]{
                 // use loadImage with your own images instead of getImage :)
                 getImage(w, h, color(192, 0, 32 * 2)), // off
                 getImage(w, h, color(0, 0, 32 * 3)), // 10
                 getImage(w, h, color(0, 0, 32 * 4)), // 20
                 getImage(w, h, color(0, 0, 32 * 5)), // 30
                 getImage(w, h, color(0, 0, 32 * 6)), // 40
                 getImage(w, h, color(0, 0, 32 * 7)), // 50
                 getImage(w, h, color(0, 0, 32 * 8)), // 60
               });
               
  // loading images will be something similar to:
  //button = new ImageButton(112, 137, w, h, 
  //             new PImage[]{
  //               loadImage("0.png"), // off
  //               loadImage("1.png"), // 10
  //               loadImage("2.png"), // 20
  //               loadImage("3.png"), // 30
  //               loadImage("4.png"), // 40
  //               loadImage("5.png"), // 50
  //               loadImage("6.png"), // 60
  //             });
}

void draw(){
  background(0);
  button.draw();
}

void mousePressed(){
  button.mousePressed(mouseX,mouseY);
  println(button.min);
}

// test images to represent loaded state images
PImage getImage(int w, int h, int c){
  PImage img = createImage(w, h, RGB);
  java.util.Arrays.fill(img.pixels, c);
  img.updatePixels();
  return img;
}

// make a custom image button class
class ImageButton{
  // minutes is the data it stores
  int min = 0;
  // images for each state
  PImage[] stateImages;
  // which image to display
  int stateIndex;
  // position
  int x, y;
  // dimensions: width , height
  int w, h;
  // text to display
  String label = "ВЫКЛ";
  
  ImageButton(int x, int y, int w, int h, PImage[] stateImages){
    this.x = x;
    this.y = y;
    this.w = w;
    this.h = h;
    this.stateImages = stateImages;
  }
  
  void mousePressed(int mx, int my){
    // check the cursor is within the button bounds
    boolean isOver = ((mx >= x && mx <= x + w) &&  // check horizontal
                      (my >= y && my <= y + h) );  // check vertical
              
    if(isOver){
      
      min += 10;
      stateIndex++;
      
      if (min>60) {
        min = 0; 
        stateIndex = 0;
        label = "ВЫКЛ";
      } else  {
        label = min + " Мин";
      }
      
    }
  }
  
  void draw(){
    // if the images and index are valid
    if(stateImages != null && stateIndex < stateImages.length){
      image(stateImages[stateIndex], x, y, w, h);
    }else{
      println("error displaying button state image");
      println("stateImages: ");
      printArray(stateImages);
      println("stateIndex: " + stateIndex);
    }
    // display text
    text(label, x + 5, y + h - 8);
  }
  
}

按下按钮时更改图片

Change the picture when pressing the button

java

processing

control-p5