JavaFX中Rectangle覆盖父Pane容器Border边框原因咨询

package pkg;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.AnchorPane;
import javafx.scene.layout.Border;
import javafx.scene.layout.BorderStroke;
import javafx.scene.layout.BorderStrokeStyle;
import javafx.scene.layout.BorderWidths;
import javafx.scene.layout.CornerRadii;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.stage.Stage;

public class App extends Application {

    @Override
    public void start(Stage stage) {
        var scene = new Scene(getView(), 640, 480);
        stage.setScene(scene);
        stage.show();
    }

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

    private Pane getView() {
        Pane pane = new Pane();
        Rectangle r = new Rectangle(0, 0, 300, 200);
        r.setFill(Color.RED);
        r.setStroke(Color.YELLOW);
        r.setStrokeWidth(10);
        pane.getChildren().add(r);
        pane.setBorder(new Border(new BorderStroke(Color.BLACK, BorderStrokeStyle.SOLID, CornerRadii.EMPTY,
                new BorderWidths(2))));
        AnchorPane ap = new AnchorPane();
        ap.getChildren().add(pane);
        return ap;
    }
}

运行上述代码后渲染效果如下：

核心异常表现：添加的Rectangle矩形覆盖了其父容器Pane的黑色边框；观测发现Pane的实际尺寸等于Rectangle设定尺寸加矩形自身描边宽度的总和，最终导致边框被遮挡。

这个现象是JavaFX默认渲染、布局规则共同导致的，核心逻辑分三点：

• 普通Pane的自动尺寸计算规则：没有内置布局约束的基础Pane，会自动调整自身宽高来完整包裹所有子节点的完整边界，计算边界时会把子节点的描边、特效等占用的空间全部算入。代码里的Rectangle设置了10px宽的描边，而JavaFX的形状描边默认是居中绘制的——也就是10px的描边，有5px落在定义的(0,0) -> (300,200)矩形区域外侧，5px落在区域内侧，因此带描边的矩形整体实际占位是310px*210px，Pane就会把自身大小调整到刚好匹配这个尺寸。
• 容器边框的绘制位置：Pane的Border是绘制在容器自身边界的内侧，设置的2px黑色实线边框，就是沿着Pane的最外边缘向内2px的范围绘制。
• 场景图渲染顺序：JavaFX渲染节点时遵循「先画父节点自身内容，再画子节点」的顺序。也就是Pane会先画自己的背景、黑色边框，再画里面的Rectangle。此时矩形外侧的5px黄色描边刚好落在Pane最边缘的边框位置，后渲染的黄色描边直接覆盖了先画的黑色边框，就出现了观测到的遮挡效果。

• 给Rectangle设置位置偏移，比如将矩形起始坐标设为(5,5)，给Pane的边框留出绘制空间
• 换用支持内边距设置的布局容器（比如StackPane），给容器设置对应大小的padding，自动为边框预留空间
• 手动给Pane设置固定尺寸，禁用其自动适配子节点大小的行为

内容的提问来源于stack exchange，提问作者Will Hartung