CODEWITHSUNDEEP
javajavafx-2scenebuilder
user3203690
user3203690

Reputation: 113

Container for image

I'm programming a app with JavaFX and Scene Builder. I want to create a container and insert an image inside.

But, the container have a size so if the image goes out that limits you can't see this image. For Example, make a container and make the image too much bigger outside that, but just see what is inside the container.

Is that possible?

Upvotes: 1

Views: 2573

Answers (1)

jewelsea
jewelsea

Reputation: 159436

Solution

Use an ImageView (which is a node container for an Image). You can set a viewport on the ImageView to have the view render a specific part of an image.

Alternative Implementation

Specify your image in CSS and use combinations of -fx-background-image, -fx-background-repeat, -fx-background-position and -fx-background-size as defined in the JavaFX CSS reference guide.

The rest of this answer deals with just the FXML based solution and not the CSS based solution.

Code Based Sample

Here is a code snippet (adapted from the ImageView javadoc) which demonstrates setting a viewport in code:

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 Based Sample

Here is some FXML to demonstrate the viewport approach.

<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>

Here is a complete example which you can load up into SceneBuilder. The first ImageView displays an unclipped image, the second ImageView displays a clipped image.

clipper

<?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>

On using the FXML Based Sample in SceneBuilder

To generate the FXML, the majority of the work was done in SceneBuilder, but setting the viewport was done by hand editing the FXML saved from SceneBuilder (because SceneBuilder 1.1 does not possess the UI to set the viewport on ImageViews from within the SceneBuilder tool). After hand-editing the FXML to add the viewport, you can reload the FXML in SceneBuilder and SceneBuilder will render the viewport in the hand-edited FXML fine.

Also, SceneBuilder 2 build 14 preview did not display images that are located using the http protocol (SceneBuilder 1.1 did not have an issue with this).

Attribution

Icon used in the answer is licensed CC Attribution-Noncommercial-Share Alike 3.0 with a linkback to the icon author.

Upvotes: 2

Related Questions