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.
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
-
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;
}); -
I made a module to support pinch events on TiViews: http://code.google.com/p/titanium-android-pinchview/