JavaFX中放置在Pane上的矩形超出边界时如何裁剪溢出部分

JavaFX默认Pane容器不会自动裁剪超出自身边界的子节点内容，要实现你需要的超出部分隐藏效果，可使用以下两种方案：

方案1：开启内置边界裁剪（推荐） #

直接调用Pane的setClipToBounds(true)方法即可，开启后容器会自动裁剪所有超出宽高范围的子节点内容，无需额外计算：

Java代码示例 #

// 初始化Pane
Pane contentPane = new Pane();
// 开启边界裁剪
contentPane.setClipToBounds(true);
// 添加矩形等子节点逻辑保持不变
Rectangle wideRect = new Rectangle(800, 60); // 假设该矩形宽度大于Pane宽度
contentPane.getChildren().add(wideRect);

FXML写法示例 #

<Pane clipToBounds="true" prefWidth="400" prefHeight="200">
    <!-- 子节点内容 -->
    <Rectangle width="800" height="60" fill="skyblue"/>
</Pane>

方案2：自定义裁剪区域 #

如果你需要非矩形的裁剪效果，或者需要自定义裁剪范围，可以手动设置clip属性，以下是和Pane边界完全匹配的裁剪实现：

Pane contentPane = new Pane();
// 创建裁剪区域，绑定Pane的宽高属性保证Pane缩放时裁剪区域同步更新
Rectangle clipArea = new Rectangle();
clipArea.widthProperty().bind(contentPane.widthProperty());
clipArea.heightProperty().bind(contentPane.heightProperty());
contentPane.setClip(clipArea);

效果对比 #

• 裁剪前效果：
  
• 裁剪后目标效果：
  

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