JavaFX将可调整大小的弧居中于边框中

Question

我有个问题。 我正在创建一个应用程序，其中的弧长会发生变化，并且我希望该弧在边框窗格内，但是当我更改弧的长度时，它会居中，因此它看起来不像是一个被填充的圆。 实际上，我需要的是一条弧线，并通过其最大长度（360）计算其位置（边界窗格的中心）。 有人可以帮我解决这个问题吗？ 非常感谢你。

Answer 1

创建一个组。 在组中放置一个矩形，该矩形是一个完整的圆的大小（例如，将矩形的高度和宽度设置为圆的直径），然后将弧添加到组中，并将弧的布局位置设置为圆的半径。 将组放置在StackPane中，以使固定大小的组将在可调整大小的区域内居中。 将StackPane放在BorderPane的中心。 将StackPane的最小大小设置为零，以便其大小可以小于Group，同时保持Group居中并在其可见范围内进行裁剪。 在BorderPane的底部添加一些控件，以便可以动态控制弧的长度。

import javafx.application.Application;
import javafx.geometry.Insets;
import javafx.scene.*;
import javafx.scene.control.Slider;
import javafx.scene.layout.*;
import javafx.scene.paint.Color;
import javafx.scene.shape.*;
import javafx.stage.Stage;

public class ArcControl extends Application {
    @Override
    public void start(Stage stage) throws Exception {
        CenteredArc centeredArc = new CenteredArc();
        ArcControls arcControls = new ArcControls(centeredArc.getArc());

        BorderPane layout = new BorderPane();
        layout.setCenter(centeredArc.getArcPane());
        layout.setBottom(arcControls.getControlPane());

        stage.setScene(new Scene(layout));
        stage.show();
    }

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

class CenteredArc {
    private static final double INSET = 10;

    private static final double ARC_RADIUS = 100;
    private static final double INITIAL_ARC_LENGTH  = 60;
    private static final double ARC_STROKE_WIDTH = 10;
    private static final double ARC_REGION_SIZE =
            ARC_RADIUS * 2 + ARC_STROKE_WIDTH + INSET * 2;

    private final Arc arc;
    private final Pane arcPane;

    public CenteredArc() {
        // Create the arc.
        arc = new Arc(
                ARC_REGION_SIZE / 2, ARC_REGION_SIZE / 2,
                ARC_RADIUS, ARC_RADIUS,
                0,
                INITIAL_ARC_LENGTH
        );
        arc.setStrokeWidth(10);
        arc.setStrokeLineCap(StrokeLineCap.ROUND);
        arc.setStroke(Color.FORESTGREEN);
        arc.setFill(Color.POWDERBLUE);

        // Create a background fill on which the arc will be centered.
        // The paint of the background fill can be set to Color.TRANSPARENT
        // if you don't want the fill to be seen.
        final double fillSize = ARC_RADIUS * 2 + arc.getStrokeWidth() + INSET * 2;
        Rectangle fill = new Rectangle(fillSize, fillSize, Color.PINK);

        // Place the fill and the arc in the group.
        // The Group will be a fixed sized matching the fill size.
        Group centeredArcGroup = new Group(fill, arc);

        // place the arc group in a StackPane so it is centered in a resizable region.
        arcPane = new StackPane(centeredArcGroup);
        arcPane.setPadding(new Insets(INSET));
        arcPane.setMinSize(0, 0);
        arcPane.setStyle("-fx-background-color: papayawhip;");
    }

    public Arc getArc() {
        return arc;
    }

    public Pane getArcPane() {
        return arcPane;
    }
}

// helper class which can use a slider to control an arc.
class ArcControls {
    private static final double INSET = 10;

    private final Slider slider;
    private final VBox controlPane;

    public ArcControls(Arc arc) {
        slider = new Slider(0, 360, arc.getLength());
        controlPane = new VBox(
                slider
        );
        controlPane.setPadding(
                new Insets(INSET)
        );
        controlPane.setStyle(
                "-fx-background-color: palegreen;"
        );

        arc.lengthProperty().bind(slider.valueProperty());
    }

    public Slider getSlider() {
        return slider;
    }

    public VBox getControlPane() {
        return controlPane;
    }
}

Answer 2

在BorderPane（或StackPane）内部，对齐是根据形状的边界框（左上，中心，底部等）完成的。 因此，圆弧的中心点将移动并且不会为您提供所需的效果。

而是将弧线放置在AnchorPane中（如果要使用BorderPane，则将AnchorPane放置在BorderPane的区域（左，右，中心等）内）。 即使您更改了弧长，这也将固定弧的中心点，并为您带来圆弧被增加的弧长填充的效果。