Select 并在 JavaFX 中使用 MouseEvent 和 MouseClicked 移动 Canvas 图像

Question

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

而问题是 select 和 仅水平移动 blue circle 与 Canvas 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.setOnMouseClickedselectcanvas中的blue circle，用[=22]在水平中移动=]，不知道blue circle的位置？ –

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

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

Answer 1

请注意，我为圆圈添加了单独的图层。然后，在水平移动的 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();
}

Answer 2

我修改了你的代码，允许你，

Select/deselect 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);
    }

}

Select 并在 JavaFX 中使用 MouseEvent 和 MouseClicked 移动 Canvas 图像

Select and Move Canvas image with MouseEvent and MouseClicked in JavaFX

javafx

canvas

javafx-2

javafx-8