ionic-team / ionic-framework

A powerful cross-platform UI toolkit for building native-quality iOS, Android, and Progressive Web Apps with HTML, CSS, and JavaScript.
https://ionicframework.com
MIT License
51.01k stars 13.51k forks source link

Pinch and rotate on the same element #14679

Closed MatteoMeil closed 5 years ago

MatteoMeil commented 6 years ago

Bug Report

Ionic Info

cli packages: (C:\Users\Matteo\AppData\Roaming\npm\node_modules)
    @ionic/cli-utils  : 1.19.2
    ionic (Ionic CLI) : 3.20.0

global packages:
    cordova (Cordova CLI) : 8.0.0

local packages:
    @ionic/app-scripts : 3.1.9
    Cordova Platforms  : android 7.0.0
    Ionic Framework    : ionic-angular 3.9.2

System:
    Android SDK Tools : 26.1.1
    Node              : v7.10.0
    npm               : 4.2.0
    OS                : Windows 10

Environment Variables:
    ANDROID_HOME : C:\Android

Misc:
    backend : pro

Describe the Bug When I attach both pinch and rotate gestures to an element they are fired together, even if I touch with two finger the device screen doing nothing. Also, rotation angle is not so clear: does it take the finger position or the finger rotation?

Steps to Reproduce

  1. Start new project
  2. Create a component and put in it an image (in example)
  3. attach to it pinch and rotate gesture via typescript (attaching gesture as described in the docs doesn't work)

Related Code HTML:

<ion-header>
    <ion-navbar>
        <ion-title>imageEdit</ion-title>
    </ion-navbar>
</ion-header>
<ion-content padding>
    <img #img src="https://www.w3schools.com/w3css/img_lights.jpg">
</ion-content>

TYPESCRIPT:

@ViewChild('img') imgElem: ElementRef;
img: HTMLImageElement;
gesture: Gesture;

constructor(){}
ionViewDidLoad(){
    this.gesture = new Gesture(this.imgElem.nativeElement);

    this.gesture.listen();
    this.gesture.on('rotate', (e) =>{
        console.log('rotate');
    });
    this.gesture.on('pinch', (e) =>{ 
        console.log('pinch');
    });
}

Expected Behavior

ionitron-bot[bot] commented 5 years ago

This issue has been automatically identified as an Ionic 3 issue. We recently moved Ionic 3 to its own repository. I am moving this issue to the repository for Ionic 3. Please track this issue over there.

If I've made a mistake, and if this issue is still relevant to Ionic 4, please let the Ionic Framework team know!

Thank you for using Ionic!

ionitron-bot[bot] commented 5 years ago

Issue moved to: https://github.com/ionic-team/ionic-v3/issues/380