如何从处理中的图像制作按钮 [英] How to make button from an Image in Processing

问题描述

我写的代码如下.我想从图像(或形状)制作 REGION_1 和 REGION_2 按钮.我有两个问题:

The code I wrote is below. I want to make the REGION_1 and REGION_2 buttons from images(or shapes). I have 2 questions:

1. 我看不到具有图像功能的 addButton 函数.有没有办法直接使用图片作为按钮本身?

1. I couldn't see a function for addButton that has the image feature. Is there a way to use an image directly as the button itself?

有没有办法把按钮做成环形?(没有实心圆圈)

Is there a way to make the buttons in the shape of rings? (No filled circles)

这是我的一段代码和用户界面的屏幕截图:

Here is the piece of my code and the screenshot from the 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"); //?????
  ; 

推荐答案

您应该能够调用 setImage() 在按钮实例上，例如:

You should be able to call setImage() on the button instance, for example:

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);

If you have four images representing the four button states you could also do something like .setImages(yourPImageArrayHere);

关于将按钮制作成圆形，这可以通过自定义视图实现，但代码会稍微复杂一些.您可以使用 ControlP5customView 示例 作为初始点.这是一个修改后的版本，显示没有填充的环:

Regarding making the buttons in the shape of a circle, that would be possible via custom views, though the code would slightly more complex. You can use the ControlP5customView example as a starting point. Here's a modified version that displays the rings with no fills:

/**
* 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())

This is more complex but also flexible. If this is not something worthwhile you could probably get away with making rings with no fills as transparent png skins for the button (using setImage() / setImages())

这篇关于如何从处理中的图像制作按钮的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！