图像容器

Question

我使用JavaFX和Scene Builder编写应用程序。我想创建一个容器并在里面插入一个图像。

但是，容器有一个大小，所以如果图像熄灭限制你无法看到这个图像。 例如，制作一个容器并使图像在外面变得太大，但只要看看容器内部是什么。

这可能吗？

Answer 1

<强>解决方案

使用ImageView（图像的).节点容器您可以在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没有用于在ImageViews中设置视口的UI。 SceneBuilder工具）。在手工编辑FXML以添加视口后，您可以在SceneBuilder中重新加载FXML，并且SceneBuilder将在手工编辑的FXML中渲染视口。

另外，SceneBuilder 2 build 14预览没有显示使用http协议定位的图像（SceneBuilder 1.1没有这个问题）。

<强>归因

答案中使用的图标已获得CC Attribution-Noncommercial-Share Alike 3.0许可，并带有linkback图标作者。