Delayed drawing of lines on JavaFX canvas - user-interface

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);
}
}