86. Translate

With Translate, we can move a node in x or y (for 2D).

We create 3 Rectangles and place them at same location. The red rectangle is not moved, the green rectangle is moved 80 to right and 10 downwards. Lastly, the blue rectangle is moved 80 to left, and 10 downwards. The colors are only half opaque, so we can see the outlines for all three rectangles.

---

package ex86;

import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.paint.Color;
import javafx.scene.shape.Rectangle;
import javafx.scene.transform.Translate;
import javafx.stage.Stage;

public class Ex86 extends Application {
    public static void main(String[] args) {
        Application.launch(args);
    }

    @Override
    public void start(Stage stage) {
        Rectangle rect1 = new Rectangle(100, 0, 100, 50);
        rect1.setFill(Color.rgb(255, 0, 0, 0.5));

        Rectangle rect2 = new Rectangle(100, 0, 100, 50);
        rect2.setFill(Color.rgb(0, 255, 0, 0.5));
        
        Rectangle rect3 = new Rectangle(100, 0, 100, 50);
        rect3.setFill(Color.rgb(0, 0, 255, 0.5));

        Translate translate1 = new Translate(80, 10);
        rect2.getTransforms().addAll(translate1);
        
        Translate translate2 = new Translate(-80, 10);
        rect3.getTransforms().add(translate2);

        Group root = new Group(rect1, rect2, rect3);
        Scene scene = new Scene(root,300,100);
        
        stage.setScene(scene);
        stage.setTitle("Example 86. Translate");
        stage.show();
    }
}

---

This is the output:

---