按下按钮时更改图片

问题描述

告诉我如何在单击图片时将其更改为下一个。我使用带有常规按钮的库“ 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);}

解决方法

发布这样格式化的代码真是太好了。如果您先在处理中（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,192)),getImage(99,240)),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,loadImage("6.png")
  // don't have images to reproduce: making new ones
  PImage[] imgs1 = {getImage(99,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()来仅针对默认控件P5状态（默认，结束，活动，突出显示）使用图像。如果您传递的图片多于4张或少于3张，则它们将被忽略，如您在the source code

中看到的那样

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

最好封装更复杂的自定义功能，并且您需要一些面向对象的编程（OOP）基础。您可以检出Objects tutorial和example

出于说明目的，下面是一个单独的草图，该草图将为每个按钮按下状态（忽略上/高亮状态）显示不同的图像：

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,new PImage[]{
                 // use loadImage with your own images instead of getImage :)
                 getImage(w,color(192,32 * 2)),// off
                 getImage(w,32 * 3)),// 10
                 getImage(w,32 * 4)),// 20
                 getImage(w,32 * 5)),// 30
                 getImage(w,32 * 6)),// 40
                 getImage(w,32 * 7)),// 50
                 getImage(w,32 * 8)),// 60
               });
               
  // loading images will be something similar to:
  //button = new ImageButton(112,//             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,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,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,h);
    }else{
      println("error displaying button state image");
      println("stateImages: ");
      printArray(stateImages);
      println("stateIndex: " + stateIndex);
    }
    // display text
    text(label,x + 5,y + h - 8);
  }
  
}

control-p5 java java processing processing processing