Tuesday, February 10, 2009

JavaFX Scale and Rotate About Center

The transforms property of a JavaFX scene node use the default pivot point 0,0 for scaling or rotating. This means scaling a rectangle grows it to the right and down.

If you want to scale or rotate about the center you can use the scaleX, scaleY and rotate properties of a node which use the center point of the node as default pivot point:

The following example shows an animation of a rectangle growing and rotating about its center.

var scale : Number = 1.0;
var angle : Number = 10;
var animation = Timeline {
repeatCount: 50
keyFrames: [
KeyFrame {
time: 0.2s
canSkip: false
action: function() {
scale += 0.1;
angle += 5;
}
}
]
}

Stage {
title: "Scale Rectangle Over Center"
width: 300
height: 300
scene: Scene {
content: [
Rectangle {
translateX: 10,
translateY: 10,
scaleX: bind scale,
scaleY: bind scale,
rotate: bind angle,
width: 140,
height: 90
fill: Color.BLACK
}
]

}
}

animation.play()
Post a Comment