Pan and Zoom Images

Question

Pan and Zoom Images

You must Login before you can answer or comment on any questions.

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

Your Answer

Think you can help? Login to answer this question!

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 3 years ago by Paul Dowsett

Accepted Answer

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

Answer 2

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

Answer 3

I made a module to support pinch events on TiViews: http://code.google.com/p/titanium-android-pinchview/