java - 图像容器

Question

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

但是，容器有一个大小，因此如果图像超出限制，您将看不到该图像。 例如，制作一个容器并将图像放在容器之外太大，但只需看看容器内有什么。

这可能吗？

Answer 1

解决方案

使用 ImageView (这是图像 ). 的节点容器，您可以在 ImageView 上设置 viewport 以使 View 呈现图像的特定部分。

替代实现

在 CSS 中指定图像，并使用 -fx-background-image、-fx-background-repeat、-fx-background-position 和 -fx-background-size 的组合，如JavaFX CSS 引用指南。

本答案的其余部分仅涉及基于 FXML 的解决方案，而不是基于 CSS 的解决方案。

基于代码的示例

这里是一个代码片段(改编自 ImageView javadoc )，演示了在代码中设置视口(viewport):

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 来演示视口(viewport)方法。

<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 中完成的，但是设置视口(viewport)是通过手动编辑从 SceneBuilder 保存的 FXML 来完成的(因为 SceneBuilder 1.1 不具备从 SceneBuilder 中设置 ImageView 上的视口(viewport)的 UI)场景构建器工具)。手动编辑 FXML 添加视口(viewport)后，您可以在 SceneBuilder 中重新加载 FXML，SceneBuilder 将在手动编辑的 FXML 中渲染视口(viewport)。

此外，SceneBuilder 2 build 14 预览版不会显示使用 http 协议(protocol)定位的图像(SceneBuilder 1.1 没有此问题)。

归因

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