IOS Core Animation Advanced Techniques的学习笔记(二)

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
CGFloat width = 10.0f;
//draw a thick red circle
CGContextSetLineWidth(ctx, width);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGRect rect = CGRectMake(layer.bounds.origin.x+width/2, layer.bounds.origin.y+width/2, layer.bounds.size.width-width, layer.bounds.size.height-width);
CGContextStrokeEllipseInRect(ctx, rect);
}

接上次，修改了一下，呵呵，看着舒服多了

由此可见线宽的扩展方式是同时向两边扩展的。

第三章：Layer Geometry

“Let no one unversed in geometry enter here.”
看到作者的信心了吧，你有了吗？

UIView的布局属性有frame，bounds和center，CALayer同样有3个对应frame，bounds和position。如图：

需要注意的是，frame不是一个独立的属性，它是由bounds，position，transform等其他属性计算而来，所以改变frame会影响其他属性，反之改变其他属性也会影响frame。如果我在前面的例子里增加一行改变frame的代码你会看到如下结果

[objc] view plain copy print ?

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
CGFloat width = 10.0f;
//draw a thick red circle
CGContextSetLineWidth(ctx, width);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGRect rect = CGRectMake(layer.bounds.origin.x+width/2, layer.bounds.origin.y+width/2, layer.bounds.size.width-width, layer.bounds.size.height-width);
CGContextStrokeEllipseInRect(ctx, rect);
layer.frame = CGRectMake(10.0f, 10.0f, 200.0f, 200.0f);
}

还有需要注意在操作transform时，如旋转时，frame会重新计算，此时frame的宽高不再和bounds比配。如图

下面再说说anchorPoint这个属性，很多人对于使用此属性可能会迷惑，到底是怎么设置的，先看张图

anchorPoint从{0.5, 0.5}变为{0, 0}，layer向右下偏移了，下面大家可以用一下做个试验

还是使用上面的例子，在- (void)viewDidLoad的[blueLayerdisplay];前增加

[objc] view plain copy print ?

NSLog(@"%@", NSStringFromCGPoint(blueLayer.anchorPoint));
NSLog(@"%@", NSStringFromCGPoint(blueLayer.position));

是为了记录变化前的值，接着在- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx中

增加对anchorPoint的设置，自已可以任意设置看看结果

[objc] view plain copy print ?

- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
CGFloat width = 10.0f;
//draw a thick red circle
CGContextSetLineWidth(ctx, width);
CGContextSetStrokeColorWithColor(ctx, [UIColor redColor].CGColor);
CGRect rect = CGRectMake(layer.bounds.origin.x+width/2, layer.bounds.origin.y+width/2, layer.bounds.size.width-width, layer.bounds.size.height-width);
CGContextStrokeEllipseInRect(ctx, rect);
layer.anchorPoint = CGPointMake(0, 0);
NSLog(@"%@", NSStringFromCGPoint(layer.position));
}

我们可以得出结论，anchorPoint可以简单地看作是设置左上顶点相对于中心position的位置，

计数以左上顶点到position的距离与宽高的比例，X轴方向正为左移负为右移，Y轴方向正为上移负为下移。

下面我们用例子来看看具体的应用，具体代码请查看例子3.1

源码在这里下载：http://www.informit.com/title/9780133440751

[objc] view plain copy print ?

- (void)viewDidLoad
{
[super viewDidLoad];
//start timer
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0
target:self
selector:@selector(tick)
userInfo:nil
repeats:YES];
//set initial hand positions
[self tick];
}
- (void)tick
{
//convert time to hours, minutes and seconds
NSCalendar *calendar = [[NSCalendar alloc] initWithCalendarIdentifier:NSGregorianCalendar];
NSUInteger units = NSHourCalendarUnit | NSMinuteCalendarUnit | NSSecondCalendarUnit;
NSDateComponents *components = [calendar components:units fromDate:[NSDate date]];
//calculate hour hand angle
CGFloat hourAngle = (components.hour / 12.0) * M_PI * 2.0;
//calculate minute hand angle
CGFloat minuteAngle = (components.minute / 60.0) * M_PI * 2.0;
//calculate second hand angle
CGFloat secondAngle = (components.second / 60.0) * M_PI * 2.0;
//rotate hands
self.hourHand.transform = CGAffineTransformMakeRotation(hourAngle);
self.minuteHand.transform = CGAffineTransformMakeRotation(minuteAngle);
self.secondHand.transform = CGAffineTransformMakeRotation(secondAngle);
}

运行看看结果

发现什么了没有？CGAffineTransformMakeRotation以View的center点在旋转

再看例子3.2，修改代码

[objc] view plain copy print ?

- (void)viewDidLoad
{
[super viewDidLoad];
//adjust anchor points
self.secondHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f); // 为什么不是1.0f?
self.minuteHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
self.hourHand.layer.anchorPoint = CGPointMake(0.5f, 0.9f);
//start timer
self.timer = [NSTimer scheduledTimerWithTimeInterval:1.0
target:self
selector:@selector(tick)
userInfo:nil
repeats:YES];
//set initial hand positions
[self tick];
}

看结果

CGAffineTransformMakeRotation以layer的position点在旋转

相对坐标的转换函数，UIView使用：

- (CGPoint)convertPoint:(CGPoint)point toView:(UIView *)view;

- (CGPoint)convertPoint:(CGPoint)point fromView:(UIView *)view;

- (CGRect)convertRect:(CGRect)rect toView:(UIView *)view;

- (CGRect)convertRect:(CGRect)rect fromView:(UIView *)view;

CALayer使用：

- (CGPoint)convertPoint:(CGPoint)p fromLayer:(CALayer *)l;

- (CGPoint)convertPoint:(CGPoint)p toLayer:(CALayer *)l;

- (CGRect)convertRect:(CGRect)r fromLayer:(CALayer *)l;

- (CGRect)convertRect:(CGRect)r toLayer:(CALayer *)l;

注意：直到OS X 10.8才出现了geometryFlipped属性，该属性可以改变默认图层y坐标的方向。当翻转变换被调用时，使用该属性来调整图层的方向有的时候是必需的。如果父视图使用了翻转变换，它的子视图内容（以及它对应的图层）将经常被颠倒。在这种情况下，设置子图层的geometryFlipped属性为YES是一种修正该问题最简单的方法。在OS X 10.8及以上版本，AppKit负责管理该属性，你不应该更改它。对于iOS app，不推荐使用geometryFlipped属性。

“This is a BOOL value that determines whether the geometry of a layer is vertically flipped with respect to its superlayer. Setting this property to YES for a layer on iOS means that its sublayers will be flipped vertically and will be positioned relative to the bottom of its bounds rather than the top as normal (as will all of their sublayers, and so on, unless they also have YES for their geometryFlipped property).”
注意的是geometryFlipped只对sublayers起作用，只到有sub也设置了YES才恢复，有点负负得正的意思

修改例子3.2代码

[objc] view plain copy print ?