Checkbox, RadioButton, SelectionPanel

Checkbox — это один из самых распространённых элементов пользовательского интерфейса, который позволяет пользователю выбирать или отменить выбор определённой опции. В Babylon.js он может быть реализован с помощью стандартных HTML-элементов или через специализированные компоненты GUI (Graphical User Interface), которые библиотека предоставляет.

Создание Checkbox

Для создания элемента Checkbox в Babylon.js используется класс Checkbox. Он может быть добавлен в любой интерфейс, создаваемый с помощью GUI.

var advancedTexture = BABYLON.GUI.AdvancedDynamicTexture.CreateFullscreenUI("UI");

var checkbox = new BABYLON.GUI.Checkbox();
checkbox.width = "20px";
checkbox.height = "20px";
checkbox.color = "green";
checkbox.isChecked = true;  // по умолчанию установлен в положение "выбран"
checkbox.left = "10px";
checkbox.top = "10px";
advancedTexture.addControl(checkbox);

Параметры:

  • width и height задают размеры элемента.
  • color — цвет самого чекбокса.
  • isChecked — параметр, отвечающий за состояние чекбокса (выбран или нет).
  • left и top задают положение в пикселях относительно верхнего левого угла экрана.

Обработка изменений состояния

События изменения состояния чекбокса можно обрабатывать через событие onStateChangedObservable. Это позволяет реагировать на действия пользователя, например, при изменении состояния чекбокса.

checkbox.onStateChangedObservable.add(function(state) {
    console.log("Состояние чекбокса: " + (state ? "Выбран" : "Не выбран"));
});

В этом примере при изменении состояния чекбокса в консоль будет выводиться информация о текущем состоянии — выбран он или нет.

Использование с другими элементами

Checkbox можно комбинировать с другими элементами GUI, такими как текстовые метки, кнопки и панели. Например, можно создать панель, на которой будет располагаться несколько чекбоксов для выбора различных опций.

var panel = new BABYLON.GUI.StackPanel();
panel.width = "300px";
panel.height = "200px";
panel.top = "100px";
advancedTexture.addControl(panel);

var checkbox1 = new BABYLON.GUI.Checkbox();
checkbox1.isChecked = true;
panel.addControl(checkbox1);

var checkbox2 = new BABYLON.GUI.Checkbox();
checkbox2.isChecked = false;
panel.addControl(checkbox2);

RadioButton в Babylon.js

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

Создание RadioButton

Радиокнопки в Babylon.js создаются аналогично чекбоксам с использованием класса RadioButton. Они могут быть размещены на панели или в любом другом контейнере, и их можно группировать так, чтобы в группе мог быть выбран только один элемент.

var radioPanel = new BABYLON.GUI.StackPanel();
radioPanel.width = "300px";
radioPanel.height = "200px";
radioPanel.top = "50px";
advancedTexture.addControl(radioPanel);

var radioButton1 = new BABYLON.GUI.RadioButton();
radioButton1.width = "20px";
radioButton1.height = "20px";
radioButton1.isChecked = true;
radioButton1.group = "group1";  // Группировка радиокнопок
radioPanel.addControl(radioButton1);

var radioButton2 = new BABYLON.GUI.RadioButton();
radioButton2.width = "20px";
radioButton2.height = "20px";
radioButton2.isChecked = false;
radioButton2.group = "group1";  // Группировка радиокнопок
radioPanel.addControl(radioButton2);

Особенности:

  • group — свойство, которое позволяет объединять радиокнопки в одну группу. Только одна радиокнопка в группе может быть выбрана в любой момент времени.

Реакция на выбор

Для обработки изменений в группе радиокнопок используется событие onStateChangedObservable, аналогичное тому, как это происходит с чекбоксами.

radioButton1.onStateChangedObservable.add(function(state) {
    if (state) {
        console.log("Радиокнопка 1 выбрана");
    }
});

radioButton2.onStateChangedObservable.add(function(state) {
    if (state) {
        console.log("Радиокнопка 2 выбрана");
    }
});

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

SelectionPanel

SelectionPanel в Babylon.js — это элемент интерфейса, представляющий собой панель, на которой может быть отображён список элементов для выбора. Эта панель часто используется для отображения множества опций, где пользователь может выбрать один или несколько элементов.

Создание SelectionPanel

Панель выбора может быть реализована с использованием компонента SelectionPanel, который автоматически управляет группой кнопок или других элементов выбора.

var selectionPanel = new BABYLON.GUI.SelectionPanel();
selectionPanel.width = "200px";
selectionPanel.height = "300px";
selectionPanel.top = "150px";
selectionPanel.left = "20px";
advancedTexture.addControl(selectionPanel);

var option1 = new BABYLON.GUI.Button("option1");
option1.width = "180px";
option1.height = "40px";
option1.color = "white";
option1.background = "blue";
option1.textBlock.text = "Опция 1";
selectionPanel.addControl(option1);

var option2 = new BABYLON.GUI.Button("option2");
option2.width = "180px";
option2.height = "40px";
option2.color = "white";
option2.background = "blue";
option2.textBlock.text = "Опция 2";
selectionPanel.addControl(option2);

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

Взаимодействие с элементами на панелях

С помощью метода onPointerClickObservable можно обрабатывать взаимодействие с элементами панели.

option1.onPointerClickObservable.add(function() {
    console.log("Выбрана опция 1");
});

option2.onPointerClickObservable.add(function() {
    console.log("Выбрана опция 2");
});

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

Заключение

Элементы управления, такие как Checkbox, RadioButton и SelectionPanel, в Babylon.js предоставляют удобные инструменты для создания динамичных и интерактивных интерфейсов. Эти элементы легко кастомизируются и могут быть интегрированы в более сложные UI-системы, что позволяет создавать разнообразные приложения с поддержкой пользовательского ввода.

Оглавление