的 SSCCE

Question

我需要一个带有笔划的AnchorPane，它会在调整舞台大小时调整大小，让我放一些图像来更好地解释自己：

我通过使用填充颜色为White且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（主app类）：

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

开始：

调整尺寸：

按几次按钮：

Answer 2

也许我错过了一些东西，但是为什么不打开AnchorPane的边界呢？不需要代码。

javafx形状动态调整大小

2 个答案:

的 SSCCE