四 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