在JavaFX中拖动鼠标时，圆圈不可见

Question

我在JavaFX中创建了一个小的绘画程序，并且有了一个圆形创建工具。目前，我可以正确地画圆，但与我的其他工具不同，我看不到正在创建的圆(即，当我拖动鼠标时)。只有当我松开鼠标时，我才能看到圆(以正确的尺寸绘制)。我试图在拖动时添加一个< code>strokeOval()方法，但是它创建了一个奇怪的“泪珠”状的圆。我什么都试过了，有人能帮忙吗？

这是我的代码:

public CircleController(Canvas canvas, Scene mainScene, BorderPane borderPane) {

    this.borderPane = borderPane;
    this.mainScene = mainScene;
    this.graphicsContext = canvas.getGraphicsContext2D();

    circle = new Circle();
    circle.setStrokeWidth(1.0);
    circle.setFill(Color.WHITE);
    circle.setStroke(Color.BLACK);

    mousePressed = event -> {
        startingPosX = event.getX();
        startingPosY = event.getY();
        borderPane.getChildren().add(circle);

    };

    mouseReleased = event -> {
        borderPane.getChildren().remove(circle);
        double width = Math.abs(event.getX() - startingPosX);
        double height = Math.abs(event.getY() - startingPosY);
        graphicsContext.strokeOval(startingPosX, startingPosY, width, height);
        graphicsContext.setStroke(Color.BLACK);
        removeListeners();
    };

    mouseDragged = event -> {
        circle.setCenterX(event.getX() - startingPosX);
        circle.setCenterY(event.getY() - startingPosY);

    };
}

上面的代码正确创建了圆，但在我释放鼠标之前无法看到。我将上述事件处理程序应用于我的场景：

@Override
public void handle(ActionEvent event) {
    mainScene.setOnMousePressed(mousePressed);
    mainScene.setOnMouseDragged(mouseDragged);
    mainScene.setOnMouseReleased(mouseReleased);
}

任何人都可以帮忙吗？

Answer 1

你画的是椭圆形而不是圆形。循环类无法正确处理此问题。您需要椭圆。此外，请注意，从手势开始向上/向左拖动会导致椭圆的奇怪行为，因为它始终绘制在坐标系的第一象限，原点位于拖动手势的开始处。

以下代码应允许在每个象限绘制椭圆，并使用< code>Ellipse作为“预览”:

// TODO: replace circle field with ellipse field of type Ellipse
ellipse = new Ellipse();
ellipse.setStrokeWidth(1.0);
ellipse.setFill(Color.TRANSPARENT);
ellipse.setStroke(Color.BLACK);

mousePressed = event -> {
    startingPosX = event.getX();
    startingPosY = event.getY();
    ellipse.setCenterX(startingPosX);
    ellipse.setCenterY(startingPosY);
    ellipse.setRadiusX(0);
    ellipse.setRadiusY(0);
    borderPane.getChildren().add(ellipse);
};

mouseReleased = event -> {
    borderPane.getChildren().remove(ellipse);
    double width = Math.abs(event.getX() - startingPosX);
    double height = Math.abs(event.getY() - startingPosY);
    graphicsContext.setStroke(Color.BLACK);
    graphicsContext.strokeOval(Math.min(startingPosX, event.getX()), Math.min(startingPosY, event.getY()), width, height);
    removeListeners();
};

mouseDragged = event -> {
    ellipse.setCenterX((event.getX() + startingPosX) / 2);
    ellipse.setCenterY((event.getY() + startingPosY) / 2);
    ellipse.setRadiusX(Math.abs((event.getX() - startingPosX) / 2));
    ellipse.setRadiusY(Math.abs((event.getY() - startingPosY) / 2));
};