如何从处理中的图像制作按钮

Question

我写的代码如下。我想从图像（或形状）制作 REGION_1 和 REGION_2 按钮。我有 2 个问题：

我看不到具有图像功能的 addButton 函数。有没有办法直接使用图像作为按钮本身？
有没有办法把按钮做成环状的？（没有实心圆圈）

这是我的代码片段和来自 UI 的屏幕截图：

  Group RegionGroup = cp5.addGroup("REGIONS")
    .setPosition(30,200)
    .setWidth(150)
    .setHeight(30)
    .setFont(font2)
    .moveTo(SetupGroup);
    background(0);
    noStroke();
    ;
        
    cp5.addButton("REGION_1")  // The button
    .setPosition(40,10)     // x and y relative to the group
    .setSize(90, 50)       // (width, height)
    .setFont(font)
    .moveTo(RegionGroup);   // add it to the group
    
    loadImage("button1.png"); //????
  ;     
  
  
    cp5.addButton("REGION_2")  // The button
    .setPosition(40,70)    // x and y relative to the group
    .setSize(90, 50)       // (width, height)
    .setFont(font) 
    .moveTo(RegionGroup);   // add it to the group
    
    loadImage("button2.png"); //?????
  ;

Answer 1

您应该可以在按钮实例上调用 setImage()，例如：

cp5.addButton("REGION_1")  // The button
    .setPosition(40,10)     // x and y relative to the group
    .setSize(90, 50)       // (width, height)
    .setFont(font)
    .moveTo(RegionGroup)
    .setImage(loadImage("button1.png"));   // add it to the group
    

cp5.addButton("REGION_2")  // The button
.setPosition(40,70)    // x and y relative to the group
.setSize(90, 50)       // (width, height)
.setFont(font) 
.moveTo(RegionGroup)
.setImage(loadImage("button2.png"));   // add it to the group

如果您有四张图片代表四种按钮状态，您还可以执行类似 .setImages(yourPImageArrayHere);

的操作

关于将按钮制作成圆形，可以通过自定义视图实现，但代码会稍微复杂一些。您可以使用 ControlP5customView example 作为起点。这是显示无填充环的修改版本：

/**
* ControlP5 Custom View
*
*
* find a list of public methods available for the ControllerDisplay Controller
* at the bottom of this sketch.
*
* by Andreas Schlegel, 2012
* www.sojamo.de/libraries/controlp5
*
*/


import controlP5.*;


ControlP5 cp5;


void setup() {
  size(400, 400);
  smooth();
  cp5 = new ControlP5(this);
  cp5.addButton("hello")
     .setPosition(50, 100)
     .setSize(150,150)
     .setView(new CircularButton())
     ;
     
  cp5.addButton("world")
     .setPosition(250, 100)
     .setSize(50,50)
     .setView(new CircularButton())
     ;
}


void draw() {
  background(ControlP5.BLACK);
}

public void hello(int theValue) {
  println("Hello pressed");
}

public void world(int theValue) {
  println("World pressed");
}

/**
 * to define a custom View for a controller use the ContollerView<T> interface
 * T here must be replace by the name of the Controller class your custom View will be 
 * applied to. In our example T is replace by Button since we are aplpying the View 
 * to the Button instance create in setup. The ControllerView interface requires
 * you to implement the display(PApplet, T) method. Same here, T must be replaced by
 * the Controller class you are designing the custom view for, for us this is the 
 * Button class. 
 */
 
class CircularButton implements ControllerView<Button> {

  public void display(PGraphics theApplet, Button theButton) {
    theApplet.pushMatrix();
    theApplet.noFill();
    theApplet.strokeWeight(9);
    if (theButton.isInside()) {
      if (theButton.isPressed()) { // button is pressed
        theApplet.stroke(ControlP5.LIME);
      }  else { // mouse hovers the button
        theApplet.stroke(ControlP5.YELLOW);
      }
    } else { // the mouse is located outside the button area
      theApplet.stroke(ControlP5.GREEN);
    }
    
    theApplet.ellipse(0, 0, theButton.getWidth(), theButton.getHeight());
    
    // center the caption label 
    int x = theButton.getWidth()/2 - theButton.getCaptionLabel().getWidth()/2;
    int y = theButton.getHeight()/2 - theButton.getCaptionLabel().getHeight()/2;
    
    translate(x, y);
    theButton.getCaptionLabel().draw(theApplet);
    
    theApplet.popMatrix();
  }
}


/*
a list of all methods available for the ControllerView Controller
use ControlP5.printPublicMethodsFor(ControllerView.class);
to print the following list into the console.

You can find further details about class ControllerView in the javadoc.

Format:
ClassName : returnType methodName(parameter type)

controlP5.ControllerView : void display(PApplet, T)

*/

这更复杂但也更灵活。如果这不值得，您可能会制作没有填充的环作为按钮的透明 png 皮肤（使用 setImage() / setImages()）

如何从处理中的图像制作按钮

How to make button from an Image in Processing

user-interface

arduino

processing

arduino-ide

processing-ide