我正在使用JavaFX和Scene Builder编写应用程序。我想创建一个容器并将图像插入其中。
但是，容器具有一定的大小，因此如果图像超出限制，您将无法看到该图像。
例如，制作一个容器，并在其外部使图像太大，但只看容器内部是什么。
那可能吗？
最佳答案
解
使用ImageView（它是Image ).的节点容器）。可以在ImageView上设置viewport，以使视图呈现图像的特定部分。
替代实施
在CSS中指定图像，并使用JavaFX CSS参考指南中定义的-fx-background-image, -fx-background-repeat, -fx-background-position and -fx-background-size组合。
该答案的其余部分仅涉及基于FXML的解决方案，而不涉及基于CSS的解决方案。
基于代码的样本
这是一个代码片段（从ImageView javadoc改编而成），演示了如何在代码中设置视口：
Image image = new Image("flower.png");
ImageView view = new ImageView();
view.setImage(image);
Rectangle2D viewportRect = new Rectangle2D(40, 35, 110, 110);
view.setViewport(viewportRect);
基于FXML的示例
这是一些FXML来演示视口方法。
<ImageView pickOnBounds="true">
<image>
<Image url="http://icons.iconarchive.com/icons/vincentburton/diaguita-ceramic-bowl/128/Diaguita-Ceramic-Bowl-4-icon.png" />
</image>
<viewport>
<Rectangle2D minX="35.0" minY="55.0" width="55.0" height="40.0" />
</viewport>
</ImageView>
这是一个完整的示例，您可以将其加载到SceneBuilder中。第一个ImageView显示未剪切的图像，第二个ImageView显示剪切的图像。
<?xml version="1.0" encoding="UTF-8"?>
<?import javafx.geometry.Insets?>
<?import javafx.geometry.Rectangle2D?>
<?import javafx.scene.image.Image?>
<?import javafx.scene.image.ImageView?>
<?import javafx.scene.layout.StackPane?>
<?import javafx.scene.layout.VBox?>
<StackPane id="StackPane" maxHeight="-Infinity" maxWidth="-Infinity" minHeight="-Infinity" minWidth="-Infinity" prefHeight="-1.0" prefWidth="-1.0" style="-fx-background-color: burlywood;" xmlns:fx="http://javafx.com/fxml/1" xmlns="http://javafx.com/javafx/2.2">
<children>
<VBox alignment="CENTER" prefHeight="-1.0" prefWidth="-1.0" spacing="10.0" style="-fx-background-color: cornsilk;">
<children>
<ImageView pickOnBounds="true">
<image>
<Image url="http://icons.iconarchive.com/icons/vincentburton/diaguita-ceramic-bowl/128/Diaguita-Ceramic-Bowl-4-icon.png" />
</image>
</ImageView>
<ImageView pickOnBounds="true">
<image>
<Image url="http://icons.iconarchive.com/icons/vincentburton/diaguita-ceramic-bowl/128/Diaguita-Ceramic-Bowl-4-icon.png" />
</image>
<viewport>
<Rectangle2D height="40.0" minX="35.0" minY="55.0" width="55.0" />
</viewport>
</ImageView>
</children>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</VBox>
</children>
<padding>
<Insets bottom="10.0" left="10.0" right="10.0" top="10.0" />
</padding>
</StackPane>
关于在SceneBuilder中使用基于FXML的示例
为了生成FXML，大部分工作是在SceneBuilder中完成的，但是设置视口是通过手动编辑从SceneBuilder中保存的FXML来完成的（因为SceneBuilder 1.1不具备从SceneBuilder工具中在ImageViews上设置视口的UI） 。手动编辑FXML以添加视口之后，可以在SceneBuilder中重新加载FXML，SceneBuilder将在手动编辑的FXML中很好地呈现视口。
此外，SceneBuilder 2内部版本14预览也不显示使用http协议定位的图像（SceneBuilder 1.1对此没有问题）。
归因
答案中使用的图标已获得CC Attribution-Noncommercial-Share Alike 3.0许可，并且linkback授予了图标作者。