JavaFX。画一个球并从它的中心拖一条线

Question

想法是在 MOUSE_CLICKED 上画一个球并从它的中心开始画一条线，直到它在 MOUSE_DRAGGED 处理程序中被释放。但它确实完全相反，我不是简单地理解它 - 它先画一条线，然后在我释放鼠标后出现球。有人看到问题出在哪里吗？

public class Step extends Application {

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

    @Override
    public void start(Stage stage) {
        Canvas layer1 = new Canvas(500, 500);
        Group root = new Group();
        root.getChildren().add(layer1);

        Ball c_ball = new Ball(0, 0, 50, 0, 0);
        Arrow arrow = new Arrow(0, 0, 0, 0);

        layer1.addEventHandler(MouseEvent.MOUSE_CLICKED,
                ev -> {
                    c_ball.x = ev.getX();
                    c_ball.y = ev.getY();
                    arrow.start_x = ev.getX();
                    arrow.start_y = ev.getY();
                    GraphicsContext gc = layer1.getGraphicsContext2D();
                    gc.setFill(Color.DARKCYAN);
                    gc.fillOval(c_ball.x - c_ball.size / 2, c_ball.y - c_ball.size / 2, c_ball.size, c_ball.size);
                });

        layer1.addEventHandler(MouseEvent.MOUSE_DRAGGED,
                ev -> {
                    GraphicsContext gc_arr = layer1.getGraphicsContext2D();
                    gc_arr.clearRect(0, 0, layer1.getWidth(), layer1.getHeight());
                    gc_arr.strokeLine(arrow.start_x, arrow.start_y, ev.getX(), ev.getY());
                });

        Scene scene = new Scene(root, 500, 500);
        stage.setScene(scene);
        stage.show();

    }
}

这是 Ball 类:

public class Ball {
public double x, y;
public double dx, dy;
public double size;


public Ball(double x, double y, double size, double dx, double dy) {
    this.x = x;
    this.y = y;
    this.size = size;
    this.dx = dx;
    this.dy = dy;

}}

和箭头

public class Arrow  {
public double start_x, start_y;
public double end_x, end_y;

public Arrow(double x1, double y1, double x2, double y2) {
    this.start_x = x1;
    this.start_y = y1;
    this.end_x = x2;
    this.end_y = y2;
}}

Answer 1

查看 MouseEvent.MOUSE_CLICKED 文档，您将看到:

EventType javafx.scene.input.MouseEvent.MOUSE_CLICKED

This event occurs when mouse button has been clicked (pressed and released on the same node). This event provides a button-like behavior to any node. Note that even long drags can generate click event (it is delivered to the top-most node on which the mouse was both pressed and released).

您正在寻找的鼠标事件是 MouseEvent.MOUSE_PRESSED 但在这种情况下您的代码也不会起作用。原因是当您调用 gc_arr.clearRect(0, 0, layer1.getWidth(), layer1.getHeight()); 时，您清除了 MOUSE_DRAGGED 事件中的所有内容。因此您将绘制圆圈，但是您将清除 Canvas 并只画线。如果你删除那条线，你每次拖动鼠标时都会有多条线，但这是一个不同的问题。

您需要退后一步思考，我真的需要用 Canvas 实现我的程序吗？

如果答案是YES，您需要将所有组件保存在一个列表(或某些数据结构，如数组等)中，当您想要更改某些内容时，您需要更新对象并重绘一切

如果答案是NO，那么您采用了正确的方法，您需要将 Canvas 更改为 AnchorPane 或 Pane 等，然后直接在 Pane 。

这是一个使用 AnchorPane 而不是 Canvas 的简单示例。

import javafx.application.Application;
import javafx.scene.Scene;
import javafx.scene.input.MouseEvent;
import javafx.scene.layout.AnchorPane;
import javafx.scene.paint.Color;
import javafx.scene.shape.Circle;
import javafx.scene.shape.Line;
import javafx.stage.Stage;

public class ShapesTest extends Application {

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

    private double arrayStartX;
    private double arrayStartY;
    private AnchorPane root;
    private Line l;

    @Override
    public void start(Stage stage) {

        root = new AnchorPane();

        root.addEventHandler(MouseEvent.MOUSE_PRESSED, ev -> {
            addBall(ev.getX(), ev.getY());
            arrayStartX = ev.getX();
            arrayStartY = ev.getY();

        });

        root.addEventHandler(MouseEvent.MOUSE_DRAGGED, ev -> {
            if (l == null) {
                addLine(ev.getX(), ev.getY());
            } else {
                l.setEndX(ev.getX());
                l.setEndY(ev.getY());
            }

        });

        root.addEventHandler(MouseEvent.MOUSE_RELEASED, ev -> {
            l = null;
        });

        Scene scene = new Scene(root, 500, 500);
        stage.setScene(scene);
        stage.show();

    }

    private void addLine(double x, double y) {
        l = new Line(arrayStartX, arrayStartY, x, y);
        root.getChildren().add(l);

    }

    private void addBall(double x, double y) {
        Circle c = new Circle(x, y, 15);
        c.fillProperty().set(Color.DARKCYAN);
        root.getChildren().add(c);
    }
}

在上面的示例中，如果您愿意，您可以将圆和线信息保留在您自己的自定义对象上，然后在释放鼠标时在每个球上应用物理。