How to Translate, Scale, and Rotate in JavaFX

By Doug Lowe

JavaFX allows you to scale, translate, and rotate lines and shapes. Here are several methods of the Node class that are especially useful when working with shapes:

  • The setTranslateX and setTranslateY methods moves the (0, 0) point from the top-left corner to any arbitrary point.

  • The setScaleX and setScaleY methods let you change the scale of a shape so that it appears smaller or larger.

  • The rotate method rotates the component’s coordinate system so that shapes are drawn at an angle.

These methods can be used for any node in the scene graph, and any transformations you apply to one node are inherited by any children of that node. If you apply a transformation to the root node of a scene, the transformation effectively applies to the entire scene.

For example, this figure shows the ShapeMaker program after its root node has been rotated and translated. The only difference is the addition of the following three lines:

group1.setRotate(30);
group1.setTranslateX(110);
group1.setTranslateY(110);

The first line rotates the root node 30 degrees. Then, the next two lines translate the root node 110 pixels in both the x- and the y-axis.

image0.jpg

Scaling changes the relative size of the x- or the y-axis, which allows you to zoom in or out on a single shape or, if you scale the root node, the entire scene. You’ll usually want to scale both the x- and y-axis together, unless you want to intentionally exaggerate just one axis. Here’s an example that doubles the size of the entire scene (assuming group1 is the root node):

group1.setScaleX(200);
group1.setScaleY(200);