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

Question

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

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

Возможно ли это?

Answer 1

Решение

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

Alternative Внедрение

Укажите свое изображение в 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> 

На использовании Based Sample FXML в SceneBuilder

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

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

Attribution

Иконка используется в ответе лицензирована CC Attribution-Noncommercial-Share Alike 3.0 с linkback на значок автора.