JavaFX 布局节点在圆圈中

Question

我正在尝试做一个音量旋钮，我已经有了旋钮，但我想在 Enlighten Big Spot 代表的旋钮周围放置音量指示器。 我用Circle节点尝试了它。 我声明了一个数组Circle将它们全部添加到Group，以便我可以将组放置在框架中所需的位置。 我使用Circle方法setTranslateX和setTranslateY放置每个圆圈。 每个Circle都有一个用于填充的径向渐变，并且不可见。我将滑块（音量旋钮）的值映射到数组中的每个Circle，并调用 valueChanged 方法以使所有Circle低于或等于该值，并设置它们中的每一个都可见。 我对Group内的Circle位置有问题。 当它们都可见时，它们被完美地放置，但是当一些属性被 false 看到时，剩下的可见属性不会停留在它们的位置。 所以我正在寻找一种更好的设计方法来做到这一点。 谢谢。

代码示例：圈子创建

audioSelectionValueToCircle = new HashMap<Double, Circle>(audioSelectionCircle.length);
    for (int i = 0; i < 6; i++) {
        final int count = i;
        audioSelectionCircle[count] = new Circle(15.0);
        RadialGradient rgrad = RadialGradientBuilder.create().centerX(audioSelectionCircle[count].getCenterX() - audioSelectionCircle[count].getRadius() / 5).centerY(audioSelectionCircle[count].getCenterY() - audioSelectionCircle[count].getRadius() / 5).radius(audioSelectionCircle[count].getRadius()).proportional(false).stops(new Stop(0.0, Color.WHITE), new Stop(0.3, Color.ORANGE), new Stop(1.0, Color.TRANSPARENT)).build();
        audioSelectionCircle[count].setFill(rgrad);
        audioSelectionValueToCircle.put(audioSelectionValue[count], audioSelectionCircle[count]);
        audioSelectionCircle[count].setVisible(false);
    }

组创建

    gAudioSelectionCircle = new Group();
gAudioSelectionCircle.resizeRelocate(1225, 520, 280, 280);
        gAudioSelectionCircle.setRotate(90);

圆圈放置

    int n = 6;
        for (int i = 0; i < n; i++) {
            final int count = i;
            double t = 2 * Math.PI * i / n;
            double x = 60 * Math.cos(t);
            double y = 60 * Math.sin(t);
            audioSelectionCircle[count].setTranslateX(x);
            audioSelectionCircle[count].setTranslateY(y);
            gAudioSelectionCircle.getChildren().add(audioSelectionCircle[count]);
//            audioSelectionCircle[count].resizeRelocate(x, y, 41, 41);
        }

旋钮行为

audioSelectionKnob.valueProperty().addListener(new ChangeListener<Number>() {
            @Override
            public void changed(ObservableValue<? extends Number> ov, Number oldVal, Number newVal) {
//                if (!audioSelectionKnob.isValueChanging()) {
//                }
                Iterator<Map.Entry<Double, Circle>> it = audioSelectionValueToCircle.entrySet().iterator();
                while(it.hasNext()) {
                    Map.Entry<Double, Circle> pairs = it.next();
                        Circle c = pairs.getValue();
                    if(pairs.getKey() >= newVal.doubleValue()) {
                        c.setVisible(true);
                    } else {
                        c.setVisible(false);
                    }
                }
            }
        });

也许一件事，如果我在我的旋钮上方添加组，这是一个问题吗？ 我将旋钮添加到根组，并将圆圈组添加到旋钮上方的根组。

---

我部分解决了将样本时钟的旋转方法应用于我的圆圈的问题。 但是，当我使用 group.setRotate(rotation); 旋转我的圆组时仍然存在问题。 当我所有的圆圈都可见时，圆圈的位置很好，但是当我开始更改可见属性时，通过滑动旋钮，组的行为就像我group.setRotation(0);一样。 看起来它没有保留我首先设置的旋转值。

Answer 1

剩下的可见的那个没有停留在他们的位置

这可能是您的放置算法中的一个错误，导致这种情况。 若要进行诊断，需要提供一个简短、简化、可编译的示例应用。

仅修改节点的可见性属性不应以任何方式影响应用程序的布局。

要围绕圆圈布置节点，您可以查看此时钟示例。 时钟示例的作用是将 12 个节点定位在 12 点钟位置，然后对节点应用旋转以使它们到达适当的位置。 布局似乎与您描述的有点相似，尽管如果没有参考图片很难确定。

正确放置节点后，并且音量

旋钮"滑块"位于中间，则可以根据滑块值调整节点的css styleclass（类似于您当前进行可见性调整的方式）以打开或关闭它们的样式。 您永远不需要在组中添加或删除其他节点，布局不应仅更改应用于不同样式节点的可见性或效果。

您可能想查看此音频播放器示例，该示例具有基于基于旋钮的滑块，基于替换滑块行为和皮肤（尽管您需要稍微调整实现以获得您所描述的效果）。