javafx形状动态调整大小

Question

我需要一个 AnchorPane，它周围有一个描边，可以在调整舞台大小时调整大小，让我放一些图片来更好地解释我自己：

我通过使用填充颜色为白色且 Alpha = 0（透明）的矩形实现了这一点，这是我的 fxml 文件：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane prefHeight="671.0" prefWidth="644.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <children>
  <Rectangle fill="#ffffff00" height="671.0" layoutX="91.0" layoutY="69.0" stroke="RED" strokeType="INSIDE" strokeWidth="10.0" width="644.0"  AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
</children>
</AnchorPane>

当我把舞台变大时，我希望矩形可以调整大小并始终正好适合 AnchorPane 的大小

但它不是那样工作的，相反我得到了这个：

有没有办法将矩形的区域绑定到矩形所在的AnchorPane的区域？或者我为此使用形状做错了并且有更有效的方法来实现我需要的东西？

最后一件事！我需要能够更改 AnchorPane 周围笔划的颜色！非常感谢，如果您需要有关我的代码的更多信息，或者如果我的解释太差，请告诉我，我会改进我的问题！

Answer 1

要按照您描述的方式实现您想要的效果，您可以使用 controller class 并将矩形的大小绑定到窗格的大小：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane prefHeight="671.0" prefWidth="644.0" fx:controller="com.mycompany.myproject.Controller" fx:id="root" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">
  <children>
      <Rectangle fx:id="border" fill="#ffffff00" height="671.0" layoutX="91.0" layoutY="69.0" stroke="RED" strokeType="INSIDE" strokeWidth="10.0" width="644.0"  AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0" />
  </children>
</AnchorPane>

然后

package com.mycompany.myproject ;

import javafx.fxml.FXML ;
import javafx.scene.shape.Rectangle ;
import javafx.scene.layout.AnchorPane ;

public class Controller {

    @FXML
    private AnchorPane root ;
    @FXML
    private Rectangle border ;

    public void initialize() {
        border.widthProperty().bind(root.widthProperty());
        border.heightProperty().bind(border.heightProperty());
    }

}

您只需调用 border.setStroke(...);.

即可更改控制器中矩形的颜色

使用 Rectangle 可能不是最好的方法。您可以完全省略矩形，并使用 CSS 来设置锚窗格本身的样式。你需要的CSS是

-fx-background-color: red, -fx-color ;
-fx-background-insets: 0, 10 ;

您可以直接在锚定窗格上进行设置：

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane prefHeight="671.0" prefWidth="644.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8"
    style="-fx-background-color: red, -fx-color ; -fx-background-insets: 0, 10 ;">

</AnchorPane>

但最好放在外部样式中 sheet:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.shape.*?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<?import javafx.scene.layout.AnchorPane?>


<AnchorPane prefHeight="671.0" prefWidth="644.0" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/8">

</AnchorPane>

然后在你的主 class:

Parent root = FXMLLoader.load(getClass().getResource("path/to/fxml"));
Scene scene = new Scene(root);
scene.getStylesheets().add("my-stylesheet.css");
// ...

与 my-stylesheet.css 包含：

.root {
    -fx-background-color: red, -fx-color ;
    -fx-background-insets: 0, 10 ;
}

最后，如果您使用这样的样式sheet，您可以使用 looked-up color 动态更改边框颜色。修改样式sheet为：

.root {
    my-border-color: red ;
    -fx-background-color: my-border-color, -fx-color ;
    -fx-background-insets: 0, 10 ;
}

然后您可以随时调用

更改边框

root.setStyle("my-border-color: green;")

其中 root 是对锚定窗格的引用。

SSCCE

这是使用最后一种技术的完整示例：

DynamicBorderColor.fxml:

<?xml version="1.0" encoding="UTF-8"?>

<?import javafx.scene.layout.AnchorPane?>
<?import javafx.scene.control.Button?>

<AnchorPane xmlns:fx="http://javafx.com/fxml/1" fx:controller="Controller" fx:id="root" minWidth="600" minHeight="600">
    <Button text="Change Color" onAction="#changeColor" AnchorPane.topAnchor="20" AnchorPane.leftAnchor="20"/>
</AnchorPane>

Controller.java:

import javafx.fxml.FXML;
import javafx.scene.layout.AnchorPane;

public class Controller {

    private int colorIndex ;
    private String[] colors = {"red", "orange", "yellow", "green", "blue", "indigo", "violet"} ;

    @FXML
    private AnchorPane root ;

    @FXML
    private void changeColor() {
        colorIndex = (colorIndex + 1) % colors.length ;
        root.setStyle("border-color: "+colors[colorIndex]+";");
    }
}

DynamicBorderColor.java（主应用 class）：

import java.io.IOException;

import javafx.application.Application;
import javafx.fxml.FXMLLoader;
import javafx.scene.Scene;
import javafx.stage.Stage;

public class DynamicBorderColor extends Application {

    @Override
    public void start(Stage primaryStage) throws IOException {
        Scene scene = new Scene(FXMLLoader.load(getClass().getResource("DynamicBorderColor.fxml")));
        scene.getStylesheets().add("my-stylesheet.css");

        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

my-stylesheet.css:

.root {
    border-color: red ;
    -fx-background-color: border-color, -fx-base ;
    -fx-background-insets: 0, 10 ;
}

开始：

调整大小：

按几次按钮：

javafx形状动态调整大小

javafx shape resize dynamically

javafx

autoresize

fxml

SSCCE