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的區域（左，右，中心等）內）。 即使您更改了弧長，這也將固定弧的中心點，並為您帶來圓弧被增加的弧長填充的效果。