Question

我遇到了横向填充问题。

我有一个带有BorderPane的app javafx应用程序。在setBottom中，我想添加一个info-component。

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

我也试图使用一个标签，但也没有用正确的方式填写，但另一方面。

我还与TextField绑在一起，填写并调整了区域的大小。

你们有没有想过如何添加填充该区域的Canvas？

Canvas补充道 http://snag.gy/seswj.jpg

标签添加： http://snag.gy/6wSy8.jpg

TextField添加： http://snag.gy/7ajUc.jpg

祝你好运弗雷德里克

这里有一些代码。我的主要课程：

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

此类使用style-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;
}

正如您所看到的，我的主要目的是展示横幅，此横幅是一个扩展此类的Canvas：

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


}

Banner类吧：

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

}

我还使用了类似于：

的BorderTitelPane

package a.app;

import javafx.geometry.Insets;
import javafx.geometry.Pos;
import javafx.scene.Node;
import javafx.scene.control.Label;
import javafx.scene.layout.HBox;
import javafx.scene.layout.StackPane;

public class BorderedTitledPane extends StackPane 
{       
      public BorderedTitledPane(String titleString, Node content) 
      {
            Label title = new Label(" " + titleString + " ");
            title.getStyleClass().add("bordered-titled-title");
            StackPane.setAlignment(title, Pos.TOP_LEFT);

            StackPane contentPane = new StackPane();
            content.getStyleClass().add("bordered-titled-content");
            contentPane.getChildren().add(content);

            getStyleClass().add("bordered-titled-border");
            getChildren().addAll(title, contentPane);
      }  
}

希望就是这样。

Answer 1

画布的宽度与其容器完全相同。它开箱即用，因为它的起始位置不同。发生这种情况是因为在类Banner中，在您提到的构造函数内部

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

这意味着pane的宽度将被设置为canvas的宽度。

而不是这样，写下以下内容

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

填写JavaFx应用程序中的区域

1 个答案: