Drawing in Canvas choosing tool in Gridpane - multithreading

Question

in attachments i have put an image of my project , in essence I want to draw in a canvas different kind of shape like a line,circle,rectangle ,triangle ecc when i click the relative button, I'm new on the javafx programming , and for now what i have understand it is that the canvas can only modify in the main Thread of the GUI ,and this is the problem , because when i handle the button event "SetonAction" i need a reference of the main canvas to draw line or cirlce ecc. I have try with a new Thread but without success.
If anyone Know a way to do this , i really appricieted.Thanks in adviceenter image description here
For me it was difficult resolve this issue, so I have done a little simplyfy code to understand how the things works , take a look to this:
public class TE1 extends Application {
private Pane root;
private Pane left;
private StackPane right;
private StackPane drawcontainer;
private CustomizedButton btn;
private CustomizedButton btn1;
private Canvas Drawtable;
private SplitPane divisor;
private double x;
private double y;
private double to_x = 0;
private double to_y = 0;
private int line_no = 1;
#Override
public void start(Stage primaryStage) {
root = new StackPane();
Drawtable = new Canvas(400,400);
Drawtable.setWidth(400);
Drawtable.setHeight(400);
GraphicsContext gc = Drawtable.getGraphicsContext2D();
gc.setFill(Color.CADETBLUE);
gc.fillRect(0, 0, 800, 850);
left = new Pane();
left.setMinSize(400,400);
left.setStyle("-fx-background-color:#d7d6d5;");
right= new StackPane();
right.setAlignment(Pos.CENTER);
// right.setStyle("-fx-background-color: #FFFFFF;");
right.setMinSize(400, 400);
divisor = new SplitPane();
//root.addEventFilter(DrawEvent.DRAW_TYPE,new DrawEventHandler());
//root.addEventHandler(DrawEvent.DRAW_TYPE,new DrawEventHandler());
Drawtable.addEventFilter(DrawEvent.DRAW_TYPE,new DrawEventHandler());
// right.getChildren().add(Drawtable);
btn = new CustomizedButton();
btn1= new CustomizedButton();
btn.Set_identity("linea");
btn1.setMinSize(50,50);
btn.setMinSize(50,50);
btn.setMaxSize(50, 50);
btn.setLayoutX(100);
btn.setLayoutY(100);
btn1.setLayoutX(100);
btn1.setLayoutY(180);
btn.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
this.fireEvent();
}
public void fireEvent()
{
Runnable task = ()-> runTask();
Thread background = new Thread(task);
background.setDaemon(true);
background.start();
}
public void runTask()
{
while(btn.isFocused()){
System.out.println("SONO ATTIVO ");
Drawtable.setOnMousePressed((event) ->setFromPos(event));
System.out.println("x vale :"+x+"y vale: "+y);
Drawtable.setOnMouseDragged((event)->
{
right.getChildren().remove(0);
Canvas temp_canvas = new Canvas(400, 400);
GraphicsContext gc = temp_canvas.getGraphicsContext2D();
gc.setFill(Color.BLUEVIOLET);
// setToPos(event);
// drawLine(gc);
right.getChildren().add(0,temp_canvas);
});
Drawtable.setOnMouseReleased((event) -> {
final Canvas new_line = new Canvas(400, 400);
final GraphicsContext gc = new_line.getGraphicsContext2D();
setToPos(event);
drawLine(gc);
//final new stright line
right.getChildren().add(line_no++,new_line);
});
}
}
});
right.getChildren().addAll( new Canvas(), Drawtable);
left.getChildren().add(btn);
left.getChildren().add(btn1);
divisor.getItems().addAll(left,right);
root.getChildren().addAll(divisor);
Scene scene = new Scene(root, 800, 850);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
private void setFromPos(MouseEvent event) {
this.x = event.getX();
this.y = event.getY();
}
private void setToPos(MouseEvent event) {
this.to_x = event.getX();
this.to_y = event.getY();
}
private void drawLine(GraphicsContext gc) {
gc.setFill(Color.RED);
gc.setStroke(Color.BLACK);
gc.setLineWidth(1);
gc.strokeLine(x, y, to_x, to_y);
}
}
Thanks in advice

Answer 1

Using multi-threading here is not necessary and not a good idea either.
Registering event handlers is not a long-running operation and reassigning anonymus classes with the same logic over and over again won't change a thing. Furthermore those modifications need to happen from the JavaFX application thread.
Another issue that should be mentioned is that you're recreating the Canvas during the mouse gesture. You should avoid doing this and instead reuse the existing Canvas. Stacking one Canvas per line should also be avoided. If you need a canvas for the currently drawn line and one for the completed lines that's 2 Canvases. Using Lines would be simpler to implement btw.
Also I recommend ToggleButton for this kind of task. This allows you to access a state independend of the focus. Instead of querying the state repeatedly you should listen to the property (whether you're using selected or focused to add/remove listeners):
private Pane root;
private Pane left;
private StackPane right;
private Button btn1;
private Canvas Drawtable;
private Canvas drawingCanvas;
private GraphicsContext drawingContext;
private SplitPane divisor;
#Override
public void start(Stage primaryStage) {
root = new StackPane();
Drawtable = new Canvas(400, 400);
Drawtable.setWidth(400);
Drawtable.setHeight(400);
// second Canvas for drawing stacked on top of the other canvas
drawingCanvas = new Canvas(Drawtable.getWidth(), Drawtable.getHeight());
drawingContext = drawingCanvas.getGraphicsContext2D();
left = new Pane();
left.setMinSize(400, 400);
left.setStyle("-fx-background-color:#d7d6d5;");
right = new StackPane(Drawtable, drawingCanvas);
right.setAlignment(Pos.CENTER);
right.setStyle("-fx-background-color: #FFFFFF;");
right.setMinSize(400, 400);
divisor = new SplitPane();
ToggleButton btn = new ToggleButton();
btn1 = new Button();
btn.setText("linea");
btn1.setMinSize(50, 50);
btn.setMinSize(50, 50);
btn.setMaxSize(50, 50);
btn.setLayoutX(100);
btn.setLayoutY(100);
btn1.setLayoutX(100);
btn1.setLayoutY(180);
btn.selectedProperty().addListener(new ChangeListener<Boolean>() {
private double x;
private double y;
private void drawLine(GraphicsContext gc, double endX, double endY) {
gc.setStroke(Color.BLACK);
gc.setLineWidth(1);
gc.strokeLine(x, y, endX, endY);
}
private final EventHandler<MouseEvent> pressedHandler = (event) -> {
x = event.getX();
y = event.getY();
};
private final EventHandler<MouseEvent> draggedHandler = (event) -> {
// remove old content & draw new content
drawingContext.clearRect(0, 0, drawingCanvas.getWidth(), drawingCanvas.getHeight());
drawLine(drawingContext, event.getX(), event.getY());
};
private final EventHandler<MouseEvent> releasedHandler = (event) -> {
// clear canvas for line drawing
drawingContext.clearRect(0, 0, drawingCanvas.getWidth(), drawingCanvas.getHeight());
// draw line on background canvas
final GraphicsContext gc = Drawtable.getGraphicsContext2D();
drawLine(gc, event.getX(), event.getY());
};
#Override
public void changed(ObservableValue<? extends Boolean> observable, Boolean oldValue, Boolean newValue) {
// add/remove event handlers based on toggle state of the button
if (newValue) {
drawingCanvas.addEventHandler(MouseEvent.MOUSE_PRESSED, pressedHandler);
drawingCanvas.addEventHandler(MouseEvent.MOUSE_DRAGGED, draggedHandler);
drawingCanvas.addEventHandler(MouseEvent.MOUSE_RELEASED, releasedHandler);
} else {
drawingCanvas.removeEventHandler(MouseEvent.MOUSE_PRESSED, pressedHandler);
drawingCanvas.removeEventHandler(MouseEvent.MOUSE_DRAGGED, draggedHandler);
drawingCanvas.removeEventHandler(MouseEvent.MOUSE_RELEASED, releasedHandler);
}
}
});
left.getChildren().add(btn);
left.getChildren().add(btn1);
divisor.getItems().addAll(left, right);
root.getChildren().addAll(divisor);
Scene scene = new Scene(root, 800, 850);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}

Answer 2

i have succesfully in some way , i have modify the code like this:
public class TE1 extends Application {
private Pane root;
private Pane left;
private StackPane right;
private StackPane drawcontainer;
private CustomizedButton btn;
private CustomizedButton btn1;
private Canvas Drawtable;
private SplitPane divisor;
private double x;
private double y;
private double to_x = 0;
private double to_y = 0;
private int line_no = 1;
private Thread background;
#Override
public void start(Stage primaryStage) {
root = new StackPane();
Drawtable = new Canvas(400,400);
Drawtable.setWidth(400);
Drawtable.setHeight(400);
GraphicsContext gc = Drawtable.getGraphicsContext2D();
left = new Pane();
left.setMinSize(400,400);
left.setStyle("-fx-background-color:#d7d6d5;");
right= new StackPane();
right.setAlignment(Pos.CENTER);
right.setStyle("-fx-background-color: #FFFFFF;");
right.setMinSize(400, 400);
divisor = new SplitPane();
btn = new CustomizedButton();
btn1= new CustomizedButton();
btn.Set_identity("linea");
btn1.setMinSize(50,50);
btn.setMinSize(50,50);
btn.setMaxSize(50, 50);
btn.setLayoutX(100);
btn.setLayoutY(100);
btn1.setLayoutX(100);
btn1.setLayoutY(180);
btn.setOnAction(new EventHandler<ActionEvent>() {
#Override
public void handle(ActionEvent event) {
this.fireEvent();
}
public void fireEvent()
{
Runnable task = ()-> runTask();
Thread background = new Thread(task);
background.setDaemon(true);
background.start();
}
public void runTask()
{
while(btn.isFocused()){
System.out.println("SONO ATTIVO ");
Drawtable.setOnMousePressed((event) ->setFromPos(event));
System.out.println("x vale :"+x+"y vale: "+y);
Drawtable.setOnMouseDragged((event)->
{
right.getChildren().remove(0);
Canvas temp_canvas = new Canvas(400, 400);
GraphicsContext gc = temp_canvas.getGraphicsContext2D();
setToPos(event);
drawLine(gc);
right.getChildren().add(0,temp_canvas);
});
Drawtable.setOnMouseReleased((event) -> {
final Canvas new_line = new Canvas(400, 400);
final GraphicsContext gc = new_line.getGraphicsContext2D();
setToPos(event);
drawLine(gc);
//final new stright line
right.getChildren().add(line_no++,new_line);
});
}
System.out.println("Focused btn state :"+btn.isFocused());
background.interrupt();
}
});
right.getChildren().addAll( new Canvas(), Drawtable);
left.getChildren().add(btn);
left.getChildren().add(btn1);
divisor.getItems().addAll(left,right);
root.getChildren().addAll(divisor);
Scene scene = new Scene(root, 800, 850);
primaryStage.setTitle("Hello World!");
primaryStage.setScene(scene);
primaryStage.show();
}
/**
* #param args the command line arguments
*/
public static void main(String[] args) {
launch(args);
}
private void setFromPos(MouseEvent event) {
this.x = event.getX();
this.y = event.getY();
}
private void setToPos(MouseEvent event) {
this.to_x = event.getX();
this.to_y = event.getY();
}
private void drawLine(GraphicsContext gc) {
gc.setFill(Color.RED);
gc.setStroke(Color.BLACK);
gc.setLineWidth(1);
gc.strokeLine(x, y, to_x, to_y);
}
}
but now i can't understand the reason that when the button isn't focused dosen't stop
draw line on the canvas..any suggestion??