javafx макет узлов в круге

Question

Я пытаюсь сделать ручку регулировки громкости, у меня есть ручка, но я хотел бы разместить индикатор громкости вокруг ручки, представленной в виде просветленного большого пятна. Я попробовал с Circle узел. Я объявил массив Circle добавить их все в Group так что я могу разместить группу, где я хочу в кадре. Я помещаю каждый круг, используя Circle метод setTranslateX и setTranslateY. каждый Circle имеет радиальный градиент для заполнения и не виден. Я отображаю значение ползунка (регулятор громкости) для каждого Circle в моем массиве, и вызовите метод valueChanged, чтобы получить все Circle ниже или равно значению и установите каждый из них видимым. У меня проблема с положением Circle внутри моего Group, Когда они все видимы, они идеально расположены, но когда некоторые видят свое свойство в 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);, Когда все мои круги видимы, положение круга хорошее, но когда я начинаю изменять свойство visible, сдвигая ручку, группа ведет себя так, как если бы я сделал group.setRotation(0);, Похоже, он не сохраняет значение поворота, которое я установил в первую очередь.

Answer 1

остальные видимые не остаются на своих местах

Это, вероятно, ошибка в вашем алгоритме размещения, которая вызывает это. Для диагностики вам потребуется короткое, упрощенное, компилируемое приложение-образец.

Изменение только свойства видимости узла не должно никоим образом влиять на макет приложения.

Для размещения узлов вокруг круга вы можете взглянуть на этот образец часов. Что делает выборка часов, так это размещает 12 узлов в положении 12 часов, а затем применяет вращение к узлам, чтобы получить их в соответствующем месте. Компоновка кажется немного похожей на то, что вы описываете, хотя без эталонного рисунка трудно быть уверенным.

Как только узлы правильно размещены, и у вас есть регулятор громкости "ползунок" посередине, вы можете отрегулировать класс стилей CSS для узлов на основе значения ползунка (аналогично тому, как вы в настоящее время выполняете настройку видимости) для стиля их вкл или выкл. Вам никогда не нужно добавлять или удалять дополнительные узлы из вашей группы, и макет не должен изменять только видимость или эффект, применяемый к различным стилизованным узлам.

Возможно, вы захотите взглянуть на этот пример аудиоплеера, в котором представлены ползунки на основе регуляторов, основанные на замене поведения и обложки ползунка (хотя вам потребуется немного настроить реализацию, чтобы получить тот эффект, который вы описываете).