如何在Javafx中绘制一条直线，该线路在用户移动鼠标时会自行更新

Question

所以，我知道如何进行自由手行，但是我想要一条直线，因此当用户单击一个点，当用户释放鼠标的点以及用户拖动鼠标时终点应用鼠标移动，即类似于在油漆应用中绘制直线。

目前使用此代码：

public class JavaFX_DrawOnCanvas extends Application {
    @Override
    public void start(Stage primaryStage) {
        Canvas canvas = new Canvas(400, 400);
        final GraphicsContext graphicsContext = canvas.getGraphicsContext2D();
        initDraw(graphicsContext);
        canvas.addEventHandler(MouseEvent.MOUSE_PRESSED, 
                new EventHandler<MouseEvent>(){
            @Override
            public void handle(MouseEvent event) {
                graphicsContext.beginPath();
                graphicsContext.moveTo(event.getX(), event.getY());
                graphicsContext.stroke();
            }
        });
        canvas.addEventHandler(MouseEvent.MOUSE_DRAGGED, 
                new EventHandler<MouseEvent>(){
            @Override
            public void handle(MouseEvent event) {
                graphicsContext.lineTo(event.getX(), event.getY());
                graphicsContext.stroke();
            }
        });
        canvas.addEventHandler(MouseEvent.MOUSE_RELEASED, 
                new EventHandler<MouseEvent>(){
            @Override
            public void handle(MouseEvent event) {
            }
        });
        StackPane root = new StackPane();
        root.getChildren().add(canvas);
        Scene scene = new Scene(root, 400, 400);
        primaryStage.setTitle("java-buddy.blogspot.com");
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    public static void main(String[] args) {
        launch(args);
    }
    private void initDraw(GraphicsContext gc){
        double canvasWidth = gc.getCanvas().getWidth();
        double canvasHeight = gc.getCanvas().getHeight();
        gc.setFill(Color.LIGHTGRAY);
        gc.setStroke(Color.BLACK);
        gc.setLineWidth(5);
        gc.fill();
        gc.strokeRect(
                0,              //x of the upper left corner
                0,              //y of the upper left corner
                canvasWidth,    //width of the rectangle
                canvasHeight);  //height of the rectangle
        gc.setFill(Color.RED);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(1);
    }
}

如何修改鼠标拖动事件以绘制直线而不是自由手？

Answer 1

通常，我同意评论 - 使用行更容易执行此操作。但是有了画布，您就可以这样实现：

public class JavaFX_DrawOnCanvas extends Application {
    private Pair<Double, Double> initialTouch;
    private Canvas layer = new Canvas();
    @Override
    public void start(Stage primaryStage) {
        StackPane root = new StackPane();
        Canvas canvas = new Canvas(400, 400);
        final GraphicsContext graphicsContext = canvas.getGraphicsContext2D();
        initDraw(graphicsContext);
        canvas.addEventHandler(MouseEvent.MOUSE_PRESSED,
                new EventHandler<MouseEvent>(){
                    @Override
                    public void handle(MouseEvent event) {
                        Canvas newLayer = new Canvas(400, 400);
                        GraphicsContext context = newLayer.getGraphicsContext2D();
                        initDraw(context);
                        layer = newLayer;
                        root.getChildren().add(0, newLayer);
                        initialTouch = new Pair<>(event.getSceneX(), event.getSceneY());
                    }
                });
        canvas.addEventHandler(MouseEvent.MOUSE_DRAGGED,
                new EventHandler<MouseEvent>(){
                    @Override
                    public void handle(MouseEvent event) {
                        GraphicsContext context = layer.getGraphicsContext2D();
                        context.clearRect(0, 0, layer.getWidth(), layer.getHeight());
                        context.strokeLine(initialTouch.getKey(), initialTouch.getValue(), event.getSceneX(), event.getSceneY());
                    }
                });
        root.getChildren().add(canvas);
        Scene scene = new Scene(root, 400, 400);
        primaryStage.setScene(scene);
        primaryStage.show();
    }
    private void initDraw(GraphicsContext gc){
        double canvasWidth = gc.getCanvas().getWidth();
        double canvasHeight = gc.getCanvas().getHeight();
        gc.setFill(Color.LIGHTGRAY);
        gc.setStroke(Color.BLACK);
        gc.setLineWidth(5);
        gc.fill();
        gc.strokeRect(
                0,              //x of the upper left corner
                0,              //y of the upper left corner
                canvasWidth,    //width of the rectangle
                canvasHeight);  //height of the rectangle
        gc.setFill(Color.RED);
        gc.setStroke(Color.BLUE);
        gc.setLineWidth(1);
    }
    public static void main(String[] args) {
        launch(args);
    }
}

因此，基本上，您需要为每条新行创建单独的图层，并使用strokeline方法。请注意，必须以0索引添加新添加的图层，因为否则主帆布的事件处理程序将停止处理事件。