Select and Move Canvas image with MouseEvent and MouseClicked in JavaFX

问题

I have this example of an application that draws pictures with GraphicsContext and works as shown in the pictures below.

And the question is to select and move only the blue circle horizontally with Canvas MouseEvent and MouseClicked

public class JavaFXTest extends Application {

    @Override
    public void start(Stage primaryStage) {
        Group root = new Group();
        Canvas canvas = new Canvas(300,100);
        GraphicsContext gc = canvas.getGraphicsContext2D();

        Stop[] stops;
        LinearGradient gradient;

        // outer circle
        stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)};
        gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
        gc.setFill(gradient);
        gc.fillOval(10, 14, 40, 40);
        gc.fill();
        gc.stroke();

        // Inner circle
        stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)};
        gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops);
        gc.setFill(gradient);
        gc.fillOval(13, 17, 34, 34);
        gc.fill();
        gc.stroke();

        root.getChildren().add(canvas);
        Scene scene = new Scene(root);
        primaryStage.setScene(scene);
        primaryStage.show();
    }

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

And that's the result:

It is possible to select the blue circle in canvas with canvas.setOnMouseClicked and move in horizontal with canvas.setOnMouseMoved, without know the position of blue circle? –

canvas.setOnMouseMoved((MouseEvent e) -> {
});

canvas.setOnMouseClicked((MouseEvent e) -> {
});

回答1:

I modified your code which allows you,

• Select/deselect the circle on MouseClicked

• Horizontal Movement of circle on MouseMove

  public class JavaFXTest extends Application {
      double mouse_x = 0.0;
      double mouse_y = 0.0;
      double circle_x = 10;
      double circle_y = 14;
      double height = 40;
      double width = 40;
      boolean circle_selected = false;
  
      @Override
      public void start(Stage primaryStage) {
          Group root = new Group();
          Canvas canvas = new Canvas(300,100);
          this.createCircle(canvas);
  
          canvas.setOnMouseClicked(e-> this.select(e));
          canvas.setOnMouseMoved(e -> { if(this.circle_selected) this.move(e, canvas); });
  
          root.getChildren().add(canvas);
          Scene scene = new Scene(root);
          primaryStage.setScene(scene);
          primaryStage.show();
      }
  
      //checks whether the mouse location is within the circle or not
      private void select(MouseEvent e) {
          double temp_mouse_x = e.getSceneX();
          double temp_mouse_y = e.getSceneY();
          double x_max = this.circle_x + this.width;
          double y_max = this.circle_y + this.height;
          boolean selected = temp_mouse_x >= this.circle_x && temp_mouse_x <= x_max // x-area
                      &&
                        temp_mouse_y >= this.circle_y && temp_mouse_y <= y_max; //y-area              
  
          if(circle_selected && selected) { 
              //deselect the circle if already selected
              circle_selected = false;
          }else {
              circle_selected = selected;
          }
          this.mouse_x = temp_mouse_x;
          this.mouse_y = temp_mouse_y;
      }
  
      //move circle
      public void move(MouseEvent e, Canvas canvas) {
              double change_x = e.getSceneX() - this.mouse_x;
              this.circle_x += change_x;
              canvas.getGraphicsContext2D().clearRect(0, 0, canvas.getWidth(), canvas.getHeight());
              this.createCircle(canvas);
              this.mouse_x = e.getSceneX();
              this.mouse_y = e.getSceneY();
      }
  
      public void createCircle(Canvas canvas) {
          GraphicsContext gc = canvas.getGraphicsContext2D();
  
          //outer circle
          Stop[] stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)};
          LinearGradient gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
          gc.setFill(gradient);
          gc.fillOval(this.circle_x, this.circle_y, this.width, this.height);
          gc.translate(0, 0);
          gc.fill();
          gc.stroke();
  
          // Inner circle
          stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)};
          gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops);
          gc.setFill(gradient);
          gc.fillOval(this.circle_x + 3, this.circle_y + 3, this.width - 6, this.height - 6);
          gc.fill();
          gc.stroke();    
      }
  
      public static void main(String[] args) {
          launch(args);
      }
  
  }
  

回答2:

Note, that I've added separate layer for the circle. Then, in setOnMouseDragged method for horizontal movement you should translate that circle layer to the new x position.

@Override
public void start(Stage primaryStage) {
     Group root = new Group();
     Canvas background = new Canvas(300,100);

     Canvas circle = new Canvas(60,60);
     GraphicsContext circleContext = circle.getGraphicsContext2D();

     Stop[] stops;
     LinearGradient gradient;

     // outer circle
     stops = new Stop[]{new Stop(0, Color.LIGHTSKYBLUE), new Stop(1, Color.BLUE)};
     gradient = new LinearGradient(0.5, 0, 0.5, 1, true, CycleMethod.NO_CYCLE, stops);
     circleContext.setFill(gradient);
     circleContext.fillOval(10, 14, 40, 40);
     circleContext.fill();
     circleContext.stroke();

     // Inner circle
     stops = new Stop[]{new Stop(0, Color.BLUE), new Stop(1, Color.LIGHTSKYBLUE)};
     gradient = new LinearGradient(0, 0, 1, 1, true, CycleMethod.NO_CYCLE, stops);
     circleContext.setFill(gradient);
     circleContext.fillOval(13, 17, 34, 34);
     circleContext.fill();
     circleContext.stroke();

     circle.setOnMouseDragged(e -> {
         double offsetX = e.getSceneX() - circle.getTranslateX() - circle.getWidth() / 2;
         circle.setTranslateX(circle.getTranslateX() + offsetX);
     });

     root.getChildren().addAll(background, circle);
     Scene scene = new Scene(root);
     primaryStage.setScene(scene);
     primaryStage.show();
}

来源：https://stackoverflow.com/questions/42193899/select-and-move-canvas-image-with-mouseevent-and-mouseclicked-in-javafx