java如何使用JavaFx显示多个矩形

Question

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

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

我试着使用矩形。setX和use ranges，但这会留下一个矩形，大小相当于整个窗格。或者一个矩形是完美的宽度，但只有一个矩形会显示

下面是我试图覆盖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的间距。 这当然可以使锚烷增加其宽度，以适应所有的矩形和间距。如果你不想要这个，你必须考虑矩形宽度时的间距。