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

Question

Я пытаюсь сделать ручку тома, у меня есть ручка, но я бы хотел поместить указатель уровня вокруг ручки, представленной просвещением большого места. Я попробовал его с узлом Circle. Я объявила массив Circle, добавив все из них в Group, чтобы я мог разместить группу, в которой я хочу в кадре. Я помещаю каждый круг, используя метод Circle setTranslateX и setTranslateY. Каждый Circle имеет радиальный градиент для заполнения и не виден. Я сопоставляю значение ползунка (регулятора громкости) каждому Circle в моем массиве и вызываю метод valueChanged, чтобы получить все значения Circle ниже или равные значению и установить каждый из них видимым. У меня проблема с положением Circle внутри моего Group. Когда все они видны, они отлично расположены, но когда некоторые из них видят свое свойство как ложное, оставшиеся видимые не остаются на своем месте. Поэтому я ищу лучший дизайн для этого. Спасибо.

Пример кода: создание Круг создание

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

остальные видны один не находятся в их положении

Это, вероятно, ошибка в алгоритме размещения, который является причиной этого. Чтобы диагностировать, вам нужно предоставить краткое, упрощенное, компилируемое примерное приложение.

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

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

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

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