Titanium Community Questions & Answer Archive

We felt that 6+ years of knowledge should not die so this is the Titanium Community Questions & Answer Archive

Pan and Zoom Images

Hi,

I'd like to be able to pan an image and zoom it with either a pinch or doubletap.

I had tried scrollView but found it was limited to one direction.
I then used the canScale property in the imageView, This reduced the width of the viewable area and only allowed zooming with magnifier plus and minus.

I tried putting the image into a webview.

I know I should probably add an eventlistener to the image view for all the actions I require.

I'm currently developing for Android but the application will more than likely be pushed to Iphone/Ipad too so I would like to implement a solution that will cover both.

Any pointers suggestions would be appreciated.

— asked November 4th 2010 by Kevin
  • android
  • iamge
  • iphone
  • pan
  • scale
  • zoom
1 Comment
  • Although the Android OS does support the pinch gesture (according to this blog post), it's not widely used afaik. Titanium certainly does not yet support it explicitly.
    However, scrollViews inherently provide pinch zooming via the maxZoomScale / minZoomScale. See this and this example.
    With android you can use canScale, which displays a +/- magnifier control on an imageview. From my limited trials, the image size remains the same, and the view is magnified within those dimensions.
    Note that you can change imageView dimensions on the fly to scale images, but currently this only works for all the background*Image properties, and not the image property.
    For android, this ticket may be useful to watch.

    — commented November 4th 2010 by Paul Dowsett

3 Answers

  • Accepted Answer

    Although the Android OS does support the pinch gesture (according to this blog post), it's not widely used afaik.Titanium certainly does not yet support it explicitly.

    However, scrollViews inherently provide pinch zooming via the maxZoomScale / minZoomScale. See this and this example.

    With android you can use canScale, which displays a +/- magnifier control on an imageview. From my limited trials, the image size remains the same, and the view is magnified within those dimensions.

    Be aware that you can change imageView dimensions on the fly to scale images (as the result of a gesture possibly), but currently this only works for all the background*Image properties, and not the image property.

    For android, this ticket may be useful to watch.

    Hal

    PS. Apologies for the double post

    — answered November 4th 2010 by Paul Dowsett
    permalink
    2 Comments
    • In the appcelerator there is now "PhotoViewModule" and . I am not associated with these. I have tested PhotoViewModule and it works well and does everything that you need: i.e., pinch, zoom, double tap etc.

      — commented August 27th 2013 by Jeremy Lynch
    • Sorry, second one was PhotoViewer, which I haven't tested.

      — commented August 27th 2013 by Jeremy Lynch
  • Dear please try this code..

    You can scale your image by double tap on that particular image.

    var imagePhoto11 = Titanium.UI.createImageView({
    image:'social.png',
    backgroundColor:'transparent',
    left:50,
    top:100,
    bottom:50,
    right:50
    });

    magePhoto11.addEventListener('pinch', function(e) {
    var t = Ti.UI.create2DMatrix().scale(e.scale);
    imagePhoto11.transform = t;
    });

    — answered February 17th 2012 by Nikunj Kapupara
    permalink
    3 Comments
    • Thanks a lot Nikunj Kapupara. You have saved my lot of time . I love you man for this kind work…

      — commented August 17th 2012 by Nabeel Munawar
    • You welcome…..

      — commented January 6th 2014 by Nikunj Kapupara
    • Nikunj, I tried your code and its works great. But I wanna crop the image using a view over it after zooming. But it doesn't work well. Could you help me to solve it? I have posted another question here

      — commented June 23rd 2014 by Anand T
  • I made a module to support pinch events on TiViews: http://code.google.com/p/titanium-android-pinchview/

    — answered February 8th 2012 by James Borden
    permalink
    2 Comments
    • I'm very interested in your project as I am very disappointed of this lack of support ffor the pinch gesture. I've already downloaded your module, I'm a designer so I've not the skills to help you with coding but let me know if you need anything.
      I've also tried your module, installed and used in my app.js but Pinch Zoom doesn't seem to work! Anyway, good job and if you want to contact me this is my linkedin profile

      http://it.linkedin.com/in/mgorla

      — commented February 28th 2012 by Marcello Gorla
    • Did you build it yourself or use the prebuilt version? I've been editing the code directly on the page so the prebuilt version is slightly out of date. Also, the way to use it is slightly different than what you are probably used to. Did you try using the example script I included?

      — commented February 29th 2012 by James Borden
The ownership of individual contributions to this community generated content is retained by the authors of their contributions.
All trademarks remain the property of the respective owner.