Titanium JIRA Archive
Titanium SDK/CLI (TIMOB)

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

GitHub Issuen/a
TypeBug
PriorityHigh
StatusClosed
ResolutionInvalid
Resolution Date2012-03-19T16:34:38.000+0000
Affected Version/sn/a
Fix Version/sn/a
ComponentsAndroid
Labelsanchor, android, look1, parity, point
Reporterskypanther
AssigneeHieu Pham
Created2011-04-15T03:20:13.000+0000
Updated2017-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.

Perhaps also related to https://appcelerator.lighthouseapp.com/projects/32238/tickets/839-implement-animations-in-android"> https://appcelerator.lighthouseapp.com/projects/32238/tickets/839-i...

Thanks,
Tim

Comments

  1. Stephen Tramer 2011-04-15

    Assigning to Don for triage.

  2. 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...

  3. 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();
       
  4. 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.
  5. 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.
  6. Neeraj Gupta 2012-03-19

    Note that this functionality is documented as iOS only and we don't intend to support it on Android.
  7. Lee Morris 2017-03-16

    Closing ticket as invalid.

JSON Source