java - 是否可以仅对 JavaFX 中的父 Pane 设置子 Pane 设置规则的圆 Angular ？

Question

我有以下 fxml:

<?xml version="1.0" encoding="UTF-8"?>
<?import java.lang.*?>
<?import javafx.scene.layout.*?>
<StackPane maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="400.0" prefWidth="600.0" xmlns="http://javafx.com/javafx/8.0.141" xmlns:fx="http://javafx.com/fxml/1">
   <children>
      <AnchorPane maxHeight="200.0" maxWidth="200.0" prefHeight="200.0" prefWidth="200.0">
         <children>
            <VBox style="-fx-border-radius: 10; -fx-border-color: black; -fx-border-width: 1;" AnchorPane.bottomAnchor="0.0" AnchorPane.leftAnchor="0.0" AnchorPane.rightAnchor="0.0" AnchorPane.topAnchor="0.0">
               <children>
                  <Pane maxWidth="200.0" prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: red;" />
                  <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: cyan;" />
                  <Pane prefHeight="200.0" prefWidth="200.0" style="-fx-background-color: green;" />
               </children>
            </VBox>
         </children>
      </AnchorPane>
   </children>
</StackPane>

结果是这样的:

VBox 具有以下 css 规则:

-fx-border-radius: 10; 
-fx-border-color: black; 
-fx-border-width: 1;

问题是子 Angular (总共 4 个 Angular )在父级之外 - 我的意思是 4 个子 Angular 根据父级半径不是圆的。是否可以在不为子 Pane 设置规则的情况下修复它？如果是，那么如何？我问这个是因为在实际应用中我有很多不同的 child ，这些 child 的顺序可以改变，我不想控制 child 的半径。

Answer 1

您可以对圆 Angular 矩形使用形状裁剪。将其坐标和尺寸绑定(bind)到源 Pane ，它应该可以完美地工作。

import javafx.scene.shape.*;

VBox box = ...;
Rectangle r = new Rectangle();
r.widthProperty().bind(box.widthProperty());
r.heightProperty().bind(box.heightProperty());
r.setArcWidth(10);
r.setArcHeight(10);

box.setClip(r);