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>

但最好将其放在外部样式表中：

<?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>

然后在你的主课中：

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

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

.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（主应用程序类）：

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

我的样式表.css：

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

开始：

调整大小：

按几次按钮：