ImageView

Inherits from: Node

Overview

The ImageView is a Node used for painting images loaded with Image class.

This class allows resizing the displayed image (with or without preserving the original aspect ratio) and specifying a viewport into the source image for restricting the pixels displayed by this ImageView.

Example code for displaying images

             
import javafx.geometry.Rectangle2D;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.scene.Scene;
import javafx.stage.Stage;

// load the image
var image = Image {
    url: "{__DIR__}flower.png"
}

// simple ImageView: displays the image as is
var iv1 = ImageView {
    image: image
}

// resizes the image to have width of 100 while preserving the ratio and using
// higher quality filtering method; this ImageView is also cached to
// improve performance
var iv2 = ImageView {
    image: image
    fitWidth: 100
    preserveRatio: true
    smooth: true
    cache: true
}

// defines a viewport into the source image (achieving a "zoom" effect) and
// displays it rotated
var iv3 = ImageView {
    image: image
    viewport: Rectangle2D {
        minX: 40
        minY: 35
        width: 110
        height: 110
    }
    rotate: 90
}

Stage {
    title: "ImageView"
    width: 415
    height: 200
    scene: Scene {
        content: HBox {
            content: [iv1, iv2, iv3]
        }
        fill: Color.BLACK
    }
}

The code above produces the following:

Profile: common

Variable Summary

name	type	Default Value	description
image	Image	null	The Image to be painted by this `ImageView`.
x	Number	0	The current x coordinate of the `ImageView` origin.
y	Number	0	The current y coordinate of the `ImageView` origin.
fitWidth	Number	0	The width of the bounding box within which the source image is resized as necessary to fit. If set to a value <= 0, then the intrinsic width of the image will be used as the `fitWidth`. See #preserveRatio for information on interaction between image view's `fitWidth`, `fitHeight` and `preserveRatio` attributes.
fitHeight	Number	0	The height of the bounding box within which the source image is resized as necessary to fit. If set to a value <= 0, then the intrinsic height of the image will be used as the `fitHeight`. See #preserveRatio for information on interaction between image view's `fitWidth`, `fitHeight` and `preserveRatio` attributes.
preserveRatio	Boolean	false	Indicates whether to preserve the aspect ratio of the source image when scaling to fit the image within the fitting bounding box. If set to `true`, it affects the dimensions of this `ImageView` in the following way: If only `fitWidth` is set, height is scaled to preserve ratio If only `fitHeight` is set, width is scaled to preserve ratio If both are set, they both may be scaled to get the best fit in a width by height rectangle while preserving the original aspect ratio If unset or set to `false`, it affects the dimensions of this `ImageView` in the following way: If only `fitWidth` is set, image's view width is scaled to match and height is unchanged; If only `fitHeight` is set, image's view height is scaled to match and height is unchanged; If both are set, the image view is scaled to match both. Note that the dimensions of this node as reported by the node's bounds will be equal to the size of the scaled image and is guaranteed to be contained within `fitWidth x fitHeight` bonding box.
smooth	Boolean	platform-dependent	Indicates whether to use a better quality filtering algorithm or a faster one when transforming or scaling the source image to fit within the bounding box provided by `fitWidth` and `fitHeight`. If set to `true` a better quality filtering will be used, if set to `false` a faster but lesser quality filtering will be used. The default value depends on platform configuration.
viewport	Rectangle2D	null	The rectangular viewport into the image. The viewport is specified in the coordinates of the image, prior to scaling or any other transformations. If `viewport` is `null`, the entire image is displayed. If `viewport` is non- `null`, only the portion of the image which falls within the viewport will be displayed. If the image does not fully cover the viewport then any remaining area of the viewport will be empty.

Inherited Variables

Node

name	type	Default Value	description
id	String		The id of this `Node`. This simple string identifier is useful for finding a specific Node within the scene graph. While the id of a Node should be unique within the scene graph, this uniqueness is not enforced. This is much like the "id" attribute of an HTML element.
styleClass	String		A String identifier which can be used to logically group Nodes, specifically for an external style engine. This variable is exactly analogous to the styleClass attribute on an HTML element.
style	String		A string representation of the CSS style associated with this specific Node. This is exactly analogous to the "style" attribute on an HTML element, but uses the syntax defined in JavaFX CSS.
visible	Boolean	true	Specifies whether this `Node` and any subnodes should be rendered as part of the scene graph. A node may be visible and yet not be shown in the rendered scene if, for instance, it is off the screen or obscured by another Node. Invisible nodes never receive mouse events or keyboard focus, and never maintain keyboard focus when they become invisible.
cursor	Cursor	null	Defines the mouse cursor for this `Node` and subnodes. If null, then the cursor of the first parent node with a non-null cursor will be used. If no Node in the scene graph defines a cursor, then the cursor of the `Scene` will be used.
opacity	Number	1.0	Specifies how opaque (that is, solid) the `Node` appears. A Node with 0% opacity is fully translucent. That is, while it is still #visible and rendered, you generally won't be able to see it. The exception to this rule is when the Z `Node` is combined with a blending mode and blend effect in which case a translucent Node may still have an impact in rendering. An opacity of 50% will render the node as being 50% transparent. A #visible node with any opacity setting still receives mouse events and can receive keyboard focus. For example, if you want to have a large invisible rectangle overlay all Nodes in the scene graph in order to intercept mouse events but not be visible to the user, you could create a large Rectangle that had an opacity of 0%. Opacity is specified as a value between 0 and 1. Values less than 0 or greater than 1 are clipped to 0 and 1 respectively. On some platforms ImageView might not support opacity variable.
clip	Node	null	Specifies a `Node` to use to define the the clipping shape for this Node. This clipping Node is not a child of this `Node` in the scene graph sense. Rather, it is used to define the clip for this `Node`. For example, you can use an javafx.scene.image.ImageView Node as a mask to represent the Clip. Or you could use one of the geometric shape Nodes such as javafx.scene.shape.Rectangle or javafx.scene.shape.Circle. Or you could use a javafx.scene.text.Text node to represent the Clip. See the class documentation for Node for scene graph structure restrictions on setting the clip. If these restrictions are violated by a change to the clip variable, the change is ignored and the previous value of the clip variable is restored. Note: this is a conditional feature. See javafx.runtime.ConditionalFeature#SHAPE_CLIP ConditionalFeature.SHAPE_CLIP for more information.
cache	Boolean	false	A performance hint to the system to indicate that this `Node` should be cached as a bitmap. Rendering a bitmap representation of a node will be faster than rendering primitives in many cases, especially in the case of primitives with effects applied (such as a blur). However, it also increases memory usage. This hint indicates whether that trade-off (increased memory usage for increased performance) is worthwhile. Also note that on some platforms such as GPU accelerated platforms there is little benefit to caching Nodes as bitmaps when blurs and other effects are used since they are very fast to render on the GPU. The `cacheHint` variable provides additional options for enabling more aggressive bitmap caching.
cacheHint	CacheHint	CacheHint.DEFAULT	Additional hint for controlling bitmap caching. Under certain circumstances, such as animating nodes that are very expensive to render, it is desirable to be able to perform transformations on the node without having to regenerate the cached bitmap. An option in such cases is to perform the transforms on the cached bitmap itself. This technique can provide a dramatic improvement to animation performance, though may also result in a reduction in visual quality. The `cacheHint` variable provides a hint to the system about how and when that trade-off (visual quality for animation performance) is acceptable. It is possible to enable the cacheHint only at times when your node is animating. In this way, expensive nodes can appear on screen with full visual quality, yet still animate smoothly. Example: `expensiveNode.cache = true; expensiveNode.cacheHint = CacheHint.QUALITY; ... // Do an animation expensiveNode.cacheHint = CacheHint.SPEED; Timeline { keyFrames: [ KeyFrame { time: 2s values: [ expensiveNode.scaleX => 2.0, expensiveNode.scaleY => 2.0, expensiveNode.rotate=> 360, expensiveNode.cacheHint => CacheHint.QUALITY ] } ] }.play();` Note that `cacheHint` is only a hint to the system. Depending on the details of the node or the transform, this hint may be ignored. If `Node.cache` is false, cacheHint is ignored.
effect	Effect	null	Specifies an effect to apply to this `Node`. Note: this is a conditional feature. See javafx.runtime.ConditionalFeature#EFFECT ConditionalFeature.EFFECT for more information.
disable	Boolean	false	Sets the individual disabled state of this `Node`. Setting `disable` to true will cause this `Node` and any subnodes to become disabled. This variable should be used only to set the disabled state of a `Node`. For querying the disabled state of a `Node`, the #disabled variable should instead be used, since it is possible that a `Node` was disabled as a result of an ancestor being disabled even if the individual `disable` state on this `Node` is `false`.
pickOnBounds	Boolean	false	Defines how the picking computation is done for this node when triggered by a `MouseEvent` or a `contains` function call. If `pickOnBounds` is true, then picking is computed by intersecting with the bounds of this node, else picking is computed by intersecting with the geometric shape of this node.
managed	Boolean	true	Defines whether or not this node's layout will be managed by it's parent. Each parent class follows a strategy for laying out managed children during the scene's layout pass: Group: sets the size of any `Resizable` children to their preferred size; does not alter the size of non-Resizable children; does not position children. Container: sets the size of any `Resizable` content according to its layout rules and each node's layoutInfo; does not alter the size of non-Resizable content; will position nodes (setting `layoutX/layoutY` according to its layout rules. CustomNode: by default it behaves like Group, however its layout behavior may be overridden by a subclass. Parents will ignore unmanaged children for the purposes of layout and it is the application's responsibility to set the size and position of an unmanaged node. By default all nodes are managed. If a `Parent` node is unmanaged, then it will act as a root for layout, which means that layout requests beneath it will cause only the branch rooted by this node to be relayed out.
layoutX	Number	0	Defines the X coordinate of the translation that is added to the transformed coordinates of this `Node` for the purpose of layout. Containers or Groups performing layout will set this variable relative to `layoutBounds.minX` in order to position the node at the desired layout location. For example, if `child` should have a final location of `finalX`: `child.layoutX = finalX - child.layoutBounds.minX;`
layoutY	Number	0	Defines the Y coordinate of the translation that is added to the transformed coordinates of this `Node` for the purpose of layout. Containers or Groups performing layout will set this variable relative to `layoutBounds.minY` in order to position the node at the desired layout location. For example, if `child` should have a final location of `finalY`: `child.layoutY = finalY - child.layoutBounds.minY;`
layoutInfo	LayoutInfoBase		Hook for node-specific layout information used by layout containers. If the node is not a child of a container which supports layout info, this variable will be ignored. Note that layoutInfo object literals may be shared across nodes, which means altering the vars in layoutInfo will affect all such nodes.
transforms	Transform	[]	Defines the sequence of javafx.scene.transform.Transform objects to be applied to this `Node`. This sequence of transforms is applied before #translateX, #translateY, #scaleX, and #scaleY, #rotate transforms. By default, #layoutBounds is defined as the local bounds with all the transforms in this sequence applied.
translateX	Number	0	Defines the X coordinate of the translation that is added to the transformed coordinates of this `Node`. This value will be added to any translation defined by the `transforms` sequence and `layoutX`. This variable can be used to alter the location of a Node without disturbing its layout bounds, which makes it useful for animating a node's location.
translateY	Number	0	Defines the Y coordinate of the translation that is added to the transformed coordinates of this `Node`. This value will be added to any translation defined by the `transforms` sequence and `layoutY`. This variable can be used to alter the location of a Node without disturbing its layout bounds, which makes it useful for animating a node's location.
translateZ	Number	0	Defines the Z coordinate of the translation that is added to the transformed coordinates of this `Node`. This value will be added to any translation defined by the `transforms` sequence and `layoutZ`. This variable can be used to alter the location of a Node without disturbing its layout bounds, which makes it useful for animating a node's location. Note: this is a conditional feature. See javafx.runtime.ConditionalFeature#SCENE3D ConditionalFeature.SCENE3D for more information.
scaleX	Number	1.0	Defines the factor by which coordinates are scaled about the center of the object along the X axis of this `Node`. This is used to stretch or animate the node either manually or by using an animation. This scale factor is not included in #layoutBounds by default, which makes it ideal for scaling the entire node after all effects and transforms have been taken into account. The pivot point about which the scale occurs is the center of the untransformed #layoutBounds.
scaleY	Number	1.0	Defines the factor by which coordinates are scaled about the center of the object along the Y axis of this `Node`. This is used to stretch or animate the node either manually or by using an animation. This scale factor is not included in #layoutBounds by default, which makes it ideal for scaling the entire node after all effects and transforms have been taken into account. The pivot point about which the scale occurs is the center of the untransformed #layoutBounds.
scaleZ	Number	1.0	Defines the factor by which coordinates are scaled about the center of the object along the Z axis of this `Node`. This is used to stretch or animate the node either manually or by using an animation. This scale factor is not included in #layoutBounds by default, which makes it ideal for scaling the entire node after all effects and transforms have been taken into account. The pivot point about which the scale occurs is the center of the rectangular bounds formed by taking #boundsInLocal and applying all the transforms in the #transforms[] sequence. Note: this is a conditional feature. See javafx.runtime.ConditionalFeature#SCENE3D ConditionalFeature.SCENE3D for more information.
rotate	Number	0.0	Defines the angle of rotation about the `Node`'s center, measured in degrees. This is used to rotate the `Node`. This rotation factor is not included in #layoutBounds by default, which makes it ideal for rotating the entire node after all effects and transforms have been taken into account. The pivot point about which the rotation occurs is the center of the untransformed #layoutBounds. Note that because the pivot point is computed as the center of this `Node`'s layout bounds, any change to the layout bounds will cause the pivot point to change, which can move the object. For a leaf node, any change to the geometry will cause the layout bounds to change. For a group node, any change to any of its children, including a change in a child's geometry, clip, effect, position, orientation, or scale, will cause the group's layout bounds to change. If this movement of the pivot point is not desired, applications should instead use the Node's #transforms[] sequence, and add a javafx.scene.transform.Rotate transform, which has a user-specifiable pivot point.
rotationAxis	Point3D	Rotate.Z_AXIS	Defines the axis of rotation of this `Node`. Note: this is a conditional feature. See javafx.runtime.ConditionalFeature#SCENE3D ConditionalFeature.SCENE3D for more information.
blocksMouse	Boolean	false	If `true`, consumes mouse events in this `Node` and does not send them to other nodes further up the scene graph. If a Node wants to block mouse events from going to nodes which are visually obscured by this `Node`, then set blocksMouse to true.
focusTraversable	Boolean	false	Specifies whether this `Node` should be a part of focus traversal cycle. When this property is `true` focus can be moved to this `Node` and from this `Node` using regular focus traversal keys. On a desktop such keys are usually `TAB` for moving focus forward and `SHIFT+TAB` for moving focus backward. When a `Scene` is created, the system gives focus to a `Node` whose `focusTraversable` variable is true and that is eligible to receive the focus, unless the focus had been set explicitly via a call to `requestFocus()`.

Products and Services

Solutions

Downloads

Store

Support

Training

Partners

About

Oracle Technology Network

Profile: desktop, common

Inherits from: Node

Inherited Variables

Node

Oracle Cloud

Java

Customer and Events

Communities

Services and Store

Contact and Chat