Pinch Gesture is not working

Ionic Framework ionic-v3
1

The pinch gesture it’s not working on my ionic RC2 app

both HTML container failed with pinch :

<ion-scroll (pinch)="pinchEvent($event)" (pan)="panEvent($event)" scrollX="true" scrollY="true" zoom="true" >
<div (pinch)="pinchEvent($event)" (pan)="panEvent($event)">

With my APK build,on Chrome inspect tool, I got the (pan) fired events but no (pinch) :

panEvent(event) {
    console.log(event); // OK
}

pinchEvent(event) {
    console.log(event); // KO !
}

it seems it does not works on RC0 as well :

any idea? :confused:

1 Like
2

Pinch gesture activation :

import { Component, ViewChild } from '@angular/core';
import { Gesture } from 'ionic-angular';

...

export class Toto {

    ...

    private gesture: Gesture;
    @ViewChild('image') element;

    ...

    ionViewDidLoad() {
	//create gesture obj w/ ref to DOM element
	this.gesture = new Gesture(this.element.nativeElement);

	//listen for the gesture
	this.gesture.listen();

	//turn on listening for pinch or rotate events
	this.gesture.on('pinch', e => this.pinchEvent(e));
    }

    private pinchEvent(event) {
        console.log(event);
    }

    ...
}

image “selector” needs to be added into your template :

<div #image></div>

Relative issue :

3

I can use the above to get pinch events to register, which is great. Unfortunately I still see odd things. When doing a pinch-in with an Android device, I typically get a few pinchin events (in the additionalEvent property), but then it always ends with a pincchout. In addition, the isFinal and isFirst properties in the event are always false. Finally, it simply doesn’t work when pinching, keeping fingers on the device, then adjusting the pinch in or out. The first 2-3 events trigger, and that’s all.

To summarize, I can get the pinch events to register, but it isn’t even close to get enough info to make a solid pinch zoom experience from what I’m seeing. Anyone else seeing similar?

4

hi guys,
its working code of ionic3 and angular 4,

import { Component, ViewChild,ElementRef } from ‘@angular/core’;
import { Gesture } from ‘ionic-angular’;

…

export class Toto {
constructor(private el:ElementRef){

}
…

private gesture: Gesture;
@ViewChild('image') ElementRef ;

...

ionViewDidLoad() {
//create gesture obj w/ ref to DOM element
this.gesture = new Gesture(this. el.nativeElement);

//listen for the gesture
this.gesture.listen();

//turn on listening for pinch or rotate events
this.gesture.on('pinch', e => this.pinchEvent(e));
}

private pinchEvent(event) {
    console.log(event);
}

...

}

let cheers

1 Like
5

hi
would you please explain this line is the ‘image’ the DOM id !? i tested your code and the pinch gesture is active on whole page i printed “this.el.nativeElemet” and the result is whole page instead of (in my case) ion-scroll object !

6

@saghari can you share your code

7

The marked answer is one of the ways to enable the pinch gesture. A recent article was posted to describe the other methods as well. It is too much to paste in here. But to get a gist of the idea;

  • Enable it per page context using the Gesture class (the marked solution for this question)
  • Enable it using the overrides property within an extended HammerGestureConfig
  • Enable it by overriding the buildHammer(element: HTMLElement) { } method within an extended HammerGestureConfig
  • Writing a small “pinch directive” due to the lack of consistency that above implementation provides (most preferable solution)

Full article / source: https://www.ionicrun.com/using-the-pinch-gesture-in-ionic-2/