What's the scoop on Pinch to Zoom Gesture with Ionic3 and Hammer.JS?

Question

I need to be able to do pinch to zoom to scale font sizes, on both Android and iOS. (Not just a regular image per numerous examples I've seen when Googling). Can someone let me know if theres an easy way to do this in Ionic 3?

1. Documentation, infers you can use (pinch). But this never works out of the box.
2. I know Ionic uses Hammer.JS under the covers... per this source.

3. Ionic Forums suggests you can enable it using a combination of @ViewChild and manually adding listen and on handler.

   Then for some reason the event never fires on a Macbook Pro with a touchpad, yet when I upload it to Ionic View event fires when I attempt to do pinch to zoom. I wonder if there's some navigator agent selection that doesn't enable things on the Macbook Pro, because the touchpad should facilitate this?

   Update: Maybe you need the touch emulator script to do things on a Macbook Pro. I was also reading here

   Safari on iOS has no windows, scroll bars, or resize buttons.... The user pans by flicking a finger. The user zooms in by double-tapping and pinch opening, and zooms out by pinch closing—gestures that are not available for Safari on the desktop. Because of the differences in the way users interact with web content, the viewport on the desktop and on iOS are not the same.

   So maybe this may be why Hammer doesn't work on a native Macbook Pro..

When searching on Gestures on the Ionic page you also get this page (Haptic/Taptic - which it infers is iOS dependent).

I also thought there might be a connection to the way the viewport is configured in the index.html. But that appears to be a rabbit hole that's not got a clean solution per this thread and once again this appeared to be iPhone specific.

I've also seen:

Gestures - Patterns on Material.io

This blog post on Pinch to Zoom on Android.

Using an alert on the event with JSON.stringify - you get these sort of properties with pinch to Zoom in the iPhone using similar source to the forum.. I manually typed that in by looking at a iPhone alert.. so there may be the odd typo.. and I omitted a lot of the actual values...

Do people tend to use RxJS debounce with pinch events in order to throttle the rate at which you Zoom In/Out?

{"pointers": [{},{}],
  "changedPointers": [{}],
  "pointerType": "touch",
  "srcEvent":{"isTrusted":true},
  "isFirst":false,
  "isFinal":false,
  "eventType":2
  "center":{"x":158, "y":302}
  "timeStamp":
  "deltaTime":
  "angle":
  "distance":
  "deltaX":,
  "deltaY":,
  "offsetDirection":,
  "overallVelocityX":,
  "overallVelocityY":,
  "overallVelocity":,
  "scale":,
  "rotation":,
  "maxPointers":,
  "velocity":,
  "direction":,
  "target":,
}

I also think there's an "additionalEvent" property that can be handy for detecting "pinchout" vs "pinchin".. I seems to double fire.

Whilst that method seems fine on an iPhone (except for multiple events firing)... The Android Samsung Galaxy S4 phone I'm testing on seems to more often than not invert that, and throws up many events. I also subsequently tested on a co-workers Samsung Galaxy S8 which has an up to date browser. I thought I may have needed to package an up to date browser. But I don't think that will solve it either. Without exhaustive testing it looks like Android gives correct answer first time, thereafter it inverts stuff. So I wonder if the co-ordinates of each finger are being cached somehow, so subsequent pinch in and out requests are based on stale data. Is there a HammerJS reset configuration setting?

I'm aware of these other libraries too (that don't necessitate jQuery too):

InteractJS Again, their canned pinch to Zoom example failed to work on Macbook Pro with touchpad.

Jester

Footnote: The best implementation of pinch to zoom I've seen, that works on both Android and iOS is this version by Michaël CHAIZE. But from analysing the code it looks to be based on a really early implementation of HammerJS 0.5 and doesn't even use pinch as part of the domain language - just things like drag, transform, tap, double_tap, so it must be facilitating this stuff by a lower level abstraction. Unfortunately this was for images.

Answer 1

From the inputs of your long explanation after a bit of searching this probably fit to your need but it needs to be enhanced for your version and also some of the parts of it need to be tweaking :

Basically there are

There are 3 files needed

~/src/pages/home/home.ts
~/src/pages/home/home.scss
~/src/pages/home/home.html

home.html

The <div #zoom class="zoom"> element is the fixed container that where you need to attach the events to, and its children are the items that will be zoomed.

home.scss

.zoom to fill the container size, with a fixed position and the important touch-action: none which HammerJS needs.

home.ts

It takes the Content to figure out the actual size without the footer and headers getting in the way, the for loop just adds the absolute height of each children of #zoom. The original sizes equal to the viewport that the user sees minus the actual size of the content, since we override the scroll, the viewing of the content which will most likely overflow the bottom and right (because its fixed and can be any size), will be done via panning so we must know how much its overflowing.

the max sizes to pan are the original overflowed size, for now before zooming, and scale will equal to 1 at first. base is to remember where we left off when pinched to zoom.

We initiate the event listening individually*, panend & pancancel as well as pinchend & pinchcancel are each called depending on the timing when you release the fingers so both must be added, to call their respective onEnd function.

setCoor function

sets the x & y coordinates making sure that it doesn't go past it's max

transform function

moves "translate", and scales the #zoom element, the xx & yy are for resetting the position

onPinchend function

sets the base, and sets the limits of the scale

onPinch function

sets the scale depending where it left off.

Full code can be get from Here , He has done most of the work , if you need any other functionally to be added you can enhance it .

Note: Explanation and Code taken from the Github , try to give credit to that author if it helped you.