JavaFx应用程序中的填充区域

我有一个水平填充问题

我有一个带有边框窗格的javafx应用程序。 在setBottom中，我想添加一个信息组件

此信息组件如何扩展画布。 但当我添加它时，它不会正确填充或调整大小

我也试着用一个标签，这也没有填写正确，但在另一种方式

我还用一个文本字段进行了绑定，并正确地填充和调整了区域大小

你们知道如何添加画布来正确填充区域吗

画布添加

添加的标签：

文本字段添加：

致意 弗雷德里克

好的，这里有一些代码。 我的主要班级：

package a.app;

import java.net.URL;

import javafx.application.Application;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.control.Button;
import javafx.scene.control.Label;
import javafx.scene.control.TextField;
import javafx.scene.control.Tooltip;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.GridPane;
import javafx.scene.layout.HBox;
import javafx.scene.layout.Pane;
import javafx.scene.layout.Priority;
import javafx.stage.Stage;

public class BannerTest extends Application
{
    private Pane mainPanel;
    Stage primaryStage;

    @Override
    public void start(Stage ps) throws Exception 
    {
        primaryStage = ps;
        primaryStage.setTitle( "BannerTest" );

        mainPanel = createBorderPaneGui();
    Scene scene = new Scene(mainPanel, 700, 700);

    URL resource = BannerTest.class.getResource("/BannerTest.css");
    String externalForm = resource.toExternalForm();
    scene.getStylesheets().add( externalForm );

    primaryStage.setScene( scene );
    primaryStage.setTitle("BannerTest");
    primaryStage.show();
    }

    public static void main(String[] args) 
    {
    launch(args);
    }


    private Pane createBorderPaneGui()
    {
    mainPanel = new BorderPane();

    GridPane applicationPanel = getApplicationPanel();
    BorderedTitledPane borderedTitledPane = new BorderedTitledPane("Hubba", applicationPanel);
    ((BorderPane)mainPanel).setCenter( borderedTitledPane );

    BorderedTitledPane banner = getBanner( 20, mainPanel );
    ((BorderPane)mainPanel).setBottom( banner );

    return mainPanel;
    }


    private GridPane getApplicationPanel()
    {
    GridPane applicationPanel = new GridPane();     
    Label direcoryLabel = new Label("Directory:");
    applicationPanel.add(direcoryLabel, 0, 0);

    final TextField fileTextField = new TextField();
    fileTextField.setEditable(false);
    applicationPanel.add(fileTextField, 1, 0);

    Button button = new Button("Select more then all you can select, Select more then all you can select");
    HBox hBox = new HBox(10);
    hBox.setAlignment(Pos.BOTTOM_RIGHT);
    hBox.getChildren().add(button);
    applicationPanel.add(hBox, 2, 0);

    Label infoLabel = new Label("?");
    applicationPanel.add(infoLabel, 3, 0);
    infoLabel.setTooltip( new Tooltip("Select directory as search root."));

    applicationPanel.setGridLinesVisible(true);

    return applicationPanel;
    }

    private BorderedTitledPane getBanner(int height, Pane panel )
    {

    HBox bannerBox = new HBox(10);
    Banner banner = new Banner(height, "", "C:/a/image/image.png", bannerBox);
    //Canvas banner = new Canvas();
    //Label banner = new Label("Hola");
    //TextField banner = new TextField();

    bannerBox.setHgrow(banner, Priority.ALWAYS);
    bannerBox.getChildren().addAll( banner );
    BorderedTitledPane borderedTitledPane = new BorderedTitledPane("Info", bannerBox);

    return borderedTitledPane;
    }
}

此类使用样式css：

.mainPanel {
  -fx-background-color: #8fbc8f;
}

.applicationPanel {
  -fx-padding: 20 20 20 20;
  -fx-alignment: top-center;
  -fx-background-color: #00FFFF;
      -fx-border-color: #FF0000;
    -fx-border-width: 20px;
}

.bannerBox {
  -fx-alignment: bottom-center;
  -fx-background-color: #FFFFFF;
  -fx-border-color: #0000FF;
  -fx-border-width: 20px;

}

.banner{
  -fx-alignment: bottom-center;
  -fx-background-color: #00FF00;
}

.label {
  -fx-font: 14px Helvetica;
}

.bordered-titled-title {
  -fx-background-color: white;
  -fx-translate-y: -15;
  -fx-translate-x: 10;
}

.bordered-titled-border {
  -fx-content-display: top;
  -fx-border-insets: 40 40 15 15;
  -fx-background-color: white;
  -fx-border-color: black;
  -fx-border-width: 2;
}

.bordered-titled-content {
  -fx-padding: 26 26 26 26;
}

正如您所见，我的主要目的是显示横幅，此横幅是扩展此类的画布：

package a.app;

import javafx.beans.InvalidationListener;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;

public class ResizableWidthCanvas extends Canvas 
{

    private Double endValue;

    public ResizableWidthCanvas(int height) 
    {
    setHeight( height );
    InvalidationListener listener = new InvalidationListener(){

        public void invalidated(javafx.beans.Observable arg0) {
        setEndValue( getWidth() );
                draw();
            }           
    };

    widthProperty().addListener(listener);
    }

    private void draw() {
    double width = getWidth()-4;
    double height = getHeight()-4;

    GraphicsContext gc = getGraphicsContext2D();
    gc.clearRect(2, 2, width, height);

    }

    @Override
    public boolean isResizable() {
    return true;
    }

    /*
    @Override
    public double prefWidth(double width) {
    return getWidth();
    }
    */

    @Override
    public double prefHeight(double height) {
    return getHeight();
    }

    public Double getEndValue()
    {
    return endValue;
    }

    public void setEndValue(Double endValue) 
    {
        this.endValue = endValue;
    }


}

班纳特班级的自我介绍：

package a.app;

import java.io.File;

import javafx.animation.AnimationTimer;
import javafx.animation.KeyFrame;
import javafx.animation.KeyValue;
import javafx.animation.Timeline;
import javafx.beans.property.DoubleProperty;
import javafx.beans.property.SimpleDoubleProperty;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.image.Image;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.util.Duration;


public class Banner extends /*Canvas*/ ResizableWidthCanvas
{
    String imageUrl;
    String imagePath;

    DoubleProperty doublePropertyX  = new SimpleDoubleProperty();
    DoubleProperty doublePropertyY  = new SimpleDoubleProperty();

    public Banner(int height, String imageUrl, String imagePath, Pane pane) 
    {
        super(height);
        setHeight( height );

        widthProperty().bind( pane.widthProperty() );

    File file = new File(imagePath);

    final Image image = new Image(file.toURI().toString());

    Double endValue = new Double( pane.getWidth()-image.getWidth() );
    KeyValue keyValue = new KeyValue( doublePropertyX, endValue );


    Timeline timeline = new Timeline(
        new KeyFrame(Duration.seconds(0),
            new KeyValue(doublePropertyX, 0)
        ),
        new KeyFrame(Duration.seconds(3),
                keyValue
        )
        );
        timeline.setAutoReverse(true);
        timeline.setCycleCount(Timeline.INDEFINITE);



        AnimationTimer timer = new AnimationTimer() 
        {
        int r = 0;
        int g = 0;
        int b = 0;
        @Override
        public void handle(long now) 
        {
            GraphicsContext gc = getGraphicsContext2D();


            if(r < 255)
            {
            r++;
            }
            else if(g < 255)
            {
            g++;
            }
            else if(b < 255)
            {
            b++;
            }
            else
            {
            r = 0;
            g = 0;
            b = 0;
            }


            gc.setFill( Color.rgb(r,g,b) );
            gc.fillRect(0, 0, getWidth(), getHeight());

            gc.drawImage(image,
                doublePropertyX.doubleValue(),
                doublePropertyY.doubleValue()+1
            );

        }
        };

        timer.start();
        timeline.play();
    }

}

---

希望就这些。

画布的宽度与容器的宽度完全相等。它的出现是因为它的起始位置不同。之所以会发生这种情况，是因为在类

横幅中，在您提到的构造函数内部

widthProperty（）.bind（pane.widthProperty（））

这意味着将设置为
画布
宽度的
窗格的宽度

与其这样，不如写以下内容

pane.widthProperty().addListener(new ChangeListener<Number>() {

            @Override
            public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
                setWidth((double)t1 - 70);//You can change the number according to difference in the x position 
            }
        });

pane.widthProperty（）.addListener（新的ChangeListener（））{
@凌驾
public void changed（可观察性）你能发布你的代码吗，你尝试了什么？你好！谢谢你的回复！我将尝试添加我的代码！看起来我必须添加一个“答案”，很快回来！啊哈！我可以编辑我的原始帖子了！现在我明白了。你好！谢谢你的帮助Harshita！我试了很多次，但都没能让它按我的要求工作。我用了一个窗格而不是画布。用一个窗格作为超类似乎解决了“填充区域”问题-问题。贝丝认为弗雷德里基特很好，你让它工作起来了。但上面的解决方案也应该是我自己尝试过的，而且它对我有效：）
pane.widthProperty().addListener(new ChangeListener<Number>() {

            @Override
            public void changed(ObservableValue<? extends Number> ov, Number t, Number t1) {
                setWidth((double)t1 - 70);//You can change the number according to difference in the x position 
            }
        });