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

I already Asked this question here but inadvertanly closed it prematurely:



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 5th 2010 by Kevin
  • images
  • pan
  • scale
  • zoom

3 Answers

  • I use a ImageView in a scroll view. Scroll view takes care of the zoom, here is the code I use for the double tap and swipe(still needs improvement):

    If you were having issues with the scroll view I would try working with the latest build since it addresses many Android issues. My version works for iPhone.

    If you make any improvements please post…

    scrollView.addEventListener('scale', function(e)
        currentScale = e.scale;
    scrollView.addEventListener('swipe', function(e)
        if (e.direction = "left")
        if (e.direction = "right")
    scrollView.addEventListener('doubletap', function(e)
        if (currentScale > theZoomScale)
        {    Ti.API.info("Zoomed at: " + e.x + ", " + e.y + " zoom: " + currentScale);
            scrollView.zoomScale = theZoomScale;
        {    Ti.API.info("Not zoomed at: " + e.x + ", " + e.y + " zoom: " + currentScale);
            scrollView.scrollTo(e.x, e.y);
            scrollView.zoomScale = 2;        
    — answered November 5th 2010 by John Welch
    • Thanks for the reply.

      It solved my issue somewhat but I need to work on it a bit more.

      — commented November 7th 2010 by Kevin
    • I presume I need to set the variable "theZoomScale" myself?

      — commented November 7th 2010 by Kevin
    • sry I'm a bit of noob or not very efficient with programming (yet)

      — commented November 7th 2010 by Kevin
    • I tried this but came up against the bug with android in that the scrollView will only work on one axis so you can't really pan around there is a ticket open for this bug.

      I'm in the process of trying an image view and adding event listeners to zoom and pan.

      Any suggestions are most welcome.

      — commented November 23rd 2010 by Kevin
    • I haven't done testing for Android. Yes you do have to create theZoomScale variable.

      — commented December 4th 2010 by John Welch
  • Did you ever find an answer?
    I have the same problem. Im creating a custom floorplan map, where I need it to work with Android.

    I have a post on this matter as well, but no solution: http://developer.appcelerator.com/question/117930/custom-map-issue-on-android

    Please give me a hint if you solved it.. :)

    — answered April 6th 2011 by Mads Møller
  • I found a workaround, cause i was running in the same trouble

    here is my code

    pictures.photosView = Ti.UI.createScrollableView({
                        width : 320,
                        height : 367,
                        top : 0
                    for( i = 0; i < galleryImages.length; i++) {
                        var imageView = Ti.UI.createWebView({
                            size: {
                                width: 320,
                                height: 367
                            scalesPageToFit: true,
                            html:'<img src="'+galleryImages[i].url+'" width="100%" height="100%" /></center>'
                        viewArray[i] = imageView;
                    pictures.photosView.views = viewArray;
    — answered January 27th 2012 by Sebastian Klaus
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.