在JavaFX中使用MouseEvent和MouseClicked选择和移动Canvas图像 [英] Select and Move Canvas image with MouseEvent and MouseClicked in JavaFX

问题描述

我有这个应用程序的示例，该应用程序使用 GraphicsContext 绘制图片，并如下图所示工作。

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

问题是选择并移动仅使用画布水平地<< c $ c>蓝色圆圈 MouseEvent 和 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 中并在水平中移动使用 canvas.setOnMouseMoved ，不知道蓝色圆圈的位置？ –

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

推荐答案

我修改了允许您使用的代码，

I modified your code which allows you,

• 选择/取消选择 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);
    }

}

这篇关于在JavaFX中使用MouseEvent和MouseClicked选择和移动Canvas图像的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！