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:
http://developer.appcelerator.com/question/76521/pan-and-zoom-images#137691

Question:

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

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")
        {
            leftButton.fireEvent('click');
        }
    
        if (e.direction = "right")
        {
            rightButton.fireEvent('click');
        }
    });
    
    scrollView.addEventListener('doubletap', function(e)
    {
        if (currentScale > theZoomScale)
        {    Ti.API.info("Zoomed at: " + e.x + ", " + e.y + " zoom: " + currentScale);
            scrollView.zoomScale = theZoomScale;
        }
        else
        {    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
    permalink
    5 Comments
    • 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
    permalink
    0 Comments
  • 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,
                        contentWidth:320,
                        contentHeight:367,
                        top : 0
                    });
    
                    for( i = 0; i < galleryImages.length; i++) {
                        lightapps.basic.log(galleryImages[i].url);
    
                        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;
    
                    pictures.parentView.add(pictures.photosView);
    
    — answered January 27th 2012 by Sebastian Klaus
    permalink
    0 Comments
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.