如何仅在所需的选项卡中显示带有图像的按钮？

Question

我有OKNO1和OKNO2，我想严格在OKNO1中显示带有图像的按钮。

此刻，带有图像的按钮将全局显示。我曾经用过cp5.addButton，在那里做过.moveTo(“okno1”);

现在，图像按钮使用OOP / Java。如何解决一个棘手的问题？您可以通过什么方式完成任务。我想再次使用void draw()。

Complete code example:

import controlP5.*;
ControlP5 cp5;
ImageButton button;
Textlabel I;
Textlabel tempIn;

void setup() {
  size(700, 420, P3D);
  surface.setResizable(false);
  smooth();
  frameRate(30);
  cp5 = new ControlP5(this);

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

  cp5.addTab("okno2")
    .setColorBackground(color(0, 160, 100))
    .setColorLabel(color(255))
    .setColorActive(color(255, 128, 0));

  cp5.getTab("default")
    .activateEvent(true)
    .setLabel("okno1")
    .setId(1);

  cp5.getTab("okno2")
    .activateEvent(true)
    .setId(2);

  tempIn = cp5.addTextlabel("Sostoyanie")
    .setText("1")
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00))
    .setPosition(155, 35);

  I = cp5.addTextlabel("Impuls")
    .setText("2")
    .setPosition(155, 35)
    .setFont(createFont("Times New Roman", 20))
    .setColor(color(0xffffff00))
    .moveTo("okno2");

  int w = 99;
  int h = 25;
  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);
}
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;
}
class ImageButton {
  int min = 0;
  PImage[] stateImages;
  int stateIndex;
  int x, y;
  int w, h;
  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) {
    boolean isOver = ((mx >= x && mx <= x + w) &&
      (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 (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);
    }
}

Answer 1

帮助他人（包括我自己）帮助您：

保持代码整洁（例如删除不必要的内容getImage）格式化代码，以便于阅读。我不能太强调这一点。
为了帮助自己，请务必完全理解所有代码：

阅读想像一下它会如何运行运行它并观察实际行为了解您的心理模型与计算机之间的区别。
通常，这将帮助您调试代码。另请查看Kevin Workman的调试教程。

关于您的问题：按钮始终在中呈现draw()。您只想在第一个选项卡处于活动状态时才绘制它：

获取第一个标签检查它是否处于活动状态如果是这样，请渲染按钮
例如，代替button.draw()您使用：

if(cp5.getTab("default").isActive()){
    button.draw();
  }

可以做到这一点，但是随着界面变得越来越复杂，您可能希望
对每个选项卡上绘制的内容进行分组。这是有关如何为
每个标签具有更多控件的UI进行组织的想法：

• 添加一个全局变量（在代码顶部）以跟踪当前选项卡： int currentTab = 1;
• 调用displayTabs();的draw()，而不是button.draw()为每片绘图处理。（有关displayTabs()波纹管的更多信息）
• controlEvent()更新 currentTab

Like so:

void controlEvent(ControlEvent event) {
  // update current tab only if the current event comes from a tab (and not other controllers) 
  if(event.isTab()){
    currentTab = event.getId();
  }
}

单击/更新controlEvent任何ControlP5组件（控制器）时，都会触发该想法。如果是标签，则可以更新currentTab以
了解draw()要draw()使用的内容displayTabs()：

void displayTabs(){
  switch(currentTab){
    case 1:
      displayTab1();
      break;
    case 2:
      displayTab2();
      break;
  }
}

void displayTab1(){
  button.draw();
}

void displayTab2(){
  // render stuff for tab 2 only
}

因此，有一个开关可以根据currentTab值调用一个功能或另一个功能。这样做的好处是，将来您可以
轻松地case为另一个选项卡复制另一个选项卡，并且每个选项卡的内容都被整齐地分隔开了。