How-To's > How do I apply zoom-in and zoom-out effects?
You can apply zoom-in and zoom-out effects in several ways:
- Use the
scaleXandscaleYattributes of theNodeclass - Use the
ScaleTransitionclass - Use the
Scaletransformation - Vary the magnification of a portion of an image
The following three code examples lead to the same result. When the viewer clicks the image, the thumbnail expands to the full image size. When the viewer clicks again, the image returns to thumbnail size. The thumbnail image is sized to be 25% of the original asset.
Use the scaleX and scaleY Attributes of the Node Class
Using the scaleX and scaleY attributes of the Node class is the easiest solution if you want to increase or decrease the scale of the object and don't necessarily need animation. The scaleX and scaleY variables always scale about the node's center.
Example Code 1: scaleX and scaleY Variables
The following code initially displays a thumbnail that is 25% of the full image size. The image expands to full size after a mouse click.
import javafx.scene.input.MouseEvent;
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.stage.Stage;
var scene: Scene;
var scale = 1.0;
def image = Image {
url: "{__DIR__}Lamp.jpg"
}
def initialSize = image.width/4;
def imageNode = ImageView {
image: image
fitWidth: initialSize
preserveRatio: true
smooth: true
x: bind (scene.width - initialSize)/2
y: bind (scene.height - initialSize)/2
scaleX: bind scale
scaleY: bind scale
onMouseClicked: function( zoom: MouseEvent ):Void {
if (scale == 1.0) scale = 4.0 else scale = 1.0;
}
};
Stage {
title: "Zoom"
scene: scene = Scene {
width: image.width + 50;
height: image.height + 50;
content: imageNode
}
}
To produce the thumbnail image, the fitWidth variable of the ImageView class is used to size the image to 25% of its actual width.The aspectRatio:true setting adjusts the height of the image automatically to maintaint the width-height ratio. The scale increment is defined in the body of the onMouseClicked() function. When the scale is increased to 4.0, the image expands 400%, in this case displaying at 100% of its actual size for the best resolution. Because the onMouseClicked() function applies to the node in which it is defined, its value will only be true when the mouse click occurs somewhere inside the image.
To control the speed of zoom in and zoom out, you could add a timeline using the Timeline class, in which the key frames use variables that apply to the scale. However, in most cases, scaling the object with animation can be more easily accomplished with the ScaleTransition class, as shown in the next section.
Use the ScaleTransition Class
If you want to control the speed at which he zoom-in or zoom-out effect occurs, use the ScaleTransition class. ScaleTransition inherits from the Timeline class, so you can define a duration and an interpolation method for the animation.
Example Code 2: ScaleTransition Animation
The following example shows the same zoom-out and zoom-in effect after a mouse click on the image, as in the previous example. In this case, however, the zoom occurs over a period of two seconds.
import javafx.scene.input.MouseEvent;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.animation.Interpolator;
import javafx.animation.transition.ScaleTransition;
import javafx.scene.image.Image;
import javafx.stage.Stage;
var scene: Scene;
var scaleadd: Number;
def image = Image {
url: "{__DIR__}Lamp.jpg"
}
def initialWidth = image.width/4;
def initialHeight = image.height/4;
var imagenode: ImageView = ImageView {
image: image
fitWidth: initialWidth
preserveRatio: true
x: bind (scene.width - initialWidth)/2
y: bind (scene.height - initialHeight)/2
onMouseClicked: function( zoom: MouseEvent ):Void {
if (scaleadd == 3.0) scaleadd = -3.0 else scaleadd=3.0;
scaletransition.playFromStart();
}
};
def scaletransition = ScaleTransition {
duration: 2s node: imagenode
byX: bind scaleadd byY: bind scaleadd
interpolator:Interpolator.EASEOUT
};
Stage {
title: "Zoom"
scene: scene = Scene {
width: image.width + 50;
height: image.height + 50;
content: imagenode
}
}
The byX variable in ScaleTransition indicates the incremental amount of scale change, which means the value is added to the starting scale. The image as defined has a starting scale of 1.0. When the byX value of 3.0 is added to the starting scale, the resulting scale is 4.0, or 400% of the original size. When the byX value of -3.0 is added to the expanded image scale of 4.0, the circle returns to scale 1.0, or 100% of the original size.
Use the Scale Transformation
You can use the Scale transformation to apply a zoom-in and zoom-out effect, but for the example shown here it is more work than the previous two approaches to accomplish the same result. Transformations are best used when you when you need full control over the pivot point, such as when you are transforming a group with animated children. For a good example of the use of a transformation, see How do I change an object's size?
Transformations alter the coordinate space around a pivot point. In the example of a scale transformation shown below, to achieve the same scale result as in the previous two code examples, the pivot point is specified as the center of the image. The coordinate space expands or shrinks around the pivot point, which also expands or shrinks the object to scale. Because the coordinate space expands or shrinks, if the pivot point is a different location than the center of the object, the object is "pushed" or "pulled" to a different location in the scene.
Example Code 3: Scale Transformation
In the following example, a Scale transformation is applied to scale the image. The pivot point is set to scale the object from its center.
import javafx.scene.image.Image;
import javafx.scene.image.ImageView;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;
var scene: Scene;
var scale = 1.0;
def image = Image {
url: "{__DIR__}Lamp.jpg"
}
def initialWidth = image.width/4;
def initialHeight = image.height/4;
def imagenode = ImageView {
image: image
fitWidth: initialWidth
preserveRatio: true
smooth: true
x: bind (scene.width - initialWidth)/2
y: bind (scene.height - initialHeight)/2
transforms: [
Scale {
x: bind scale y: bind scale
pivotX: bind (scene.width/2) pivotY: bind (scene.height/2)
}
]
onMouseClicked: function( zoom: MouseEvent ):Void {
if (scale == 1.0) scale=4.0 else scale=1.0;
}
};
Stage {
title: "Zoom"
scene: scene = Scene {
width: image.width + 50;
height: image.height + 50;
content: imagenode
}
}
Vary Magnification of a Portion of an Image
You can zoom in to view part of an image, using the viewport variable of the ImageView or MediaView class. For an example, see Zooming Images With a Magnifying Glass.
Examples
- Enhance Your Application by Applying Transformations
This article provides a basic but comprehensive description of how transformations work, with a sample application that you can download. - Media Browser Tutorial, Module 5 Task 2: Adding Rotate, Zoom, Pan, and Swipe Features
This module of the tutorial contains a section on zooming and panning images for a mobile device. - JavaFX1.2: Understanding Bounds
This article provides information about node size and positiion and the effect of transformations. - JavaFX1.2: Layout
This article povides information about how transformations interact with layout bounds in the scene graph.
API Documentation
Last Updated: November 2009
[Return to How-To's Home]
 |
|
Do you have comments about this article? We welcome your participation in our community. Please keep your comments civil and on point. You may optionally provide your email address to be notified of replies—your information is not used for any other purpose. By submitting a comment, you agree to these Terms of Use.