[TIMOB-11970] iOS: display issues with zoomable image on 3.x

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Invalid
Resolution Date	2012-12-06T20:55:04.000+0000
Affected Version/s	Release 3.0.0, Release 3.1.0
Fix Version/s	2012 Sprint 25, 2012 Sprint 25 API
Components	iOS
Labels	SupportTeam
Reporter	Federico Casali
Assignee	Vishal Duggal
Created	2012-12-05T21:52:55.000+0000
Updated	2014-06-19T12:44:06.000+0000

Description

Problem description

Zoomable images are not correctly displayed on latest 3.x CI

Description

Customer would like to replicate the zoomable image similar to the ios photos application, using 'zoomScale' properties for the containing scrollView. The image should be centered and allow for zooming in. It works fine on 2.1.4 GA but on latest CI the image is cropped and not fully visible, also when zooming in. Attaching screenshots. Sample code:

var win1 = Titanium.UI.createWindow({  
    backgroundColor:'#fff'
});

var scrollView = Ti.UI.createScrollView({
  maxZoomScale: 4.0,
  minZoomScale:1.0,
  zoomScale:1.0,
});
var imageView = Ti.UI.createImageView({
  backgroundColor: 'pink',
  width:'100%',
  height:'100%',
  image: 'http://www.naturewalls.org/wp-content/uploads/2010/06/mirror_lake_in_the_mountains_wallpaper.jpg'
});

scrollView.add(imageView);
win1.add(scrollView);

win1.open();

Attachments

File	Date	Size
2.1.4GA_zoomed.png	2012-12-05T21:52:55.000+0000	161374
2.1.4GA.png	2012-12-05T21:52:55.000+0000	185081
3.x_zoomed.png	2012-12-05T21:52:55.000+0000	238319
3.x.png	2012-12-05T21:52:55.000+0000	439534

Comments

Vishal Duggal 2012-12-06

The imageView behavior on IOS was changed as part of TIMOB-3749. The image is not cropped. It is scaling to fit the given dimensions (100%x100%). TO replicate old behavior use the following code

   var win1 = Titanium.UI.createWindow({  
       backgroundColor:'#fff'
   });
    
   var scrollView = Ti.UI.createScrollView({
     maxZoomScale: 4.0,
     minZoomScale:0.1,
     zoomScale:1.0,
   });
   
   var wrapper = Ti.UI.createView({
   	width:'100%',
   	height:'100%',
   	backgroundColor:'pink'
   })
   var imageView = Ti.UI.createImageView({
     image: 'http://www.naturewalls.org/wp-content/uploads/2010/06/mirror_lake_in_the_mountains_wallpaper.jpg'
   });
   
   wrapper.add(imageView);
    
   scrollView.add(wrapper);
   
   var b1 = Ti.UI.createButton({title:' + ', top:0, left:0, width:100})
   var b2 = Ti.UI.createButton({title:' - ', top:0, right:0, width:100})
   
   
   win1.add(scrollView);
   win1.add(b1);
   win1.add(b2);
   
   b1.addEventListener('click',function(){
   	var zoom = scrollView.zoomScale;
   	zoom += 0.1;
   	scrollView.setZoomScale(zoom);
   }) 
   b2.addEventListener('click',function(){
   	var zoom = scrollView.zoomScale;
   	zoom -= 0.1;
   	scrollView.setZoomScale(zoom);
   }) 
   win1.open();

Vishal Duggal 2012-12-06

Not a bug. Have provided code to replicate 2.1.X behavior
Eric Merriman 2013-03-04

Closing based on comments above

JSON Source