События касаний

extra_toc

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

Рассмотрим работу с прикосновениями к сенсорному экрану устройства.

Алгоритм доставки события касания

Когда пользователь прикасается к сенсорному экрану устройства одним или несколькими пальцами, система:

  1. Распознает местоположение каждого пальца. 
  2. Распознает, какой палец был поднят, какой опущен, а какой был перемещен.
  3. Выполняет поиск компонента, который будет выполнять обработку событий. Поиск осуществляет по трем критериям:
    1. Компонент находится ближе всего к пользователю.
    2. Компонент может/хочет обрабатывать событие касания. За это отвечает свойство TfgControl.HitTest=True.
    3. Если компонент не может обрабатывать событие касания TfgControl.HitTest=False, то событие передается родительскому компоненту.
  4. Передает компоненту событие прикосновения через событие OnTouch. Вы можете указать свой обработчик события для интересуемого компонента и отслеживания всех фаз касания пользователя.

Пример отображения касаний

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

1. Создаем новый FGX Native проект.

2. Добавляет на форму TfgPaintBox. И выравниваем его на всю форму:

  • PaintBox1.Alignment.FlexGrow = 1
  • PaintBox1.PositionMode = Relative

3.  Указываем, что наш TfgPaintBox может обрабатывать события касания

  • PaintBox1.HitTest = True

4. Заводим поле FLastTouches для хранения массива точек касания:

TFormMain = class(TfgForm)
    fgPaintBox1: TfgPaintBox;
  private
    FLastTouches: TfgTouches;

5. Получаем текущие точки касания и сохраняем их в поле FLastTouches. Для этого пишем обработчик события fgPaintBox1.OnTouch:

function TFormMain.fgPaintBox1Touch(Sender: TObject; const ATouches: TfgTouches; const AAction: TfgTouchAction): Boolean;
begin
  FLastTouches := ATouches;
  // Запрашиваем перерисовку PaintBox, так как наши точки касаний обновились
  fgPaintBox1.Invalidate;
  // Сообщаем системе, что мы обработали событие касания.
  Result := True;
end;

6. Выполняем отрисовку точек касания в событии fgPaintBox1.OnPaint:

procedure TFormMain.fgPaintBox1Paint(Sender: TObject; const ACanvas: TfgCanvas);
const
  TouchRadius = 20;
var
  I: Integer;
  TouchRect: TRectF;
begin
  ACanvas.Stroke.Color := TAlphaColorRec.Red;
  ACanvas.Fill.Kind := TfgBrushKind.Solid;
  ACanvas.Fill.Color := TAlphaColorRec.Green;

  for I := Low(FLastTouches) to High(FLastTouches) do
  begin
    ACanvas.FillCircle(FLastTouches[I].Location, TouchRadius);
    ACanvas.DrawCircle(FLastTouches[I].Location, TouchRadius);
  end;
end;

7. Запускаем наше приложение и тестируем: