在 JavaFX 中使用 MouseEvent 和 MouseClicked 选择和移动 Canvas 图像

Question

我有一个使用GraphicsContext 绘制图片的应用程序示例，其工作方式如下图所示。

问题是选择和移动只有blue circle水平与CanvasMouseEvent和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);
    }
}

结果就是这样：

可以用canvas.setOnMouseClicked在canvas中选择blue circle，用canvas.setOnMouseMoved在水平中移动，不知道@987654335的位置 @? ——

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

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

Answer 1

我修改了你的代码，让你，

• 选择/取消选择MouseClicked上的圆圈

• 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);
      }
  
  }
  

Answer 2

请注意，我为圆圈添加了单独的图层。 然后，在水平移动的setOnMouseDragged 方法中，您应该将该circle 层转换为新的x 位置。

@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();
}