JavaFX - 畫布上的可點擊線

Question

我有這個JavaFX應用程序，可以讓你在地圖上繪製位置並連接它們。

我通過繪製地圖作爲畫布上的背景圖像，然後在其上繪製圓圈和線做到這一點。我使用Circle類中的contains（）方法創建了可點擊的圓，但是如何讓這些行可點擊？

編輯：看看這個例子，我只是畫一條線，並設置一個事件處理程序：

Canvas canvas = new Canvas(); 
    GraphicsContext gc = canvas.getGraphicsContext2D(); 

    gc.setLineWidth(5); 
    gc.strokeLine(100, 100, 200, 200); 

    canvas.setOnMouseClicked(event -> { 
     double x = event.getX(), y = event.getY(); 
    }); 

我的問題很簡單：我該如何完成事件處理程序，以便檢測如果點擊是在我剛剛畫的線內？

Answer 1

您應該創建一個畫布並向其添加節點（圓形，線條等）。然後，將鼠標監聽器添加到節點。

例子：

import java.util.ArrayList; 
import java.util.List; 

import javafx.application.Application; 
import javafx.event.EventHandler; 
import javafx.scene.Group; 
import javafx.scene.Node; 
import javafx.scene.Scene; 
import javafx.scene.canvas.Canvas; 
import javafx.scene.canvas.GraphicsContext; 
import javafx.scene.input.MouseEvent; 
import javafx.scene.layout.Pane; 
import javafx.scene.paint.Color; 
import javafx.scene.shape.Circle; 
import javafx.scene.shape.Line; 
import javafx.stage.Stage; 

public class DragNodes extends Application { 

    public static List<Circle> circles = new ArrayList<Circle>(); 

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

    @Override 
    public void start(Stage primaryStage) { 

     Group root = new Group(); 

     Canvas canvas = new Canvas(300, 300); 
     GraphicsContext gc = canvas.getGraphicsContext2D(); 
     drawShapes(gc); 

     Circle circle1 = new Circle(50); 
     circle1.setStroke(Color.GREEN); 
     circle1.setFill(Color.GREEN.deriveColor(1, 1, 1, 0.7)); 
     circle1.relocate(100, 100); 

     Circle circle2 = new Circle(50); 
     circle2.setStroke(Color.BLUE); 
     circle2.setFill(Color.BLUE.deriveColor(1, 1, 1, 0.7)); 
     circle2.relocate(200, 200); 

     Line line = new Line(circle1.getLayoutX(), circle1.getLayoutY(), circle2.getLayoutX(), circle2.getLayoutY()); 
     line.setStrokeWidth(20); 

     Pane overlay = new Pane(); 
     overlay.getChildren().addAll(circle1, circle2, line); 

     MouseGestures mg = new MouseGestures(); 
     mg.makeDraggable(circle1); 
     mg.makeDraggable(circle2); 
     mg.makeDraggable(line); 

     root.getChildren().addAll(canvas, overlay); 

     primaryStage.setScene(new Scene(root, 800, 600)); 
     primaryStage.show(); 
    } 

    private void drawShapes(GraphicsContext gc) { 
     gc.setStroke(Color.RED); 
     gc.strokeRoundRect(10, 10, 230, 230, 10, 10); 
    } 

    public static class MouseGestures { 

     double orgSceneX, orgSceneY; 
     double orgTranslateX, orgTranslateY; 

     public void makeDraggable(Node node) { 
      node.setOnMousePressed(circleOnMousePressedEventHandler); 
      node.setOnMouseDragged(circleOnMouseDraggedEventHandler); 
     } 

     EventHandler<MouseEvent> circleOnMousePressedEventHandler = new EventHandler<MouseEvent>() { 

      @Override 
      public void handle(MouseEvent t) { 

       orgSceneX = t.getSceneX(); 
       orgSceneY = t.getSceneY(); 

       if (t.getSource() instanceof Circle) { 

        Circle p = ((Circle) (t.getSource())); 

        orgTranslateX = p.getCenterX(); 
        orgTranslateY = p.getCenterY(); 

       } else { 

        Node p = ((Node) (t.getSource())); 

        orgTranslateX = p.getTranslateX(); 
        orgTranslateY = p.getTranslateY(); 

       } 
      } 
     }; 

     EventHandler<MouseEvent> circleOnMouseDraggedEventHandler = new EventHandler<MouseEvent>() { 

      @Override 
      public void handle(MouseEvent t) { 

       double offsetX = t.getSceneX() - orgSceneX; 
       double offsetY = t.getSceneY() - orgSceneY; 

       double newTranslateX = orgTranslateX + offsetX; 
       double newTranslateY = orgTranslateY + offsetY; 

       if (t.getSource() instanceof Circle) { 

        Circle p = ((Circle) (t.getSource())); 

        p.setCenterX(newTranslateX); 
        p.setCenterY(newTranslateY); 

       } else { 

        Node p = ((Node) (t.getSource())); 

        p.setTranslateX(newTranslateX); 
        p.setTranslateY(newTranslateY); 

       } 

      } 
     }; 

    } 

}