Michael Holley :
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 :
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;
}
});
Guess you like
Origin http://10.200.1.11:23101/article/api/json?id=415305&siteId=1