Recently when building a mobile app in FMX I had an issue getting pinch and zoom working.

The recommended approach to mobile development in FMX is to have a single Form, and multiple views (frames). These views are switched in and out as required. This works very well. However, no matter what I tried I couldn’t get pinch and zoom working. In the end, the solution was simple. I had to hook into the actual Form’s OnGesture event.

This is the Structure of the view:

Hooking into the Form

When a view is docked, a Controller calls the Initialize method:

When the view is undocked, the gesture event handler is removed:

Pinch and Zoom Handler

Next, the code in the view’s OnFormGesture method manages the pinch and zoom event. This last bit of code was pretty much lifted from the sample that ships with Delphi, except I hand it the image control to use as this was suitable in my case:

FLastDistance is a private integer.

Notice how all the code belongs to the TPictureView, we only hook into the Form.

Sample Project

The sample project is called ImageZoom located in:

Object Pascal > Mobile Snippets > Interactive Gestures

The full path in version 10.4.2 is:

C:\Users\Public\Documents\Embarcadero\Studio\21.0\Samples\Object Pascal\Mobile Snippets\InteractiveGestures\ImageZoom

For earlier versions there will be a different version number than 21.0.

I hope this tip helps.