How-To's > How do I change an object's size?
You can change a node's size in several ways:
Use the scaleX and scaleY Variables
The scaleX and scaleY variables are available for any node that inherits from the Node class. These variables scale the object from the object's center. The default scale size of an object is 1.0, with a range of 0.0 to any number. For example, the value 2.0 means twice the size, and the value 0.5 means half the size. A scale of 0.0 makes the object disappear.
The scaleX and scaleY variables can be used whether the node's size is determined by width and height (rectangles), radii (circles, ellipses), or something more arbitrary (polygons or shapes created with the Path class).
Example Code 1: scaleX and scaleY
In the following example, two lines are defined. The line on the left is displayed at the default scale value of 1.0. The line on the right is displayed with scaleX and scaleY set to 2.0. Note that the stroke width is also doubled in scale.
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
Stage {
scene: Scene {
width: 140
height: 60
content: [
Line {
startX: 50
startY:20
endX:50
endY:40
stroke:Color.ORANGERED
strokeWidth:2
}
Line {
startX: 100
startY:20
endX:100
endY:40
stroke:Color.ORANGERED
strokeWidth:2
scaleX:2.0
scaleY:2.0
}
]
}
}
Example Code 2: Scale After Mouse Click
To animate the change in scale onscreen, add a variable that changes the scale after a mouse click. The following code creates a zoom-out and zoom-in effect when you click on the line.
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Line;
import javafx.stage.Stage;
import javafx.scene.input.MouseEvent;
var scale = 1.0;
var newscale = 2.0;
Stage {
scene: Scene {
width: 140
height: 60
content: [
Line {
startX: 50
startY: 20
endX: 50
endY: 40
stroke: Color.ORANGERED
strokeWidth: 8
scaleX: bind scale
scaleY: bind scale
onMouseClicked: function( zoom: MouseEvent ):Void {
if (scale == 1.0) scale = newscale else scale = 1.0;
}
}
]
}
}
To control the speed at which the object scales, the easiest approach is to use the ScaleTransition class instead of scaleX and scaleY.
Use the ScaleTransition Class
The ScaleTransition class makes it easy to animate the change in size, because it inherits variables from the Timeline class. The following example shows the use of the ScaleTransition class to make a rectangle grow larger and smaller around the center of the rectangle .
Example Code 3: Animated ScaleTransition
import javafx.stage.Stage;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.paint.Color;
import javafx.animation.transition.ScaleTransition;
def node = Rectangle {
x: 100 y: 40
height: 20 width: 20
arcHeight: 5 arcWidth: 5
fill: Color.web("#1F6592")
}
def scaleTransition = ScaleTransition {
duration: 5s node: node
byX: 1.5 byY: 1.5
repeatCount:4 autoReverse: true
}
scaleTransition.play();
Stage {
title: "Animated Square"
width: 300
height: 200
scene: Scene {
content: [
node
]
}
}
Use a Scale Transformation
The Scale transformation does not just expand or shrink the object; instead, it moves the entire coordinate space in which the object is defined. How the coordinate space moves depends on both the scale and the pivot point of the object. The pivot point defines the space around which the coordinate space expands or shrinks.
Transformations are good to use when you are working with groups, especially groups that have their own animating children, because the transformation lets you set the pivot point for the entire group or individual pivot points for children in the group.
Example Code 4: Scale Transformation
The following code displays a line grid as a concrete representation of the coordinate space in the scene graph. A blue rectangle and a red circle are also defined. The red circle represents the pivot point, defined with x and y coordinates in the application. When you click on the rectangle, the Scale transformation expands or shrinks the coordinate space around the pivot point. The line grid, the rectangle, and the circle representing the pivot point are all defined in a group, and the Scale transformation is applied to the entire group, so you see all of the objects growing larger or smaller as the coordinate space expands or shrinks.
In this example, the pivot point is defined at 75, 75, which correspond to the center point of the rectangle. This means that the rectangle expands or shrinks from its center point, because the entire coordinate space is expanding or shrinking from that point. Try changing the pivot point to 0,0 or to 150,150, and alter the scale from 2.0 to 4.0 to 0.5. In each case, the coordinate space will expand or shrink around the pivot point, represented by the red circle. Depending on the position of the rectangle with respect to the pivot point, the Scale transformation will either push the rectangle away from the pivot point or bring it closer.
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.shape.Line;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;
import javafx.scene.input.MouseEvent;
import javafx.scene.shape.Circle;
var scale = 1.0;
var newscale = 0.5;
var pivotx = 75;
var pivoty = 75;
var lines = Group {
transforms: Scale {
x: bind scale
y: bind scale
pivotX: pivotx
pivotY: pivoty
}
content: [
for(num in [0..18]) {[
Line {
startX: 0
startY: num*25
endX: 450
endY: num*25
},
]},
for(num in [0..18]) {[
Line {
startX: num*25
startY: 0
endX: num*25
endY: 450
},
]},
Rectangle {
x:50
y:50
height: 50
width: 50
fill: Color.BLUE
onMouseClicked: function( zoom: MouseEvent ):Void {
if (scale == 1.0) scale = newscale else scale = 1.0;
}
}
Circle {
centerX: pivotx
centerY: pivoty
radius:10
fill:Color.RED
}
]
};
Stage {
title: "Scale transformation"
width: 500
height: 500
scene: Scene {
content: [
lines
]
}
}
You can animate transformations by changing the scale in a key frame, as in the following example. You can try varying the scale and the pivot point in the code to compare the results at runtime.
import javafx.scene.paint.Color;
import javafx.scene.Group;
import javafx.scene.shape.Line;
import javafx.scene.Scene;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Scale;
import javafx.stage.Stage;
import javafx.scene.shape.Circle;
import javafx.animation.Timeline;
import javafx.animation.Interpolator;
var scale = 1.0;
var pivotx = 75;
var pivoty = 75;
var objectgrid = Group {
transforms: Scale {
x: bind scale
y: bind scale
pivotX: pivotx
pivotY: pivoty
}
content: [
for(num in [0..18]) {[
Line {
startX: 0
startY: num*25
endX: 450
endY: num*25
},
]},
for(num in [0..18]) {[
Line {
startX: num*25
startY: 0
endX: num*25
endY: 450
},
]},
Rectangle {
x:50
y:50
height: 50
width: 50
fill: Color.BLUE
}
Circle {
centerX: pivotx
centerY: pivoty
radius:10
fill:Color.RED
}
]
};
def t = Timeline {
repeatCount: Timeline.INDEFINITE
autoReverse: true
keyFrames: [
at (0s) { scale => 1.0 }
at (5s) { scale => 2.0 tween Interpolator.LINEAR }
at (10s) {scale => 1.0 tween Interpolator.LINEAR }
at (15s) {scale => 0.5 tween Interpolator.LINEAR }
]
}
t.play();
Stage {
title: "Scale transformation"
width: 500
height: 500
scene: Scene {
content: [
objectgrid
]
}
}
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. - Effects Playground for Mobile
Demonstrates the use of theScaletransformation in a mobile application. - 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
Related How-To Topics
- How do I apply zoom-in and zoom-out effects?
- How can I keep the same stroke width while scaling the object?
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.