java - 当我在 JavaFX 中拖动鼠标时，圆圈不可见

Question

我正在 JavaFX 中创建一个小型绘图程序，并且有一个圆形创建工具。目前，我可以正确绘制圆圈，但与其他工具不同，我看不到正在创建的圆圈(即当我拖动鼠标时)。只有当我释放鼠标时，我才能看到圆圈(以正确的尺寸绘制)。我尝试在拖动时添加 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

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

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

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