[Spark] Стрелочный индикатор.

---

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

Картинка для привлечения внимания:


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

GaugeBase. Базовый компонент.
Базовый класс для всех индикаторов, наследник SkinnableComponent. Максимально прост, но на его основе можно сделать как круговой, так и линейный индикатор. Все что он делает — это хранит минимальное, максимальное и текущее значение и может посчитать текущее значение в процентах (свойство utilization), а также интерполировать его для создания анимации.

Анимация осуществляется с помощью класса spark.effects.animation.Animation, а также в довесок к GaugeBase был написан вспомогательный класс AnimationTarget (точнее нагло скопирован, без чего можно было бы и обойтись не сделай Adobe свой класс с модификатором internal), который предоставляет для Animation колбеки реакции на события анимации.

CircularGauge.
Круговой стрелочный индикатор, дополняет базовый компонент свойствами startAngle и endAngle, которые ограничивают вращение маркера. Имеет две необязательные части скина: marker (стрелка) и scaleDisplay (шкала). При изменении utilization поворачивает marker на соответствующий угол. Также передает scaleDisplay значения minimum и maximum для построения меток. Marker это любой UIComponent, для которого с помощью свойств transformX и transformY можно задать точку вокруг которой он будет вращаться. Позиционируется всегда в центре компонента.

GaugeScale.
Шкала. Наследник SkinnableComponent, с пятью необязательными частями скина.
ticksDisplay — группа-контейнер для меток. Позиционирование меток определяется layout, присвоенным этой группе в скине. (При наследовании от этого класса можно задать layout в самом компоненте, по аналогии с VGroup/HGroup).
labelsDisplay — группа-контейнер для текстовых меток.
labelPart — фабрика текстовых меток. Текстовые метки должны быть наследниками TextBase.
majorTickPart и minorTickPart — фабрики меток. Метки должны реализовывать IVisualElement.

Текст для меток и мажорные метки генерируются на основании свойств minimum, maximum и stepSize. На текст также можно влиять с помощью задания свойства labelPrecision (задает количество знаков после запятой от 0 до 20) или задать функцию labelFunction следующего вида:
Количество минорных меток можно регулировать с помощью свойства minorTickCount (задает количество минорных меток между двумя мажорными).

EllipticalLayout
Лайаут для позиционирования элементов по кругу. Имеет пару свойств startAngle и endAngle для указания откуда начинать и где заканчивать размещение элементов, свойство rotateElements, указывающее следует ли ориентировать элемент к центру, а также свойство align, указывающее режим позиционирования (inside, outside и center). В дополнение можно задать округление позиции (свойство roundPositions), что приведет к позиционированию элемента по одному из его углов или по центру грани в зависимости от того в какой четверти круга он окажется.

Собственно этих классов уже достаточно для создания простенького индикатора. Примеры скинов:
GaugeScaleSkin:
CircularGaugeSimpleSkin:


В довесок, для помощи в скинировании, также были дописаны дополнительные примитивы EllipseSlice (рисует сектор круга) и DonutSlice (рисует сектор кольца).

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

Исходники описанных классов можно найти на GitHub https://github.com/alatarus/gauges

Вложения

	GaugeTest.swf (293.6 Кб, 1445 просмотров)
	SimpleSkin.swf (263.3 Кб, 881 просмотров)