四 iOS之圖層的定位點和錨點

position和archorPoint

• CALayer有兩個重要的屬性：position和archorPoint
• @property CGPoint position;
  
  • 用來設置CALayer在父層中的位置
  • 以父層的左上角爲原點（0，0）
• @property CGPoint archorPoint;
  
  • 稱爲“錨點”
  • 決定着CALayer身上的哪個點會在position屬性所指的位置
  • 以自己的左上角爲原點
  • 它的x、y取值範圍都是0~1，默認值爲（0.5，0.5）

示例演示 ： 時鐘

示例圖

• 在storyboard中拖入一個UIImageView，設置時鐘的圖片，在內部繪製3個指針
• 核心代碼 ViewController.m

#import "ViewController.h"
//時鐘的寬度
#define kClockW _clockView.bounds.size.width

#define angle2radion(angle) ((angle) / 180.0 * M_PI)

//一小時時針轉30度
#define perHourA 30
//每分鐘時針旋轉0.5˚
#define perMinHourA 0.5

@interface ViewController ()
@property (weak, nonatomic) IBOutlet UIImageView *clockView;

/**秒針Layer*/
@property(nonatomic,weak)CALayer * secondLayer;
/**分針Layer*/
@property(nonatomic,weak)CALayer * minuteLayer;
/**時針Layer*/
@property(nonatomic,weak)CALayer * hourLayer;


@end

@implementation ViewController

- (void)viewDidLoad {
    [super viewDidLoad];

    //添加時針
    [self setUpHourLayer];

    //添加分針
    [self setUpMinuteLayer];

    //添加秒針
    [self setUpSecondLayer];

    //添加定時器
    [NSTimer scheduledTimerWithTimeInterval:1 target:self selector:@selector(timeChange) userInfo:nil repeats:YES];

    [self timeChange];


}



/*************/

-(void)timeChange
{
    NSLog(@"%s",__func__);

    //獲取當前日曆對象
    NSCalendar * calendar = [NSCalendar currentCalendar];

    //獲取日期的組件
    //components: 需要獲取的日期組件
    //fromDate:獲取哪個日期的組件
     NSDateComponents  *cmp = [calendar components:NSCalendarUnitSecond | NSCalendarUnitMinute | NSCalendarUnitHour fromDate:[NSDate date]];
    //獲取秒
    NSInteger second = cmp.second;

    //獲取分
    NSInteger minute = cmp.minute;

    //獲取小時
    NSInteger  hour = cmp.hour;


    //計算秒針旋轉多少度
    CGFloat secondA = second * 6;

    //計算分針旋轉多少度
    CGFloat minuteA = minute * 6;

    //計算時針旋轉多少度
    CGFloat hourA = hour * perHourA + minute * perMinHourA;


    //旋轉秒針
    _secondLayer.transform = CATransform3DMakeRotation(angle2radion(secondA), 0, 0, 1);

    //旋轉分針
    _minuteLayer.transform = CATransform3DMakeRotation(angle2radion(minuteA), 0, 0, 1);



    //旋轉時針
    _hourLayer.transform = CATransform3DMakeRotation(angle2radion(hourA), 0, 0, 1);
}


#pragma mark - 添加秒針

-(void)setUpSecondLayer
{
    CALayer *secondL = [CALayer layer];

    secondL.backgroundColor = [UIColor redColor].CGColor;

    //設置錨點
    secondL.anchorPoint = CGPointMake(0.5, 1);

    //位置
    secondL.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);

    secondL.bounds = CGRectMake(0, 0, 2, kClockW * 0.5 - 20);

    [_clockView.layer addSublayer:secondL];

    _secondLayer = secondL;



}

#pragma mark - 添加分針

-(void)setUpMinuteLayer
{
    CALayer * layer = [CALayer layer];

    layer.backgroundColor = [UIColor blackColor].CGColor;

    //設置錨點
    layer.anchorPoint = CGPointMake(0.5, 1);

    layer.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);

    layer.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 -20);
    layer.cornerRadius = 2;

    [_clockView.layer addSublayer:layer];

    _minuteLayer = layer;


}

#pragma mark - 添加時針

-(void)setUpHourLayer
{
    CALayer * layer = [CALayer layer];

    layer.backgroundColor = [UIColor blackColor].CGColor;

    //設置錨點
    layer.anchorPoint = CGPointMake(0.5, 1);

    layer.position = CGPointMake(kClockW * 0.5, kClockW * 0.5);

    layer.bounds = CGRectMake(0, 0, 4, kClockW * 0.5 -40);
    layer.cornerRadius = 2;

    [_clockView.layer addSublayer:layer];

    _hourLayer = layer;

}





@end

github demo:ClockDemo