Контейнер для изображения

Question

Контейнер для изображения

1

Я программирую приложение с JavaFX и Scene Builder. Я хочу создать контейнер и вставить изображение внутри.

Но контейнер имеет размер, поэтому, если изображение выходит за пределы, вы не можете видеть это изображение. Например, сделайте контейнер и сделайте изображение слишком большим вне этого, но просто посмотрите, что находится внутри контейнера.

Это возможно?

user3203690 13 март 2014, в 23:36

Источник

Теги:

java

javafx-2

scenebuilder

1 ответ

Ещё вопросы

jewelsea · Answer 1 · 2014-03-13T22-54-00.000Z

Решение

Используйте ImageView (который является контейнером узлов для изображения ). Вы можете установить видовое окно на ImageView, чтобы визуализация отображала определенную часть изображения.

Альтернативная реализация

Укажите свое изображение в CSS и используйте комбинации -fx-background-image, -fx-background-repeat, -fx-background-position and -fx-background-size как определено в справочном руководстве JavaFX CSS.

Остальная часть этого ответа касается только решения на основе 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>

Об использовании образца на основе FXML в SceneBuilder

Чтобы сгенерировать FXML, большая часть работы была выполнена в SceneBuilder, но настройка видового экрана была выполнена вручную, отредактировав FXML, сохраненный из SceneBuilder (поскольку SceneBuilder 1.1 не обладает пользовательским интерфейсом для установки видового экрана в ImageViews из инструмента SceneBuilder), После ручного редактирования FXML для добавления видового экрана вы можете перезагрузить FXML в SceneBuilder, а SceneBuilder отобразит область просмотра в редактируемом вручную FXML файле.

Кроме того, предварительный просмотр SceneBuilder 2 build 14 не отображает изображения, которые расположены по протоколу http (у SceneBuilder 1.1 не было проблемы с этим).

приписывание

Значок, используемый в ответе, является лицензированным CC Attribution-Noncommercial-Share Alike 3.0 с ссылкой на автора значка.