Как отобразить несколько прямоугольников в соответствии с JavaFx

Question

Я пытаюсь выстроить n прямоугольников в программе JavaFX. Моя общая цель - сделать какой-то тип "Audio Equalizer" в комплекте. Как мне добиться этого с помощью методов Rectangle в JavaFx?

Я знаю, что если, скажем, у меня есть ширина на панели, равная 740, и я хочу иметь 10 равных прямоугольников, каждый из них будет 74 шириной. Таким образом, ширина Rect 1 должна быть расположена от: 0-74, Rect 2 будет 75-149 и т. Д.

Я пытался использовать Rectangle.setX и использовать диапазоны, но это оставило бы один прямоугольник размером всей панели. Или один прямоугольник будет идеальной ширины, но будет показан только 1 прямоугольник.

Ниже приведена моя попытка переопределить метод запуска для отображения моего визуализатора.

Метод Start является корнем проблемы.

public class AudioEqualizer implements Visualizer {

private String name = "AudioEqualizer"; 
private Integer numOfBands;
private AnchorPane vizPane; 

private Double height = 0.0; 
private Double width = 0.0; 

private Double rectHeight = 0.0;
private Double rectWidth = 0.0;

private Double rectHeightPercentage = 1.3; 

private final Double startHue = 260.0;
private Double halfRectHeight = 0.0;


private Rectangle[] rectangles; 

@Override
public String getName() {
    return name;
}

@Override
public void start(Integer numBands, AnchorPane vizPane) {        
    end();

    this.numOfBands = numBands;
    this.vizPane = vizPane;

    height = vizPane.getHeight();
    width = vizPane.getWidth();


    Rectangle clip = new Rectangle(width, height);
    clip.setLayoutX(0);
    clip.setLayoutY(0);
    vizPane.setClip(clip);
    clip.setFill(Paint.valueOf("BLACK"));

   rectWidth = width / numBands;
   rectHeight = height / 2 ;
   rectangles = new Rectangle[numBands];


    for (int i = 0; i < numBands; i++) {

        Rectangle rectangle = new Rectangle((rectWidth * (i-1)), 0, 
        rectWidth, rectHeight); 
        //rectangle.setX(rectWidth); 
        rectangle.setFill(Color.hsb(startHue, 1.0, 1.0, 1.0));

        rectangles[i] = rectangle;
        vizPane.getChildren().add(rectangle);

    }

}

Я надеюсь, что это выглядело бы так, чтобы я мог расположить прямоугольники рядом друг с другом, как на этом рисунке.

Но то, что на самом деле происходит, является одной из двух вещей, в зависимости от кода, закомментированного или некомментированного в цикле for.

Цель: https://imgur.com/ZgYrTYO

Результаты:

1) https://imgur.com/NSyl4b2

или

2) https://imgur.com/nzW1dw4

Спасибо, что уделили время.

Answer 1

Вы можете попробовать использовать HBox в качестве контейнера для ваших прямоугольников.Он автоматически разместит ваши прямоугольники рядом друг с другом и позволит вам контролировать, сколько места вы хотите между ними.

Добавление прямоугольников в FXML

    <HBox fx:id="rectangleContainer" spacing="2" alignment="BOTTOM_LEFT" >
        <Rectangle fill="blue" width="10" height="50"/>
        <Rectangle fill="blue" width="10" height="20"/>
        <Rectangle fill="blue" width="10" height="10"/>
        <Rectangle fill="blue" width="10" height="40"/>
        <Rectangle fill="blue" width="10" height="50"/>
        <Rectangle fill="blue" width="10" height="60"/>
        <Rectangle fill="blue" width="10" height="30"/>
        <Rectangle fill="blue" width="10" height="30"/>
        <Rectangle fill="blue" width="10" height="20"/>
        <Rectangle fill="blue" width="10" height="10"/>
        <Rectangle fill="blue" width="10" height="50"/>
        <Rectangle fill="blue" width="10" height="60"/>
    </HBox>

Этот FXML даст следующий результат: .

Добавление прямоугольников программным способом

Если вы хотите добавить прямоугольники программным способом, вам просто нужна ссылка на HBox и выполните что-то вроде следующего.

@FXML
private HBox rectangleContainer;
...
for (int i = 0; i < numBands; i++) {
    Rectangle rect = new Rectangle(rectangleWidth, rectangleHeight); 
    rect.setFill(Color.BLUE);
    rectangleContainer.getChildren().add(rect);
}

Контейнер с фиксированной шириной

Предположим, у вас естьHBox шириной 740 пикселей, и вы хотите заполнить его 10 прямоугольниками, разделенными пробелом в 10 пикселей.

int numBands = 10;
double spacing = 10.0;
double totalSpacing = spacing * (numBands-1);
double rectangleWidth = (rectangleContainer.getPrefWidth()-totalSpacing) / numBands;
for (int i = 0; i < numBands; i++) {
    Rectangle rect = new Rectangle(rectangleWidth, Math.random()*500); //random height. replace with the value you want 
    rect.setFill(Color.BLUE);
    rectangleContainer.getChildren().add(rect);
}

Это результат:

Надеюсь, этопомогает.

Обновление:

Извините, я не понял, что вы не можете использовать HBox.Я думаю, что проблема на изображении 1 в том, что расстояние между прямоугольниками отсутствует.Вы можете попробовать изменить прямоугольник X следующим образом:

for (int i = 0; i < numBands; i++) {
    Rectangle rectangle = new Rectangle((rectWidth+2) * i, 0, 
    rectWidth, rectHeight); 
    rectangle.setFill(Color.hsb(startHue, 1.0, 1.0, 1.0));
    rectangles[i] = rectangle;
    vizPane.getChildren().add(rectangle);
}

Я использовал интервал 2. Это, конечно, может привести к тому, что AnchorPane увеличит свою ширину, чтобы она соответствовала всем прямоугольникам и интервалу.Если вы не хотите этого, вы должны учитывать расстояние при расчете ширины прямоугольников.