I created a gist of a functioning pinch and zoom page. I am using it for ionic RC3 app. Have not tested it rigorously. There are still improvements needed such as pan does not work along but as you are pinching and zooming. Also it may need ways to control the image to stay in view port.
Hope we can improve this code further with input from other people.
Looks cool, I would just make it a standalone component,
Take out all the ion-header ion-content and navƧontroller/param and inject the image with angular2 @input()
I canāt seem to get this to work on my Android test device. I can see that it is firing the gesture events, but it isnāt actually scaling. Any idea why? We need the ability to scale some images in my application, and photo-viewer doesnāt seem to be able to handle images saved in the project directory.
I actually got it working on Android! The trick is, Android does not use transform. It uses -webkit-transform. Annoying, I know!
So in the scss file for pinch-zoom-image you need to add: -webkit-transform: translate(-50%, -50%);
and to apply the transform in the .ts code whenever you need to, you need to use: this.container.style.setProperty('transform', this.transforms.join(' ')); this.container.style.setProperty('-webkit-transform', this.transforms.join(' '));
I have implemented the panning with one finger here, as well as limit boundaries. Your piece of code helped me a lot showing the way. Iām very thankful