FMXInteractiveGestures (Delphi)

Description

This interactive gestures example is designed for a touch screen interface. The example works on both Windows 8 and Windows 7.

The Add Picture option makes an Open dialog appear, where you can select pictures (.jpg, .jpeg, .bmp, .png – more extensions can be added in the procedure TForm36.MenuItem1Click). The pictures are added as 200x200 images on the form (one on top of the other if more than one picture is selected).

You can manipulate the picture(s) by using interactive gestures:

• Pan – moves picture around
• Zoom – makes picture smaller/bigger
• Rotate – rotates the picture
• Press and Tap – deletes the picture

TGestureEventInfo is used by the interactive gesture procedures.

Code

Declare the following in the interface section:

type
  TForm36 = class(TForm)
    MenuBar1: TMenuBar;
    MenuItem1: TMenuItem;
    OpenDialog1: TOpenDialog;
    Panel1: TPanel;
    procedure MenuItem1Click(Sender: TObject);
    procedure Panel1Gesture(Sender: TObject; const EventInfo: TGestureEventInfo;
      var Handled: Boolean);
  private
    FImages: TList<TImage>;
    FLastPosition: TPointF;
    FLastDistance: Integer;
    procedure AddPicture(files: TStrings);
    procedure handlePan(eventInfo: TGestureEventInfo);
    procedure handleZoom(eventInfo: TGestureEventInfo);
    procedure handleRotate(eventInfo: TGestureEventInfo);
    procedure handlePressAndTap(eventInfo: TGestureEventInfo);
  public
  end;

var
  Form36: TForm36;

Here is the event handler for the Add Picture button (TForm36.MenuItem1Click calls the OpenDialog which in turn calls the AddPicture procedure):

procedure TForm36.MenuItem1Click(Sender: TObject);
begin
  OpenDialog1.Filter := 'Images|*.jpg;*.jpeg;*.bmp;*.png';
  if OpenDialog1.Execute then
  begin
    AddPicture(OpenDialog1.files);
  end;

Event Handlers

Panel1Gesture

For the TPanel, a TForm36.Panel1Gesture is the event handler for the Pan, Zoom, Rotate, and PressAndTap gestures:

procedure TForm36.Panel1Gesture(Sender: TObject;
  const EventInfo: TGestureEventInfo; var Handled: Boolean);
begin
   if EventInfo.GestureID = igiPan then
    handlePan(EventInfo)
  else if EventInfo.GestureID = igiZoom then
    handleZoom(EventInfo)
  else if EventInfo.GestureID = igiRotate then
    handleRotate(EventInfo)
  else if EventInfo.GestureID = igiPressAndTap then
    hand

TForm36.Panel1Gesture in turn calls the following procedures:

• Pan: TForm36.handlePan
• Zoom: TForm36.handleZoom
• Press and Tap: TForm36.handlePressAndTap
• Rotate: TForm36.handleRotate

handlePan

Here is the event handler when the GestureID = igiPan:

procedure TForm36.handlePan(EventInfo: TGestureEventInfo);
var
  LObj: IControl;
  image: TImage;
begin
  LObj := Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
  if LObj is TImage then
  begin
    if not(TInteractiveGestureFlag.gfBegin in EventInfo.Flags) then
    begin
      image := TImage(LObj.GetObject);
      //Set the X coordinate.
      image.Position.X := image.Position.X + (EventInfo.Location.X - FLastPosition.X);
      if image.Position.X < 0 then
        image.Position.X := 0;
      if image.Position.X > (Panel1.Width - image.Width) then
        image.Position.X := Panel1.Width - image.Width;

        //Set the Y coordinate.
      image.Position.Y := image.Position.Y + (EventInfo.Location.Y - FLastPosition.Y);
      if image.Position.Y < 0 then
        image.Position.Y := 0;
      if image.Position.Y > (Panel1.Height - image.Height) then
        image.Position.Y := Panel1.Height - image.Height;
    end;

    FLastPosition := EventInfo.Location;
  end;

handleRotate

Here is the event handler when GestureID = igiRotate:

procedure TForm36.handleRotate(eventInfo: TGestureEventInfo);
var
  LObj: IControl;
  image: TImage;
begin
  LObj := Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
  if LObj is TImage then
  begin
    image := TImage(LObj.GetObject);
    image.RotationAngle := RadToDeg(-EventInfo.Angle);
  end;

handleZoom

Here is the event handler when GestureID = igiZoom:

procedure TForm36.handleZoom(EventInfo: TGestureEventInfo);
var
  LObj: IControl;
  image: TImage;
begin
  LObj := Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
  if LObj is TImage then
  begin
    if not(TInteractiveGestureFlag.gfBegin in EventInfo.Flags) then
    begin
      image := TImage(LObj.GetObject);
      image.Width := image.Width + (EventInfo.Distance - FLastDIstance)/2;
      image.Height := image.Height + (EventInfo.Distance - FLastDIstance)/2;
      image.Position.X := image.Position.X - (EventInfo.Distance - FLastDIstance)/2;
      image.Position.Y := image.Position.Y - (EventInfo.Distance - FLastDIstance)/2;
    end;
  end;
  FLastDIstance := EventInfo.Distance;
end;

handlePressAndTap

Here is the event handler when GestureID = igiPressAndTap:

 procedure TForm36.handlePressAndTap(EventInfo: TGestureEventInfo);
 var
   LObj: IControl;
   image: TImage;
 begin
   LObj := Self.ObjectAtPoint(ClientToScreen(EventInfo.Location));
   if LObj is TImage then
   begin
     image := TImage(LObj.GetObject);
     FImages.Remove(image);
     FreeAndNil(image);
   end;
 end;

Uses

• FMX.Types.TInteractiveGestureFlag
• FMX.Types.TGestureEventInfo
• FMX.Forms.TCommonCustomForm.ObjectAtPoint
• FMX.Forms.TCommonCustomForm.ClientToScreen

See Also

• Gesturing Overview
• Gestures in FireMonkey

Samples

• ImageZoom
• ImageRotation
• TapAndHold