javafx-centering backgroundimage覆盖borderpane

monwx1rj  于 2021-07-03  发布在  Java
关注(0)|答案(1)|浏览(357)

我在试一套 BackgroundImage 作为背景 BorderPane ( pane )在javafx中。我想要那个 BackgroundImage 盖子 BorderPane 它总是位于中心。我想做同样的css（网页）与背景图像。
我已经试过了：
使用css（fx css）

  1. package application;
  3. import javafx.application.Application;
  4. import javafx.stage.Stage;
  5. import javafx.scene.Scene;
  6. import javafx.scene.control.Button;
  7. import javafx.scene.layout.BorderPane;
  9. public class ExternalCSS extends Application {
  10.     @Override
  11.     public void start(Stage primaryStage) {
  12.         try {
  14.             //BorderPane()
  15.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
  16.             BorderPane borderPane = new BorderPane();
  18.             //Button(String text)
  19.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
  20.             Button btn = new Button("Center");
  22.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
  23.             borderPane.setCenter(btn);
  25.             Scene scene = new Scene(borderPane, 600, 600);
  27.             URL path = getClass().getResource("resources/BackgroundStyle.css");
  29.             if(path != null) {
  30.                 scene.getStylesheets().add(path.toExternalForm());
  31.             } else {
  32.                 scene.getStylesheets().add("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/BackgroundStyleExternalURL.css");
  33.             }
  35.             borderPane.setId("background_id");
  37.             primaryStage.setScene(scene);
  38.             primaryStage.show();
  40.         } catch(Exception e) {
  41.             e.printStackTrace();
  42.         }
  43.     }
  45.     public static void main(String[] args) {
  46.         launch(args);
  47.     }
  48. }

此代码使用外部css（您可以在此处找到我的css代码），也可以将以下代码与内联css一起使用：

  1. package application;
  3. import javafx.application.Application;
  4. import javafx.stage.Stage;
  5. import javafx.scene.Scene;
  6. import javafx.scene.control.Button;
  7. import javafx.scene.layout.BorderPane;
  9. public class InlineCSS extends Application {
  10.     @Override
  11.     public void start(Stage primaryStage) {
  12.         try {
  14.             //BorderPane()
  15.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
  16.             BorderPane borderPane = new BorderPane();
  18.             //Button(String text)
  19.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
  20.             Button btn = new Button("Center");
  22.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
  23.             borderPane.setCenter(btn);
  25.             Scene scene = new Scene(borderPane, 600, 600);
  27.             URL path = getClass().getResource("resources/black_clock.png");
  29.             String image = null;
  30.             if(path != null) {
  31.                 image = path.toExternalForm();
  32.             } else {
  33.                 image = "https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png";
  34.             }                   
  36.             borderPane.setStyle("-fx-background-image: url('" + image + "'); " +
  37.                        "-fx-background-position: center center; " +
  38.                        "-fx-background-repeat: no-repeat;" +
  39.                        "-fx-background-size: cover");
  41.             primaryStage.setScene(scene);
  42.             primaryStage.show();
  44.         } catch(Exception e) {
  45.             e.printStackTrace();
  46.         }
  47.     }
  49.     public static void main(String[] args) {
  50.         launch(args);
  51.     }
  52. }

仅使用javafx：

  1. package application;
  3. import java.io.File;
  5. import javafx.application.Application;
  6. import javafx.stage.Stage;
  7. import javafx.scene.Scene;
  8. import javafx.scene.control.Button;
  9. import javafx.scene.image.Image;
  10. import javafx.scene.layout.Background;
  11. import javafx.scene.layout.BackgroundImage;
  12. import javafx.scene.layout.BackgroundPosition;
  13. import javafx.scene.layout.BackgroundRepeat;
  14. import javafx.scene.layout.BackgroundSize;
  15. import javafx.scene.layout.BorderPane;
  17.         public class OnlyJavaFX extends Application {
  18.     @Override
  19.     public void start(Stage primaryStage) {
  20.         try {
  22.             //BorderPane()
  23.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
  24.             BorderPane borderPane = new BorderPane();
  26.             //File(String pathname)
  27.             //https://docs.oracle.com/javase/8/docs/api/java/io/File.html
  28.             File file = new File("./src/application/resourcesa/black_clock.png");
  30.             Image img = null;
  31.             if(file.exists()) {
  32.                 //Image(InputStream is)
  33.                 //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  34.                 img = new Image(file.getAbsoluteFile().toURI().toString());
  35.             } else {
  36.                 //Image(String url)
  37.                 //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  38.                 img = new Image("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png");
  39.             }
  41.             //BackgroundSize(double width, double height, boolean widthAsPercentage, boolean heightAsPercentage, boolean contain, boolean cover)
  42.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BackgroundSize.html
  43.             BackgroundSize bgSize = new BackgroundSize(0, 0, false, false, false, true);
  45.             //public BackgroundImage(Image image, BackgroundRepeat repeatX, BackgroundRepeat repeatY, BackgroundPosition position, BackgroundSize size)
  46.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BackgroundImage.html
  47.             BackgroundImage bgImg = new BackgroundImage(img,
  48.                     BackgroundRepeat.NO_REPEAT,
  49.                     BackgroundRepeat.NO_REPEAT,
  50.                     BackgroundPosition.CENTER,
  51.                     bgSize);
  53.             //Background(BackgroundImage... images)
  54.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Background.html
  55.             Background bg = new Background(bgImg);
  57.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/Region.html#setBackground-javafx.scene.layout.Background-
  58.             borderPane.setBackground(bg);
  60.             //Button(String text)
  61.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
  62.             Button btn = new Button("Center");
  64.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
  65.             borderPane.setCenter(btn);
  67.             Scene scene = new Scene(borderPane, 600, 600);
  68.             primaryStage.setScene(scene);
  69.             primaryStage.show();
  71.         } catch(Exception e) {
  72.             e.printStackTrace();
  73.         }
  74.     }
  76.     public static void main(String[] args) {
  77.         launch(args);
  78.     }
  79. }

当前所有版本的代码（inlinecss、externalcss和onlyjavafx）都会产生如下结果：

下面是相同示例的css和html代码。我希望它看起来像这样：

jsfidle示例：代码，全屏
jsbin示例：代码，全屏
编辑1：
我意识到我已经发布了我的代码的旧版本，所以我会更新它(代码中唯一的变化是，现在它可以工作，即使没有图像和css文件保存在您的计算机上，相反，程序会让它在线。）
在jose martinez的回答之后编辑2：
我已经测试了你的代码，但它不工作(我甚至添加了背景图像视图在y轴方向的平移，在你的回答中它只是在x轴方向，而且我还设置了borderpane的大小以匹配场景（应用程序窗口）的大小，但它仍然不起作用）。下面是完整的代码（与您的答案相同，但我已经提到了一些小的修复）：

  1. package application;
  3. import java.io.File;
  5. import javafx.application.Application;
  6. import javafx.stage.Stage;
  7. import javafx.scene.Group;
  8. import javafx.scene.Scene;
  9. import javafx.scene.control.Button;
  10. import javafx.scene.image.Image;
  11. import javafx.scene.image.ImageView;
  12. import javafx.scene.layout.BorderPane;
  14. public class Try1 extends Application {
  15.     @Override
  16.     public void start(Stage primaryStage) {
  17.         try {
  19.             //BorderPane()
  20.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
  21.             BorderPane borderPane = new BorderPane();
  23.             //jot down the width and height of the scene
  24.             double width = 600;
  25.             double height = 600;
  27.             //File(String pathname)
  28.             //https://docs.oracle.com/javase/8/docs/api/java/io/File.html
  29.             File file = new File("./src/application/resourcesa/black_clock.png");
  31.             Image img = null;
  32.             if(file.exists()) {
  33.                 //Image(InputStream is)
  34.                 //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  35.                 img = new Image(file.getAbsoluteFile().toURI().toString());
  36.             } else {
  37.                 //Image(String url)
  38.                 //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  39.                 img = new Image("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png");
  40.             }
  42.             ImageView background = new ImageView(img);
  44.             //..center the background
  45.             double translateX = width/2 - img.getWidth()/2;
  46.             System.out.println(translateX);
  47.             background.setTranslateX(translateX);
  49.             double translateY = height/2 - img.getHeight()/2;
  50.             System.out.println(translateY);
  51.             background.setTranslateY(translateY);
  53.             //Button(String text)
  54.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
  55.             Button btn = new Button("Center");
  57.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
  58.             borderPane.setCenter(btn);
  60.             //make root with BorderPane and background image
  61.             Group root = new Group (background, borderPane);
  63.             Scene scene = new Scene(root, width, height);        
  65.             primaryStage.setScene(scene);
  67.             //this lines set borderPane's dimensions to be the same as scene
  68.             borderPane.prefHeightProperty().bind(scene.heightProperty());
  69.             borderPane.prefWidthProperty().bind(scene.widthProperty());
  71.             primaryStage.show();
  73.         } catch(Exception e) {
  74.             e.printStackTrace();
  75.         }
  76.     }
  78.     public static void main(String[] args) {
  79.         launch(args);
  80.     }
  81. }

问题是，这段代码只有在启动程序时才起作用

一旦你调整了（应用程序）窗口的大小，它就不再居中了。

Javajavafxcssbackground-imageBorderPane

1条答案

按热度按时间
wljmcqd8

wljmcqd81#

我将通过不使用backgroundimage来实现这一点，而只是使用另一个可以包含backgroundimageview的区域。然后平移背景图像视图，使其居中。
我对你的代码进行了调整。我使用组作为场景的根节点。在这个根目录中，我放置了背景的imageview和borderpane。

  1. //BorderPane()
  2.         //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
  3.         BorderPane borderPane = new BorderPane();
  5.         //jot down the width and height of the scene
  6.         double width = 600;
  7.         double height = 600;
  9.         //Image(InputStream is)
  10.         //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  11.         Image img = new Image(file.getAbsoluteFile().toURI().toString());
  12.         ImageView background = new ImageView(img);
  13.         //..center the background
  14.         double translateX = width/2 - img.getWidth()/2;
  15.         background.setTranslateX(translateX);
  17.         //Button(String text)
  18.         //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
  19.         Button btn = new Button("Center");
  21.         //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
  22.         borderPane.setCenter(btn);
  24.         //make root with BorderPane and background image
  25.         Group root = new Group (background, borderPane);
  27.         Scene scene = new Scene(root, width, height);

编辑：处理调整大小
1） 将背景图像视图移动为对象字段。2） 创建背景图像视图居中的方法。3） 每当调整窗口大小时，创建回调以使背景图像视图居中。

  1. public class Try1 extends Application {
  3.     private ImageView background = new ImageView(img);
  5.     private final ChangeListener<Number> windowWidthResized = (ObservableValue<? extends Number> ov, Number t, Number t1) -> {
  6.     windowResized();
  7. };
  9.     private final ChangeListener<Number> windowHeightResized = (ObservableValue<? extends Number> ov, Number t, Number t1) -> {
  10.     windowResized();
  11. };
  13.     private void windowResized(){
  14.         double newHeight = scene.getHeight();
  15.         double newWidth = scene.getWidth();
  16.         centerBackgroundImage(newWidth, newHeight);
  17.     }
  19.     private void centerBackgroundImage(double width, double height) {
  20.             double translateX = width/2 - img.getWidth()/2;
  21.             System.out.println(translateX);
  22.             background.setTranslateX(translateX);
  24.             double translateY = height/2 - img.getHeight()/2;
  25.             System.out.println(translateY);
  26.             background.setTranslateY(translateY);
  27.     }
  29.     @Override
  30.     public void start(Stage primaryStage) {
  31.         try {
  33.             //BorderPane()
  34.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html
  35.             BorderPane borderPane = new BorderPane();
  37.             //jot down the width and height of the scene
  38.             double width = 600;
  39.             double height = 600;
  41.             //File(String pathname)
  42.             //https://docs.oracle.com/javase/8/docs/api/java/io/File.html
  43.             File file = new File("./src/application/resourcesa/black_clock.png");
  45.             Image img = null;
  46.             if(file.exists()) {
  47.                 //Image(InputStream is)
  48.                 //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  49.                 img = new Image(file.getAbsoluteFile().toURI().toString());
  50.             } else {
  51.                 //Image(String url)
  52.                 //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/image/Image.html
  53.                 img = new Image("https://raw.githubusercontent.com/4nds/CenteredBackgroundImage/master/Background/src/application/resources/black_clock.png");
  54.             }
  56.             background.setImage(img);
  58.             //..center the background
  59.             centerBackgroundImage(width, height);
  61.             //Button(String text)
  62.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/control/Button.html
  63.             Button btn = new Button("Center");
  65.             //https://docs.oracle.com/javase/8/javafx/api/javafx/scene/layout/BorderPane.html#setCenter-javafx.scene.Node-
  66.             borderPane.setCenter(btn);
  68.             //make root with BorderPane and background image
  69.             Group root = new Group (background, borderPane);
  71.             Scene scene = new Scene(root, width, height);
  73.             //add callbacks to handle window resize
  74.             scene.heightProperty().addListener(windowResized);
  75.             scene.widthProperty().addListener(windowWidthResized);        
  77.             primaryStage.setScene(scene);
  79.             //this lines set borderPane's dimensions to be the same as scene
  80.             borderPane.prefHeightProperty().bind(scene.heightProperty());
  81.             borderPane.prefWidthProperty().bind(scene.widthProperty());
  83.             primaryStage.show();
  85.         } catch(Exception e) {
  86.             e.printStackTrace();
  87.         }
  88.     }
  90.     public static void main(String[] args) {
  91.         launch(args);
  92.     }
  93. }
展开查看全部
赞(0）分享  回复(0）举报  2021-07-03
我来回答

相关问题

    查看更多

    热门标签

    更多
    JavaquerypythonNode开发语言requestUtil数据库Table后端算法LoggerMessageElementParser

    最新问答

    更多
    • 蜀ICP备13028337号-1 大数据知识库 https://www.saoniuhuo.com © All rights reserved
    • 本站内容来源互联网,如果侵犯您的权益请联系我们删除, 联系方式：448109455@qq.com