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 的大小

但它不是那样工作的，相反我最终得到的是这样的:

有没有办法将矩形的区域绑定(bind)到矩形所在的 AnchorPane 的区域？或者我通过使用形状来做错了，并且有一种更有效的方法来实现我所需要的？

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

Answer 1

要按照您描述的方式实现您想要的效果，您可以使用 controller class并将矩形的大小绑定(bind)到 Pane 的大小:

<?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(...); 即可更改 Controller 中矩形的颜色。

---

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

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

您可以直接在 anchor Pane 上进行设置:

<?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是对 anchor Pane 的引用。

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

开始:

调整大小:

按几次按钮: