首页 > 解决方案 > Javafx 形状错位

问题描述

我在 javafx 中遇到形状错位的问题。我正在使用 javafx.scene.shape.Shape 对形状进行一些计算。当我像下面的第一个代码一样将所有形状放在一起时,一切都很好。但在我更扩展的程序中,这个想法是动态地向 AnchorPane 添加形状(如果它有助于我可以使用其他类型的窗格)。我在下面粘贴了第二个代码,它显示了形状错位。

第一个代码(好结果):

public class Controller {
public AnchorPane displayPane;

public Circle circleA = new Circle();
public Circle circleB = new Circle();
public Shape resultShape;

public void initialize() {
    setupShapes();
    displayPane.getChildren().add(circleA);
    displayPane.getChildren().add(circleB);
}

public void setupShapes() {
    double d = 100;
    double x = Math.sqrt(3 * Math.pow(d, 2) / 4);

    circleA.setCenterX(300.0);
    circleA.setCenterY(300.0 - d);
    circleA.setRadius(150);
    circleA.setFill(Color.TRANSPARENT);
    circleA.setStroke(Color.BLACK);
    circleA.setStrokeWidth(2);

    circleB.setCenterX(300.0 + x);
    circleB.setCenterY(300.0 + d / 2);
    circleB.setRadius(150);
    circleB.setFill(Color.TRANSPARENT);
    circleB.setStroke(Color.BLACK);
    circleB.setStrokeWidth(2);

    resultShape = Shape.intersect(circleA, circleB);
    resultShape.setFill(Color.DEEPSKYBLUE);
    displayPane.getChildren().add(resultShape);
}
}

第二个代码(错误结果):

public class Controller {
    public AnchorPane displayPane;

    public Circle circleA = new Circle();
    public Circle circleB = new Circle();
    public Shape resultShape;

    public void initialize() {
        setupShapes();
        displayPane.getChildren().add(circleA);
        displayPane.getChildren().add(circleB);

        resultShape = Shape.intersect(circleA, circleB);
        resultShape.setFill(Color.DEEPSKYBLUE);
        displayPane.getChildren().add(resultShape);
    }

    public void setupShapes() {
        double d = 100;
        double x = Math.sqrt(3 * Math.pow(d, 2) / 4);

        circleA.setCenterX(300.0);
        circleA.setCenterY(300.0 - d);
        circleA.setRadius(150);
        circleA.setFill(Color.TRANSPARENT);
        circleA.setStroke(Color.BLACK);
        circleA.setStrokeWidth(2);

        circleB.setCenterX(300.0 + x);
        circleB.setCenterY(300.0 + d / 2);
        circleB.setRadius(150);
        circleB.setFill(Color.TRANSPARENT);
        circleB.setStroke(Color.BLACK);
        circleB.setStrokeWidth(2);
    }
}

此代码仅显示我的较大代码的简化版本,但以复杂的方式说明了我的问题,我认为我这样做的方式可能不是最好的。我想让你的想法使它正常工作。感谢您未来的评论和回答。

左-第一个代码,右-第二个代码

[编辑] 我的简单 fx​​ml:

<AnchorPane fx:controller="sample.Controller"
        xmlns:fx="http://javafx.com/fxml" prefHeight="720" prefWidth="1280">
<children>
    <AnchorPane fx:id="displayPane" layoutX="60.0" layoutY="60.0" prefHeight="600.0" prefWidth="600.0" />
</children>

当我将 anchorPane 更改为 Pane 时,没有任何变化。

标签: javajavafxshapes

解决方案


如果您想查看形状及其位置的详细信息,可以使用 System.out.println(resultShape) 在控制台中打印出来。

在为您的两个版本执行此操作后,您会注意到错误的版本在 X 轴上移动了 60.0,在 Y 轴上也相同。仅当您在圆圈之后添加 resultShape 时才会发生这种情况,这是由 AnchorPane 中的 layoutX 和 layoutY 值引起的。

圆圈的中心设置为特定值。如果在将它们添加到窗格之前将它们相交,则将使用这些值计算结果形状的位置。之后, displayPane.getChildren().add() 将只转移所有三个对象一次 - 这是预期的结果。

当您在向 AnchorPane 添加圆圈后尝试获取 resultShape 时,将使用已由 displayPane.getChildren().add() 转移的值来计算其位置,这将是一个很好的位置。不幸的是,将 resultShape 添加到该 AnchorPane 将再次移动它 - 它将被转移“两次”。

有一些方法可以解决这个问题:

1) 将 resultShape 添加到主 AnchorPane(displayPane 的父级) - 您将避免第二次易位。

2) 在将它们添加到 displayPane 之前将它们相交(就像在代码的第一个版本中一样) - 所有对象只会移位一次。

3)如果不需要,请摆脱 layoutX 和 layoutY 。

希望这会有所帮助。


推荐阅读