Я разрабатываю простую функцию редактирования изображений как часть более крупного приложения JavaFX, но у меня возникли некоторые проблемы, связанные с отменой / масштабированием и рисованием требований.
My требования следующие:
Пользователь должен иметь возможность:
- Рисовать от руки на изображении
- Увеличение и уменьшение изображения
- Отменить изменения
- Если холст больше окна, у него должны быть полосы прокрутки.
Как я реализовал эти требования:
Рисование выполняется путем запуска линии при нажатии мыши на холсте, поглаживания по ней при перетаскивании и закрытия пути при отпускании кнопки.
Zoom работает путем масштабирования холста до более высокого или более низкого значения.
Метод Undo делает снимок текущего состояния холста при нажатии мыши (до внесения каких-либо изменений) и pu sh в стек I маги. Когда мне нужно отменить некоторые изменения, я вытаскиваю последнее изображение стека и рисую его на холсте, заменяя текущее изображение последним.
Чтобы иметь полосы прокрутки, я просто поместите холст внутри группы и ScrollPane.
Все работает хорошо, кроме случаев, когда я пытаюсь рисовать на масштабированном холсте. В связи с тем, как я реализовал функциональность Undo, мне нужно уменьшить его до 1, сделать снимок узла, а затем уменьшить его до размера, который был раньше. Когда это происходит, и пользователь перетаскивает мышь, положение изображения изменяется под указателем мыши, в результате чего оно рисует линию, которой там быть не должно.
Обычный (немасштабированный холст):
Ошибка (масштабированный холст)
Я пробовал следующие подходы для решения проблемы :
Не масштабировать, чтобы сделать снимок - не вызывает нежелательной строки, но я получаю изображения в стеке разных размеров, если оно меньше (уменьшено ) когда был сделан снимок, теперь у меня есть более низкое разрешение изображения, которое я не могу увеличить без потери качества.
Настройте логику c и вызовите pushUndo событие mouseReleased - это почти сработало, но когда пользователь прокручивал до места и рисовал там, при повторном масштабировании изображение прокручивалось обратно в верхний левый угол;
Пробовал искать способ «клонировать» или сериализовать холст и сохранять объект st в стеке - не нашел ничего, что я смог адаптировать, и JavaFX не поддерживает сериализацию своих объектов.
Я думаю, что проблему можно решить либо переработкой отмените функциональность, поскольку не нужно изменять масштаб холста, чтобы скопировать его состояние, или изменить способ масштабирования холста без его масштабирования, но у меня нет идей о том, как реализовать любой из этих параметров.
Ниже приведен пример функционального кода для воспроизведения проблемы:
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.control.Button;
import javafx.scene.control.ScrollPane;
import javafx.scene.image.Image;
import javafx.scene.layout.BorderPane;
import javafx.scene.layout.HBox;
import javafx.scene.paint.Color;
import javafx.stage.Stage;
import java.util.Stack;
public class Main extends Application {
Stack<Image> undoStack;
Canvas canvas;
double canvasScale;
public static void main(String[] args) {
launch(args);
}
@Override
public void start(Stage stage) {
canvasScale = 1.0;
undoStack = new Stack<>();
BorderPane borderPane = new BorderPane();
HBox hbox = new HBox(4);
Button btnUndo = new Button("Undo");
btnUndo.setOnAction(actionEvent -> undo());
Button btnIncreaseZoom = new Button("Increase Zoom");
btnIncreaseZoom.setOnAction(actionEvent -> increaseZoom());
Button btnDecreaseZoom = new Button("Decrease Zoom");
btnDecreaseZoom.setOnAction(actionEvent -> decreaseZoom());
hbox.getChildren().addAll(btnUndo, btnIncreaseZoom, btnDecreaseZoom);
ScrollPane scrollPane = new ScrollPane();
Group group = new Group();
canvas = new Canvas();
canvas.setWidth(400);
canvas.setHeight(300);
group.getChildren().add(canvas);
scrollPane.setContent(group);
GraphicsContext gc = canvas.getGraphicsContext2D();
gc.setLineWidth(2.0);
gc.setStroke(Color.RED);
canvas.setOnMousePressed(mouseEvent -> {
pushUndo();
gc.beginPath();
gc.lineTo(mouseEvent.getX(), mouseEvent.getY());
});
canvas.setOnMouseDragged(mouseEvent -> {
gc.lineTo(mouseEvent.getX(), mouseEvent.getY());
gc.stroke();
});
canvas.setOnMouseReleased(mouseEvent -> {
gc.lineTo(mouseEvent.getX(), mouseEvent.getY());
gc.stroke();
gc.closePath();
});
borderPane.setTop(hbox);
borderPane.setCenter(scrollPane);
Scene scene = new Scene(borderPane, 800, 600);
stage.setScene(scene);
stage.show();
}
private void increaseZoom() {
canvasScale += 0.1;
canvas.setScaleX(canvasScale);
canvas.setScaleY(canvasScale);
}
private void decreaseZoom () {
canvasScale -= 0.1;
canvas.setScaleX(canvasScale);
canvas.setScaleY(canvasScale);
}
private void pushUndo() {
// Restore the canvas scale to 1 so I can get the original scale image
canvas.setScaleX(1);
canvas.setScaleY(1);
// Get the image with the snapshot method and store it on the undo stack
Image snapshot = canvas.snapshot(null, null);
undoStack.push(snapshot);
// Set the canvas scale to the value it was before the method
canvas.setScaleX(canvasScale);
canvas.setScaleY(canvasScale);
}
private void undo() {
if (!undoStack.empty()) {
Image undoImage = undoStack.pop();
canvas.getGraphicsContext2D().drawImage(undoImage, 0, 0);
}
}
}