Canvas 使用JavaFX中的MouseEvent和MouseClicked选择并移动画布图像

我有一个应用程序的示例，它使用GraphicsContext绘制图片，工作原理如下图所示

问题是用Canvas MouseEvent和MouseClicked选择并水平移动蓝色圆圈

这就是结果：

可以使用canvas.setonmouse单击在画布中选择蓝色圆圈，并使用canvas.setOnMouseMoved水平移动，而不知道蓝色圆圈的位置？–

---

请注意，我为圆添加了单独的层。 然后，在水平移动的SetOnMouseDrawed方法中，您应该将圆层平移到新的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();
}

---

我修改了你的代码允许你

选择/取消选择鼠标选中的圆 鼠标移动中圆圈的水平移动

---

如果只在画布中创建节点，而不是在画布中创建节点，这种事情通常会更容易。如果您决定改用场景图节点，则如下所示。

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

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

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

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

}