Delayed drawing of lines on JavaFX canvas

Question

I ran into a problem when trying to draw 2 lines on a JavaFX canvas. I'm trying to draw the first line and after 1 seconds the second one, but for example when I use Thread.sleep(1000) between the lines of code that draw the lines the program waits 1 second and then draws the lines simultaneously.

//AN EXAMPLE
GraphicsContext gc = canvas.getGraphicsContext2D();
drawLine(gc,50,50,120,120);
try {
        Thread.sleep(1000);
    } catch (InterruptedException e) {
        e.printStackTrace();
    }
drawLine(gc,120,120,150,30);

drawLine is the function that I use to draw on the canvas

void drawLine(GraphicsContext gc, double x1, double y1, double x2, double y2){
    Affine prije = gc.getTransform();
    double dx = x2 - x1, dy = y2 - y1;
    double angle = Math.atan2(dy, dx);
    int len = (int) Math.sqrt(dx * dx + dy * dy);
    Transform transform = Transform.translate(x1, y1);
    transform = transform.createConcatenation(Transform.rotate(Math.toDegrees(angle), 0, 0));
    gc.setTransform(new Affine(transform));
    gc.strokeLine(0, 0, len, 0);
    gc.setTransform(prije);
}

Answer 1

One way is to use PauseTransition .

import javafx.animation.PauseTransition;
import javafx.application.Application;
import javafx.scene.Group;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.HBox;
import javafx.scene.transform.Affine;
import javafx.scene.transform.Transform;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TestingGround extends Application
{

    HBox root = new HBox();

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

    @Override
    public void start(Stage primaryStage)
    {
        primaryStage.setTitle("Drawing Operations Test");
        Group root = new Group();
        Canvas canvas = new Canvas(300, 250);
        GraphicsContext gc = canvas.getGraphicsContext2D();
        drawLine(gc, 50, 50, 120, 120);
        PauseTransition wait = new PauseTransition(Duration.seconds(1));
        wait.setOnFinished((e) -> {
            drawLine(gc, 120, 120, 150, 30);
        });
        wait.play();
        root.getChildren().add(canvas);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    void drawLine(GraphicsContext gc, double x1, double y1, double x2, double y2)
    {
        Affine prije = gc.getTransform();
        double dx = x2 - x1, dy = y2 - y1;
        double angle = Math.atan2(dy, dx);
        int len = (int) Math.sqrt(dx * dx + dy * dy);
        Transform transform = Transform.translate(x1, y1);
        transform = transform.createConcatenation(Transform.rotate(Math.toDegrees(angle), 0, 0));
        gc.setTransform(new Affine(transform));
        gc.strokeLine(0, 0, len, 0);
        gc.setTransform(prije);
    }
}

Another route you can take is use Timeline.

import java.util.ArrayList;
import java.util.Arrays;
import java.util.List;
import java.util.concurrent.atomic.AtomicInteger;
import javafx.animation.KeyFrame;
import javafx.animation.Timeline;
import javafx.application.Application;
import javafx.event.ActionEvent;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.layout.HBox;
import javafx.scene.transform.Affine;
import javafx.scene.transform.Transform;
import javafx.stage.Stage;
import javafx.util.Duration;

public class TestingGround extends Application
{

    HBox root = new HBox();

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

    @Override
    public void start(Stage primaryStage)
    {
        List<List<Integer>> lineCoors = new ArrayList();
        List<Integer> lineCoors1 = new ArrayList(Arrays.asList(50, 50, 150, 50));
        List<Integer> lineCoors2 = new ArrayList(Arrays.asList(150, 50, 150, 200));
        List<Integer> lineCoors3 = new ArrayList(Arrays.asList(150, 200, 50, 200));
        List<Integer> lineCoors4 = new ArrayList(Arrays.asList(50, 200, 50, 50));

        lineCoors.add(lineCoors1);
        lineCoors.add(lineCoors2);
        lineCoors.add(lineCoors3);
        lineCoors.add(lineCoors4);

        Canvas canvas = new Canvas(300, 250);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        AtomicInteger counter = new AtomicInteger();
        Timeline timeleine = new Timeline(new KeyFrame(Duration.seconds(1), (ActionEvent event) -> {
            List<Integer> tempCoors = lineCoors.get(counter.getAndIncrement());
            drawLine(gc, tempCoors.get(0), tempCoors.get(1), tempCoors.get(2), tempCoors.get(3));
        }));
        timeleine.setCycleCount(lineCoors.size());
        timeleine.play();

        primaryStage.setTitle("Drawing Operations Test");

        root.getChildren().add(canvas);
        primaryStage.setScene(new Scene(root));
        primaryStage.show();
    }

    void drawLine(GraphicsContext gc, double x1, double y1, double x2, double y2)
    {
        Affine prije = gc.getTransform();
        double dx = x2 - x1, dy = y2 - y1;
        double angle = Math.atan2(dy, dx);
        int len = (int) Math.sqrt(dx * dx + dy * dy);
        Transform transform = Transform.translate(x1, y1);
        transform = transform.createConcatenation(Transform.rotate(Math.toDegrees(angle), 0, 0));
        gc.setTransform(new Affine(transform));
        gc.strokeLine(0, 0, len, 0);
        gc.setTransform(prije);
    }
}