Недавно я приводил список ближайших добавлений в наш замечательный сундучок простых gui-элементов, созданных в связке Delphi+GlScene. Так вот первым в списке был круговой выбор элементов или как еще его называют "радиальное меню". Его и делаем сегодня! Применений у такого объекта множество:
|  |
Итак, мы делаем вот такой список, отображаемый по кругу:
Механика такова: пользователь наводит курсор мыши на объект - и по кругу появляются доступные действия в виде кнопок. В общем, дело безхитростное - такое нужно садиться и программировать! Первым делом определяемся с сеттингом демки, а раз меню круглое и объекты все круглые - я решил, что данный элемент отлично впишется в космический сеттинг с планетами впереди и темным глубоким фоном позади...
Немного погуглив, нашлись подходящие картинки планет и космоса. Общее наполнение в итоге стало выглядеть так:
Радиальное меню
Ну и сразу за программирование радиального меню! Описание класса получилось довольно объемное:
TRadialGroup = class (TGlHudSprite) protected fElements: TList; fShowSpeed: Single; fHideSpeed: Single; fVisible: Boolean; fMousePos: TVector; fSelected: Integer; fBasePosition: TVector; fGroupRadius: Single; fOnMouseClick: TOnMouseClick; fLButtonDown: Boolean; fTweener: TTweener; protected Function GetItem(aIndex: Integer): TRadialElement; Function GetItemRect(aIndex: Integer): TVector; public property ShowSpeed: Single read fShowSpeed write fShowSpeed; property HideSpeed: Single read fHideSpeed write fHideSpeed; property GroupRadius: Single read fGroupRadius write fGroupRadius; property OnMouseClick: TOnMouseClick read fOnMouseClick write fOnMouseClick; Procedure Show; Procedure Hide; Procedure AddElements(fMaterialNames: Array of String); Function GetSelected: Integer; Procedure SetMousePos(aMousePos: TVector); Procedure DoRender(var ARci: TRenderContextInfo; ARenderSelf, ARenderChildren: Boolean); override; Procedure DoProgress(const progressTime: TProgressTimes); override; Constructor Create(AOwner: TComponent); override; end;
В принципе, ничего серьезного, но строчек много получилось, сам не ожидал... Пройдусь по основным моментам:
- В Show() и Hide() методах запускаются tween'ы для каждой кнопки с небольшой задержкой между друг другом. Таким образом можно достичь появления кнопок одной за другой, как бы последовательно. Мне показалось, что так красивее :)
- GetItemRect(aIndex: Integer) выдает вектор-прямоугольник для элемента под номером aIndex. Для того, чтобы добраться до размеров текстуры, приходится переключать материал и уже по значениям ширины и высоты текстуры строить вектор результата:
Material.LibMaterialName := GetItem(aIndex).fMaterialName; Angle := pi/2 + aIndex * pi * 2 / fElements.Count; w := Material.GetActualPrimaryTexture.Image.Width; h := Material.GetActualPrimaryTexture.Image.Height; Result[0] := fBasePosition[0] + fGroupRadius * cos(Angle) - w/2; Result[1] := fBasePosition[1] + fGroupRadius * sin(Angle) - h/2; Result[2] := Result[0] + w; Result[3] := Result[1] + h;
- В перекрытом DoRender() теперь дело за малым: по значениям из GetItemRect() правильно позиционировать спрайт, выставить ему альфу и размеры... Все это умещается в таком маленьком коде:
for i := 0 to fElements.Count - 1 do begin r := GetItemRect(i); Position.x := (r[0] + r[2]) / 2; Position.y := (r[1] + r[3]) / 2; Width := (r[2] - r[0]) * GetItem(i).fScale; Height := (r[3] - r[1]) * GetItem(i).fScale; Material.GetActualPrimaryMaterial.FrontProperties.Diffuse.Alpha := GetItem(i).fAlpha; inherited DoRender(ARci, true, false); end
- Ну а DoProgress() как всегда занимается апдейтом состояний - находится подсвеченный элемент, вызывается для него tween'инг размеров; а также проверяется состояние кнопок мыши, чтобы при необходимости вызвать событие OnMouseClick()
- На мой взгляд очень удобно работать с получившимся классом снаружи: для добавления элементов достаточно вызвать метод AddElements() со списком материалов, которые будут отображаться в качестве элементов самого меню. То есть пишим одну строку
fGroup.AddElements(['gallery', 'audio', 'default', 'chat']);
и в наше меню добавляются четыре кнопки-элемента. Все эти кнопки обрабатываются в вышеописанных методах. Ничего больше делать не нужно.
Итак, настройка такого радиального меню занимает всего несколько строк:
fGroup := TRadialGroup.CreateAsChild(fMainDummy); fGroup.AddElements(['chat', 'gallery', 'chat']); fGroup.Position.SetPoint(fPlanet.Position.AsVector); fGroup.Material.MaterialLibrary := fMatLib; fGroup.OnMouseClick := OnItemMouseClick; fGroup.GroupRadius := 90;
Последняя строка (присвоение GroupRadius) необходима для установки, на каком расстоянии от центра будут располагаться кнопки. Остается только передавать положение курсора мышки, чтобы меню смогло корректно подсвечивать свои элементы:
GetCursorPos(Mpos); MPos := fViewer.ScreenToClient(MPos); fGroup.SetMousePos(VectorMake(MPos.x, MPos.y, 0));
Планета-кнопка
Для того, чтобы на экране отобразить сразу несколько планет с доступными для них радиальными менюшками, я решил создать небольшой support-класс TPlanetButton, описание которого получилось тоже довольно увестистое:
TOnMouseOver = Procedure (aSelf: TGlHudSprite) of object; TOnMouseOut = Procedure (aSelf: TGlHudSprite) of object;
TPlanetButton = class (TGlHudSprite)
protected
fMousePos: TVector;
fSelected: Boolean;
fOverRadius: Single;
fOutRadius: Single;
fAnimationTime: Single;
protected
fOnMouseOver: TOnMouseOver;
fOnMouseOut: TOnMouseOut;
public
property OnMouseOver: TOnMouseOver read fOnMouseOver write fOnMouseOver;
property OnMouseOut: TOnMouseOut read fOnMouseOut write fOnMouseOut;
property OverRadius: Single read fOverRadius write fOverRadius;
property OutRadius: Single read fOutRadius write fOutRadius;
Function IsHit(aPosition: TVector): Boolean;
Procedure SetMousePos(aMousePos: TVector);
Procedure DoProgress(const progressTime: TProgressTimes); override;
Constructor Create(AOwner: TComponent); override;
end;По сути такая кнопка ничего не умеет, за исключением вызова событий OnMouseOver и OnMouseOut при движениях мыши по своей области.
Итог
Вот и все...Выглядит это вот так:
Наводим на любую планету - показывается соответствующее меню. Каждый элемент немного меняет размеры при движениях по ним мыши. При клике - показывается хинт о том, по какому элементу нажали.
Как всегда скачать демку с исходниками можно отсюда; либо можно обновиться через svn, в котором сейчас всего 12 ревизий :)
p.s. Очень хочется выложить видео с демонстрацией того, как это все анимировано, но у меня к сожалению сейчас слишком медленный интернет для этого...
p.p.s Появилась возможность выложить видео - с радостью добавляю!
