如何根据 JavaFx 显示多个矩形

Question

我正在尝试在 JavaFX 程序中排列 n 个矩形。我的总体目标是制作某种附加的“音频均衡器”。如何使用 JavaFx 中的 Rectangle 方法实现这一点？

我知道，如果说我在窗格中的宽度为 740，并且我想要 10 个相等的矩形，则每个矩形的宽度为 74。所以 Rect 1 的宽度需要定位在：0-74，Rect 2 是 75-149 等等。

我尝试使用 Rectangle.setX 并使用范围，但这会留下一个矩形的大小与整个窗格一样大。或者一个矩形将是完美的宽度，但只会显示 1 个矩形。

下面是我尝试覆盖 start 方法以显示我的可视化工具。

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

固定宽度容器

假设你有一个 740px 宽的 HBox，你想用 10 个矩形填充它，间隔 10px 的空间。

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 增加其宽度以适应所有矩形和间距。如果你不想这样，你必须在计算矩形宽度时考虑间距。