JavaFX Canvas-Drawing

Question

I am currently working on a JavaFX-Drawing-Application using a canvas. With the help of the GraphicsContext I am drawing lines using the beginPath() and lineTo()-methods, but I couldn't figure out a proper way to implement a eraser.

For now I am just using the clearRect()-method, but this causes problems when quickly dragging the mouse like in the image. Black = Drawn and White = Eraser Preview

Take a look at my implementation :)

package GUI;

import javafx.application.Application;
import javafx.application.Platform;
import javafx.geometry.Insets;
import javafx.geometry.Orientation;
import javafx.geometry.Pos;
import javafx.scene.Scene;
import javafx.scene.canvas.Canvas;
import javafx.scene.canvas.GraphicsContext;
import javafx.scene.control.*;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;

public class Main extends Application {

    private final int mouseOffset = 60;

    private Stage window;
    private Canvas canvas;
    private GraphicsContext gc;

    @Override
    public void start(Stage primaryStage) {
        window = primaryStage;
        window.setTitle("Drawing Board ~ by Michael Holley");
        window.setX(100);
        window.setY(100);
        window.setResizable(false);
        window.setOnCloseRequest(e -> {
            Platform.exit();
            System.exit(0);
        });
        BorderPane layout = new BorderPane();

        /* OPTION PANE */
        HBox optionPane = new HBox();
        optionPane.setPrefHeight(60);
        optionPane.setSpacing(10);
        optionPane.setPadding(new Insets(10, 10, 10, 10));
        optionPane.setAlignment(Pos.CENTER);
        ColorPicker colorSelection = new ColorPicker();
        colorSelection.setValue(Color.CORNFLOWERBLUE);
        colorSelection.setOnAction(actionEvent -> {
            gc.setFill(colorSelection.getValue());
            gc.setStroke(colorSelection.getValue());
        });
        optionPane.getChildren().add(colorSelection);

        Slider sizeSlider = new Slider();
        sizeSlider.setMin(1);
        sizeSlider.setMax(50);
        sizeSlider.setValue(18);
        optionPane.getChildren().add(sizeSlider);

        TextField sizeSliderTF = new TextField();
        sizeSliderTF.setEditable(false);
        sizeSliderTF.setText(String.format("%.0f", sizeSlider.getValue()));
        sizeSliderTF.setPrefWidth(30);
        sizeSliderTF.setAlignment(Pos.CENTER);
        sizeSlider.valueProperty().addListener((observableValue, oldNumber, newNumber) -> {
            sizeSlider.setValue(newNumber.intValue());
            sizeSliderTF.setText(String.format("%.0f", sizeSlider.getValue()));
            gc.setLineWidth(sizeSlider.getValue());
        });
        optionPane.getChildren().add(sizeSliderTF);

        Separator optionPaneSeparator_1 = new Separator();
        optionPaneSeparator_1.setOrientation(Orientation.VERTICAL);
        optionPane.getChildren().add(optionPaneSeparator_1);

        final ToggleGroup group = new ToggleGroup();
        RadioButton drawButton = new RadioButton("Draw");
        drawButton.setToggleGroup(group);
        drawButton.setSelected(true);
        RadioButton eraseButton = new RadioButton("Erase");
        eraseButton.setToggleGroup(group);
        optionPane.getChildren().addAll(drawButton, eraseButton);

        Separator optionPaneSeparator_2 = new Separator();
        optionPaneSeparator_2.setOrientation(Orientation.VERTICAL);
        optionPane.getChildren().add(optionPaneSeparator_2);

        Button clearButton = new Button("Clear");
        clearButton.setOnAction(actionEvent -> gc.clearRect(0, 0, canvas.getWidth(), canvas.getHeight()));
        optionPane.getChildren().add(clearButton);

        Button fillButton = new Button("Fill");
        fillButton.setOnAction(actionEvent -> gc.fillRect(0, 0, canvas.getWidth(), canvas.getHeight()));
        optionPane.getChildren().add(fillButton);
        layout.setTop(optionPane);


        /* CANVAS */
        canvas = new Canvas(800, 740);
        gc = canvas.getGraphicsContext2D();
        gc.setStroke(colorSelection.getValue());
        gc.setFill(colorSelection.getValue());
        gc.setLineWidth(sizeSlider.getValue());

        canvas.setOnMousePressed(mouseEvent -> {
            if (drawButton.isSelected() && !eraseButton.isSelected()) {
                gc.beginPath();
                gc.lineTo(mouseEvent.getSceneX(), mouseEvent.getSceneY() - mouseOffset);
                gc.stroke();
            } else if (!drawButton.isSelected() && eraseButton.isSelected()) {
                double currentSize = sizeSlider.getValue();
                gc.clearRect(mouseEvent.getSceneX() - currentSize / 2, mouseEvent.getSceneY() - currentSize / 2 - mouseOffset, currentSize, currentSize);
            }
        });

        canvas.setOnMouseDragged(mouseEvent -> {
            if (drawButton.isSelected() && !eraseButton.isSelected()) {
                gc.lineTo(mouseEvent.getSceneX(), mouseEvent.getSceneY() - mouseOffset);
                gc.stroke();
            } else if (!drawButton.isSelected() && eraseButton.isSelected()) {
                double currentSize = sizeSlider.getValue();
                gc.clearRect(mouseEvent.getSceneX() - currentSize / 2, mouseEvent.getSceneY() - currentSize / 2 - mouseOffset, currentSize, currentSize);
            }
        });

        layout.setCenter(canvas);


        Scene scene = new Scene(layout, 800, 800);
        scene.getStylesheets().add("GUI/OptionsStyling.css");
        window.setScene(scene);
        window.show();
    }


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

Additional Comment: Yes, I have already thought of just painting over it with the base/ground-color, but this would not be my desired goal with a eraser.

VGR · Accepted Answer

This is a tricky one. It appears there is no way to clear graphics other than the clearRect method. (Even some blend mode and clip-based hacks I attempted did not work.)

You can draw each line segment using clearRect, if you temporarily rotate the graphics context first:

import javafx.geometry.Point2D;
import javafx.scene.transform.Affine;
import javafx.scene.transform.Rotate;

// ...

private Point2D lastErasePoint;

// ...

    canvas.setOnMousePressed(mouseEvent -> {
        if (drawButton.isSelected() && !eraseButton.isSelected()) {
            gc.beginPath();
            gc.lineTo(mouseEvent.getSceneX(), mouseEvent.getSceneY() - mouseOffset);
            gc.stroke();
        } else if (!drawButton.isSelected() && eraseButton.isSelected()) {
            lastErasePoint = new Point2D(
                mouseEvent.getSceneX(), mouseEvent.getSceneY() - mouseOffset);
        }
    });

    canvas.setOnMouseDragged(mouseEvent -> {
        if (drawButton.isSelected() && !eraseButton.isSelected()) {
            gc.lineTo(mouseEvent.getSceneX(), mouseEvent.getSceneY() - mouseOffset);
            gc.stroke();
        } else if (!drawButton.isSelected() && eraseButton.isSelected()) {
            Point2D location = new Point2D(
                mouseEvent.getSceneX(), mouseEvent.getSceneY() - mouseOffset);

            Point2D diff = location.subtract(lastErasePoint);
            double angle = Math.toDegrees(
                Math.atan2(diff.getY(), diff.getX()));
            double width = gc.getLineWidth();

            gc.save();
            gc.setTransform(new Affine(new Rotate(
                angle, lastErasePoint.getX(), lastErasePoint.getY())));
            gc.clearRect(
                lastErasePoint.getX() - width / 2,
                lastErasePoint.getY() - width / 2,
                lastErasePoint.distance(location) + width, width);
            gc.restore();

            lastErasePoint = location;
        }
    });

JavaFX Canvas-Drawing

Answers (2)

Related Questions