[TIMOB-2452] Android: Image rotates around top-left not anchor point

GitHub Issue	n/a
Type	Bug
Priority	High
Status	Closed
Resolution	Invalid
Resolution Date	2012-03-19T16:34:38.000+0000
Affected Version/s	n/a
Fix Version/s	n/a
Components	Android
Labels	anchor, android, look1, parity, point
Reporter	skypanther
Assignee	Hieu Pham
Created	2011-04-15T03:20:13.000+0000
Updated	2017-03-16T22:27:29.000+0000

Description

I can get an image to rotate around its top-left corner. Supposedly, by setting an anchorPoint on the image I should be able to rotate around another point also. I cannot. It rotates around the top-left.

Info & code, see:
http://developer.appcelerator.com/helpdesk/view/57431">http://developer.appcelerator.com/helpdesk/view/57431
http://developer.appcelerator.com/question/84171/rotate-an-image-around-its-center"> http://developer.appcelerator.com/question/84171/rotate-an-image-ar...

Using SDK 1.5, timestamp=11/23/10 14:42, githash=df00caa with Android SDK 1.6.

Thanks,
Tim

Comments

Stephen Tramer 2011-04-15
Assigning to Don for triage.
Brian Yamabe 2011-04-15
Similar to this, the anchorPoint is not honored when animating a label. A full description with sample code is here: http://developer.appcelerator.com/question/117455/anchorpoint-not-working-on-android"> http://developer.appcelerator.com/question/117455/anchorpoint-not-w...

Eduardo Gomez 2012-03-09

Issue

Anchor point - Titanium.UI.View.anchorPoint - it's currently supported in iOS only.

Documentation

http://developer.appcelerator.com/apidoc/mobile/latest/Titanium.UI.View.anchorPoint-property.html

Repro sequence

   var win = Titanium.UI.createWindow();
   
   //
   // REUSABLE ANIMATION WITH TRANSFORM
   //
   var t = Ti.UI.create2DMatrix();
   t = t.rotate(90);
   
   var a = Titanium.UI.createAnimation();
   a.transform = t;
   a.duration = 1000;
   a.autoreverse = true;
   
   //
   // TOP LEFT
   //
   var view1 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:10,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:0,y:0}
   });
   win.add(view1);
   
   var topLeft = Titanium.UI.createButton({
   	title:'Top Left',
   	height:40,
   	width:200,
   	top:10,
   	left:10
   });
   
   topLeft.addEventListener('click', function()
   {
   	view1.animate(a);
   });
   
   win.add(topLeft);
   
   //
   // TOP RIGHT
   //
   var view2 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:80,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:1,y:0}
   });
   win.add(view2);
   
   var topRight = Titanium.UI.createButton({
   	title:'Top Right',
   	height:40,
   	width:200,
   	top:80,
   	left:10
   });
   
   topRight.addEventListener('click', function()
   {
   	view2.animate(a);
   });
   
   win.add(topRight);
   
   //
   // BOTTOM LEFT
   //
   var view3 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:150,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:0,y:1}
   });
   win.add(view3);
   
   var bottomLeft = Titanium.UI.createButton({
   	title:'Bottom Left',
   	height:40,
   	width:200,
   	top:150,
   	left:10
   });
   
   bottomLeft.addEventListener('click', function()
   {
   	view3.animate(a);
   });
   
   win.add(bottomLeft);
   
   //
   // BOTTOM RIGHT
   //
   var view4 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:220,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:1,y:1}
   });
   win.add(view4);
   var bottomRight = Titanium.UI.createButton({
   	title:'Bottom Right',
   	height:40,
   	width:200,
   	top:220,
   	left:10
   });
   
   bottomRight.addEventListener('click', function()
   {
   	view4.animate(a);	
   });
   
   win.add(bottomRight);
   
   //
   // CENTER
   //
   var view5 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:290,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:0.5,y:0.5}
   });
   win.add(view5);
   
   var center = Titanium.UI.createButton({
   	title:'Center',
   	height:40,
   	width:200,
   	top:290,
   	left:10
   });
   
   center.addEventListener('click', function()
   {
   	view5.animate(a);
   });
   
   win.add(center);
   
   win.open();

Hieu Pham 2012-03-19 Testing Steps: 1. Run this code for Android:

   var win = Titanium.UI.createWindow();
   
   //
   // REUSABLE ANIMATION WITH TRANSFORM
   //
   var t = Ti.UI.create2DMatrix();
   t = t.rotate(90);
   
   
   //
   // TOP LEFT
   //
   var view1 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:10,
   	left:220,
   	height:50,
   	width:50
   });
   win.add(view1);
   
   var topLeft = Titanium.UI.createButton({
   	title:'Top Left',
   	height:40,
   	width:200,
   	top:10,
   	left:10
   });
   
   topLeft.addEventListener('click', function()
   {
   	view1.animate({
           transform:t, 
           duration: 1000, 
           anchorPoint: {x:0, y:0}
       });
   });
   
   win.add(topLeft);
   
   //
   // TOP RIGHT
   //
   var view2 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:80,
   	left:220,
   	height:50,
   	width:50
   });
   win.add(view2);
   
   var topRight = Titanium.UI.createButton({
   	title:'Top Right',
   	height:40,
   	width:200,
   	top:80,
   	left:10
   });
   
   topRight.addEventListener('click', function()
   {
   	view2.animate({
           transform:t, 
           duration: 1000, 
           anchorPoint: {x:1, y:0}
       });
   });
   
   win.add(topRight);
   
   //
   // BOTTOM LEFT
   //
   var view3 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:150,
   	left:220,
   	height:50,
   	width:50
   });
   win.add(view3);
   
   var bottomLeft = Titanium.UI.createButton({
   	title:'Bottom Left',
   	height:40,
   	width:200,
   	top:150,
   	left:10
   });
   
   bottomLeft.addEventListener('click', function()
   {
   	view3.animate({
           transform:t, 
           duration: 1000, 
           anchorPoint: {x:0, y:1}
       });
   });
   
   win.add(bottomLeft);
   
   //
   // BOTTOM RIGHT
   //
   var view4 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:220,
   	left:220,
   	height:50,
   	width:50
   });
   win.add(view4);
   var bottomRight = Titanium.UI.createButton({
   	title:'Bottom Right',
   	height:40,
   	width:200,
   	top:220,
   	left:10
   });
   
   bottomRight.addEventListener('click', function()
   {
   view4.animate({
           transform:t, 
           duration: 1000, 
           anchorPoint: {x:1, y:1}
       });
   });
   
   win.add(bottomRight);
   
   //
   // CENTER
   //
   var view5 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:290,
   	left:220,
   	height:50,
   	width:50
   });
   win.add(view5);
   
   var center = Titanium.UI.createButton({
   	title:'Center',
   	height:40,
   	width:200,
   	top:290,
   	left:10
   });
   
   center.addEventListener('click', function()
   {
   	view5.animate({
           transform:t, 
           duration: 1000, 
           anchorPoint: {x:0.5, y:0.5}
       });
   });
   
   win.add(center);
   
   win.open();

2.Simultaneously, run this code in iOS:

   var win = Titanium.UI.createWindow();
   
   //
   // REUSABLE ANIMATION WITH TRANSFORM
   //
   var t = Ti.UI.create2DMatrix();
   t = t.rotate(90);
   
   var a = Titanium.UI.createAnimation();
   a.transform = t;
   a.duration = 1000;
   //a.autoreverse = true;
   
   //
   // TOP LEFT
   //
   var view1 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:10,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:0,y:0}
   });
   win.add(view1);
   
   var topLeft = Titanium.UI.createButton({
   	title:'Top Left',
   	height:40,
   	width:200,
   	top:10,
   	left:10
   });
   
   topLeft.addEventListener('click', function()
   {
   	view1.animate(a);
   });
   
   win.add(topLeft);
   
   //
   // TOP RIGHT
   //
   var view2 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:80,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:1,y:0}
   });
   win.add(view2);
   
   var topRight = Titanium.UI.createButton({
   	title:'Top Right',
   	height:40,
   	width:200,
   	top:80,
   	left:10
   });
   
   topRight.addEventListener('click', function()
   {
   	view2.animate(a);
   });
   
   win.add(topRight);
   
   //
   // BOTTOM LEFT
   //
   var view3 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:150,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:0,y:1}
   });
   win.add(view3);
   
   var bottomLeft = Titanium.UI.createButton({
   	title:'Bottom Left',
   	height:40,
   	width:200,
   	top:150,
   	left:10
   });
   
   bottomLeft.addEventListener('click', function()
   {
   	view3.animate(a);
   });
   
   win.add(bottomLeft);
   
   //
   // BOTTOM RIGHT
   //
   var view4 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:220,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:1,y:1}
   });
   win.add(view4);
   var bottomRight = Titanium.UI.createButton({
   	title:'Bottom Right',
   	height:40,
   	width:200,
   	top:220,
   	left:10
   });
   
   bottomRight.addEventListener('click', function()
   {
   	view4.animate(a);	
   });
   
   win.add(bottomRight);
   
   //
   // CENTER
   //
   var view5 = Titanium.UI.createView({
   	backgroundColor:'#336699',
   	top:290,
   	left:220,
   	height:50,
   	width:50,
   	anchorPoint:{x:0.5,y:0.5}
   });
   win.add(view5);
   
   var center = Titanium.UI.createButton({
   	title:'Center',
   	height:40,
   	width:200,
   	top:290,
   	left:10
   });
   
   center.addEventListener('click', function()
   {
   	view5.animate(a);
   });
   
   win.add(center);
   
   win.open();

3. Check behavior on both iOS/Android.

Hieu Pham 2012-03-19 Note that the PR sent for this bug ( https://github.com/appcelerator/titanium_mobile/pull/1746) fixes a conversion issue for a workaround of the underlying problem. This is b/c we don't plan to support anchorPoint property for view anytime soon. Marking this bug as invalid.
Neeraj Gupta 2012-03-19 Note that this functionality is documented as iOS only and we don't intend to support it on Android.
Lee Morris 2017-03-16 Closing ticket as invalid.

JSON Source