iOS CALayer 学习（2）

---

Content Resizing and Positioning

layer的下面的属性决定着缓存中的内容如何拉伸，如何定位，如何剪切等等。

• contentsGravity

这个属性对应UIView的contentMode属性，描述了layer内容的位置和如何根据bounds来拉伸内容。例如，kCAGravityCenter 表示内容居中在bounds中，不拉伸；kCAGravityResize （默认的值）表示内容拉伸来适应bounds。

• contentsRect

一个CGRect类型的数据，用来说明即将显示的内容区域，默认是{{0,0},{1,1}}，表示所有的内容都将显示。指定的显示部分会根据上面的contentsGravity属性来绘制。

你可以使用contentsRect来缩放内容，通过指定一个大于layer的bounds的contentRects来实现，如 {{-.5, -.5}, {1.5, 1.5}}。

• contentsCenter

也是一个CGRect类型，描述contentsRect指定的区域内的九宫格内容如何根据contentsGravity来拉伸。中间区域的内容向两个方向拉伸，其它八个区域中，四个角区域不拉伸，四个边缘的区域向一个方向拉伸。类似于我们前面见过的image的拉伸。

---

Layers that Draw Themselves， 懂得如何绘制自己的Layer

有几个内建的CALayer子类，提供了一些很有用的绘制方法：

• CATextLayer

CATextLayer有一个 string 属性，可以是NSString类型或者NSAttributedString类型。这个layer会绘制这个string值。默认的文本和前景颜色是白色。这个文本与内容是不同的，独立的，也就是只能绘制其中一个，所以一般你不应该给CATextLayer任意的图像内容。

• CAShapeLayer

CAShapeLayer有一个 path 属性，CGPath类型。它会填充或者描边这个路径，也可以两者都绘制，这取决于它的 fillColor 和 strokeColor值。默认fillColor是黑色，strokeColor没有设置。一个CAShapeLayer也可以有内容，那么这个形状就会被绘制在内容图像的顶部，但是没有其它属性允许你指定一个特定的绘制模式。

• CAGradientLayer

CAGradientLayer有一个简单的线性渐变覆盖在它的背景中，另外，它也很容易用来在你的界面中绘制渐变（如何你有更加特殊的需求，可以一直使用Core Graphics来绘制）。这个与我们前面用Core Graphics来绘制渐变的定义很类似，都是有一个位置的数组，一个与之对应的颜色值的数组（都是NSArray类型，不是c 类型的数组）还有一个起始点和结束点。为了裁切这个渐变的形状，你可以添加一个 mask 遮罩给这个CAGradientLayer（遮罩会在下面解析）。CAGradientLayer的内容不会被绘制。

这个颜色值数组要求CGColor类型，而不是UIColor类型，但是CGColorRef不是一个对象类型，而NSArray要求添加的都是对象类型，所以我们需要对每个颜色都进行类型转换。

---

Transforms

layer绘制的方式可以通过一个转换来改变。由于UIView也有转换，可能你觉得没什么，但是layer的转换比view的转换强大得多了，它可以完成view通过转换无法完成的很多东西。

当一个转换是二维的时候，你可以使用layer的 CGAffineTransform。这个转换是围绕 anchorPoint 描点来进行的。

现在让我们来绘制下面这个图案：

在代码中，self表示CompassLayer，它不绘制内容，只是仅仅配置它的子layer。四个方向点上的文字都是由CATextLayer绘制，然后使用转换来放置在各自的位置上。它们都是绘制在同一个坐标系上，只是它们有不同的旋转转换而已，虽然CATextLayer 只有40x40，很小，而且在圆边界附近，但是它们都是固定的，所以它们的旋转都是围绕圆心。为了生成这个箭头，我们设置箭头layer的委托为自己，然后调用setNeedsDisplay，这样会导致CompassLayer调用 drawLayer：inContext:。

// the gradient
CAGradientLayer* g = [CAGradientLayer new];
g.contentsScale = [UIScreen mainScreen].scale;
g.frame = self.bounds;
g.colors = @[(id)[UIColor blackColor].CGColor, (id)[UIColor redColor].CGColor];
g.locations = @[@0.0f, @1.0f];
[self addSublayer:g];
// the circle
CAShapeLayer* circle = [CAShapeLayer new];
circle.contentsScale = [UIScreen mainScreen].scale;
circle.lineWidth = 2.0;
circle.fillColor =
[UIColor colorWithRed:0.9 green:0.95 blue:0.93 alpha:0.9].CGColor;
circle.strokeColor = [UIColor grayColor].CGColor;
CGMutablePathRef p = CGPathCreateMutable();
CGPathAddEllipseInRect(p, nil, CGRectInset(self.bounds, 3, 3));
circle.path = p;
[self addSublayer:circle];
circle.bounds = self.bounds;
circle.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
// the four cardinal points
NSArray* pts = @[@"N", @"E", @"S", @"W"];
for (int i = 0; i < 4; i++) {
    CATextLayer* t = [CATextLayer new];
    t.contentsScale = [UIScreen mainScreen].scale;
    t.string = pts[i];
    t.bounds = CGRectMake(0,0,40,40);
    t.position = CGPointMake(CGRectGetMidX(circle.bounds),
    CGRectGetMidY(circle.bounds));
    CGFloat vert = CGRectGetMidY(circle.bounds) / CGRectGetHeight(t.bounds);
    t.anchorPoint = CGPointMake(0.5, vert);
    t.alignmentMode = kCAAlignmentCenter;
    t.foregroundColor = [UIColor blackColor].CGColor;
    t.affineTransform = CGAffineTransformMakeRotation(i*M_PI/2.0);
    [circle addSublayer:t];
}
// the arrow
CALayer* arrow = [CALayer new];
arrow.contentsScale = [UIScreen mainScreen].scale;
arrow.bounds = CGRectMake(0, 0, 40, 100);
arrow.position = CGPointMake(CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
arrow.anchorPoint = CGPointMake(0.5, 0.8);
arrow.delegate = self;
arrow.affineTransform = CGAffineTransformMakeRotation(M_PI/5.0);
[self addSublayer:arrow];
[arrow setNeedsDisplay];