Question

我是编程GUI和处理的新手。我的问题是如何获得可以滚动的复选框列表？我想要的就是这里右边的国家列表（http://goo.gl/MIKHi4）。

我查看了ControlP5库并找到了Checkboxes，但我不知道如何制作它们的可滚动列表。

谢谢。

Answer 1

上周我一直在寻找这个，并希望有一个现成的库可供我轻松地将可滚动的复选框添加到我的应用程序中，但最后我没有运气。最后，我所做的是实现我自己的可滚动复选框列表。

首先，我添加了一个ControlP5滑块作为滚动条，然后在每个帧中，从滑块获取值并根据该值绘制特定的复选框。

假设您有200个国家/地区的列表供用户选择。然后代码就像：

ControlP5 cp5;
Slider scrollBar;
PFont fLabel;
int boxOver = -1; //Indicate mouse is over which checkbox
boolean[] boxSelected; //Checkbox selected or not
void setup() {
    size(1024, 800);
    colorMode(HSB, 360, 100, 100);
    cp5 = new ControlP5();
    scrollbar = cp5.addSlider("scrollbar")
         .setPosition(1005, 110)
         .setRange(0, 180)
         .setSize(15, 490)
         .setHandleSize(30)
         .setSliderMode(Slider.FLEXIBLE)
         .setValue(180); //Put handler at top because 0 value is at bottom of slider
    fLabel = createFont("Arial", 12, false);
    boxSelected = new boolean[200];
    for(int i=0;i<200;i++) {
        boxSelected[i] = false;
    }
}

void draw() {
    noFill();
    stroke(200, 255);
    rect(820, 110, 200, 490); //The outline of the scrollable box

    stroke(150, 255);
    int count = 0;

    //Suppose that you want to display 20 items each time
    for(int i=180-(int)scrollBar.getValue();i<180-(int)scrollBar.getValue()+20;i++) {
        if(boxOver < 0) {
            if(mouseX>=825 && mouseX<837 && mouseY >= 120+count*24 && mouseY <= 132+count*24) {
                boxOver = i;
                cursor(HAND);
            }
        }
        if(boxSelected[i]) {
            fill(50);  //If the box is selected, fill this box
        } else {
            fill(360);
        }
        rect(825, 120+count*24, 12, 12); //Draw the box

        //Draw the label text
        textFont(fLabel);
        fill(50);
        text(countries[i], 843, 132+count*24); //Suppose the country names are stored in countries[]

        count++;
    }
}

void mousePressed() {
    if(boxOver >=0) {
        boxSelected[boxOver] = !boxSelected[boxOver]; //Toggle selection
    }
}

希望这有助于您或将来可能遇到同样问题的任何人。

Answer 2

现在在实验示例中有一个名为ControlP5SliderList

的示例

处理中的可滚动复选框列表

2 个答案: