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.
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; } });
-
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.. :)
-
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);