JavaFX Transformations Examples

By mkyong | Updated: March 9, 2023

Viewed: 2,989 (+13 pv/w)

Tags: javafx transform node

This article will show you different transformations in JavaFX and how to use them. In JavaFX, we use transformations to translate (moves), scale, rotate and shear the nodes.

Tested with

• Java 17
• JavaFX 17.0.6
• Maven 3

Table of Contents

• 1. JavaFX Transformations example
• 2. Translation Transformation
• 3. Rotation Transformation
• 4. Scale Transformation
• 5. Shear Transformation
• 6. Combining Transformations
• 7. Download Source Code
• 8. References

1. JavaFX Transformations example

Below is the code to show the common JavaFX transformations.

package com.mkyong.javafx;

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.layout.Pane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Rotate;
import javafx.scene.transform.Scale;
import javafx.scene.transform.Shear;
import javafx.stage.Stage;

public class TransformationApp extends Application {

  public static void main(String[] args) {
      launch();
  }

  private void transform(Rectangle box) {

      // playground here.

  }

  @Override
  public void start(Stage primaryStage) throws Exception {

      // box with 200 width and 100 height, in color red
      Rectangle box = new Rectangle(200, 100, Color.RED);

      transform(box);

      Scene scene = new Scene(new Pane(box), 640, 480, Color.WHITE);
      primaryStage.setScene(scene);
      primaryStage.setTitle("JavaFX Transformations examples");
      primaryStage.show();

  }

}

Output

2. Translation Transformation

In JavaFX, the translate means moving a node from its original position to a new position. For example, the below code moves a node 100 pixels to the right and 150 pixels down.

private void transform(Rectangle box) {

      // Translate
      // translate means moves,
      // below moves the box 100 pixels to the right and 150 pixels down.
      box.setTranslateX(100);
      box.setTranslateY(150);

}

Output

3. Rotation Transformation

The below code rotates a node 45 degrees around its center.

private void transform(Rectangle box) {

    box.setTranslateX(100);
    box.setTranslateY(150);

    //  Alternatively, can rotate like this
    //  new Rotate(angle, pivotX, pivotY)

    //  Rotate rotate = new Rotate(45, box.getWidth() / 2, box.getHeight() / 2);
    //  box.getTransforms().add(rotate);

    //  Let’s rotate the box by 45 degrees.
    box.setRotate(45);

}

Output

4. Scale Transformation

The below code resizes a node by scaling factors in the x and y directions.

private void transform(Rectangle box) {

      box.setTranslateX(100);
      box.setTranslateY(150);

      // Scale
      box.setScaleX(1.5);
      box.setScaleY(1.5);

}

Output

5. Shear Transformation

The below code slant a node along the x-axis.

private void transform(Rectangle box) {

      box.setTranslateX(100);
      box.setTranslateY(150);

      // Shear
      // slants a box
      box.getTransforms().add(new Shear(0,0.5));

}

Output

6. Combining Transformations

The below code applies multiple transformations (rotate, scale, and shear) to a node.

private void transform(Rectangle box) {

      box.setTranslateX(100);
      box.setTranslateY(150);

      // combining transformations
      box.getTransforms().addAll(
          new Rotate(90, box.getWidth() / 2, box.getHeight() / 2),
          new Scale(1.2, 1.2),
          new Shear(0.5, 0));

}

Output

7. Download Source Code

8. References

• JavaFX Official Website
• JavaFX Documentation – Transformations