如何设置旋转中心

yorhomwang

LSprite中貌似是以最左上角那一点进行旋转，但是怎么设置为以中心点为旋转点呢？

elick

  呵呵 一起关注

lufy

在设定rotate的值之前，调用一下getRotateXY函数就可以了，这个函数本来是为LBox2d提供的，和物理引擎相结合的时候，旋转刚体必须是和Box2d中相一致，正好这里可以拿来用一用

用法很简单，getRotateXY函数需要两个参数，就是模拟的长和高，中心会设置为你所传入的参数的一半，看代码

1. init(50,"legend",480,800,main);
   
2. function main(){
   
3.         var backLayer = new LSprite();
   
4.         addChild(backLayer);
   
5.        
   
6.         var imgLayer01 = new LSprite();
   
7.         backLayer.addChild(imgLayer01);
   
8.         imgLayer01.x = imgLayer01.y = 100;
   
9.         imgLayer01.graphics.drawRect(2,"#000000",[0,0,50,100]);
   
10.        
    
11.         var imgLayer11 = new LSprite();
    
12.         backLayer.addChild(imgLayer11);
    
13.         imgLayer11.x = imgLayer11.y = 100;
    
14.         imgLayer11.graphics.drawRect(2,"#ff0000",[0,0,50,100]);
    
15.         imgLayer11.rotate = 45;
    
16.        
    
17.        
    
18.         var imgLayer02 = new LSprite();
    
19.         backLayer.addChild(imgLayer02);
    
20.         imgLayer02.x = imgLayer02.y = 200;
    
21.         imgLayer02.graphics.drawRect(2,"#000000",[0,0,50,100]);
    
22.        
    
23.         var imgLayer12 = new LSprite();
    
24.         backLayer.addChild(imgLayer12);
    
25.         imgLayer12.x = imgLayer12.y = 200;
    
26.         imgLayer12.graphics.drawRect(2,"#ff0000",[0,0,50,100]);
    
27.         imgLayer12.getRotateXY(imgLayer12.getWidth(),imgLayer12.getHeight());
    
28.         imgLayer12.rotate = 45;
    
29. }

复制代码

imgLayer01和imgLayer02分别作为旋转前的参照物，
imgLayer11和imgLayer12都设定了rotate为45度，不同的是imgLayer12设置的时候，调用了getRotateXY函数，设置了旋转中心。
下面是测试连接，你可以看一下，imgLayer12被设置了旋转中心了
http://lufylegend.com/demo/test/6.html

elick

1. var imgLayer01 = new LSprite();
   
2.     backLayer.addChild(imgLayer01);
   
3.     imgLayer01.x = imgLayer01.y = 100;
   
4.     imgLayer01.graphics.drawRect(2,"#F00",[0,0,50,100]);
   
5.     imgLayer01.getRotateXY(imgLayer01.getWidth(),imgLayer01.getHeight());
   
6. 
   
7. var vars = {
   
8.                         x:imgLayer01.x,
   
9.                         y:imgLayer01.y,
   
10.                         rotate:180,
    
11.                         ease:Sine.easeInOut
    
12. 
    
13.         };
    
14.         LTweenLite.to(imgLayer01,1,vars);
    

复制代码

呵呵 原来这么用也可以啊 能看到动画了

lufy

elick 发表于 2013-6-10 01:01
呵呵 原来这么用也可以啊 能看到动画了

举一反三啊，哈哈