Question

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

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

我尝试使用Rectangle.setX并使用范围，但这将使一个矩形成为整个窗格的大小。或一个矩形将是理想的宽度，但仅显示一个矩形。

以下是我尝试覆盖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增加其宽度以适合所有矩形和间距。如果您不希望这样做，则在计算矩形的宽度时必须考虑间距。

如何显示符合JavaFx的多个矩形

1 个答案:

在FXML中添加矩形

以编程方式添加矩形

固定宽度的容器

更新：