2

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

1 回答 1

1

很高兴您发布了这样格式化的代码。如果您之前在处理（Ctrl + T）中对其进行格式化以使其更易于阅读，那就更好了。

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

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

  1. 如何从第二个按钮调用适用于第一个按钮的相同分钟更新功能？
  2. 如何使用自定义图像为第二个按钮设置皮肤？

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

选项 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);
}

关于您问题的第二部分，不清楚您是否只想为默认 controlP5 状态（默认、结束、活动、突出显示）使用setImages()或不使用图像。如果您传递超过 4 个或少于 3 个图像，它们将被忽略，如您在源代码中所见

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

封装更复杂的自定义功能会很棒，您需要一些面向对象编程 (OOP) 的基础知识。您可以查看对象教程和示例

出于说明目的，这里有一个单独的草图，它将为每个按钮按下状态显示不同的图像（忽略过度/突出显示状态）：

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);
  }
  
}
于 2020-08-28T10:26:51.660 回答