ユーザーがマウスを動かすと自動的に更新される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 double from_x = 0; 
    private double from_y = 0; 
    private double to_x = 0; 
    private double to_y = 0; 
    private int line_no = 1; 

    @Override 
    public void start(Stage primaryStage) { 

     StackPane root = new StackPane(); 
     Canvas canvas = new Canvas(400, 400); 
     final GraphicsContext graphicsContext = canvas.getGraphicsContext2D(); 
     this.initDraw(graphicsContext); 

     canvas.setOnMousePressed((event) -> this.setFromPos(event)); 
     canvas.setOnMouseDragged((event) -> { 
      root.getChildren().remove(0); 
      final Canvas temp_canvas = new Canvas(400, 400); 
      final GraphicsContext gc = temp_canvas.getGraphicsContext2D(); 
      this.setToPos(event); 
      this.drawLine(gc); 
      root.getChildren().add(0,temp_canvas); 
     });   
     canvas.setOnMouseReleased((event) -> { 
      final Canvas new_line = new Canvas(400, 400); 
      final GraphicsContext gc = new_line.getGraphicsContext2D(); 
      this.setToPos(event); 
      this.drawLine(gc); 
      //final new stright line 
      root.getChildren().add(line_no++,new_line);    
     }); 

     root.getChildren().addAll(new Canvas(), 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 drawLine(GraphicsContext gc) { 
     gc.setFill(Color.RED); 
     gc.setStroke(Color.BLUE); 
     gc.setLineWidth(1); 
     gc.strokeLine(from_x, from_y, to_x, to_y);  
    } 

    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 
    } 

    private void setFromPos(MouseEvent event) { 
     this.from_x = event.getSceneX(); 
     this.from_y = event.getSceneY(); 
    } 

    private void setToPos(MouseEvent event) { 
     this.to_x = event.getSceneX(); 
     this.to_y = event.getSceneY(); 
    } 
} 

Answer 2

は一般的に、私はコメントに同意し、このデモを試すことができます - Lineを使用してこれを実行する方が簡単です。 しかし、キャンバスにあなたがそうのように同じことを達成することができます：だから

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 methodを使用する必要があります。メインのキャンバスのイベントハンドラがプロセスイベントを停止するため、新しく追加されたレイヤはルートの子オブジェクトに0インデックスで追加する必要があることに注意してください。