# 矢量图形
我们用Core Graphics来绘图的一个通常原因就是只是用图片或是图层效果不能轻易地绘制出矢量图形。矢量绘图包含一下这些:
* 任意多边形(不仅仅是一个矩形)
* 斜线或曲线
* 文本
* 渐变
举个例子,清单13.1 展示了一个基本的画线应用。这个应用将用户的触摸手势转换成一个`UIBezierPath`上的点,然后绘制成视图。我们在一个`UIView`子类`DrawingView`中实现了所有的绘制逻辑,这个情况下我们没有用上view controller。但是如果你喜欢你可以在view controller中实现触摸事件处理。图13.1是代码运行结果。
清单13.1 用Core Graphics实现一个简单的绘图应用
~~~
#import "DrawingView.h"
@interface DrawingView ()
@property (nonatomic, strong) UIBezierPath *path;
@end
@implementation DrawingView
- (void)awakeFromNib
{
//create a mutable path
self.path = [[UIBezierPath alloc] init];
self.path.lineJoinStyle = kCGLineJoinRound;
self.path.lineCapStyle = kCGLineCapRound;

self.path.lineWidth = 5;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//get the starting point
CGPoint point = [[touches anyObject] locationInView:self];
//move the path drawing cursor to the starting point
[self.path moveToPoint:point];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//get the current point
CGPoint point = [[touches anyObject] locationInView:self];
//add a new line segment to our path
[self.path addLineToPoint:point];
//redraw the view
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
//draw path
[[UIColor clearColor] setFill];
[[UIColor redColor] setStroke];
[self.path stroke];
}
@end
~~~
![](https://box.kancloud.cn/2015-12-24_567bc21ff2f8e.png)
图13.1 用Core Graphics做一个简单的『素描』
这样实现的问题在于,我们画得越多,程序就会越慢。因为每次移动手指的时候都会重绘整个贝塞尔路径(`UIBezierPath`),随着路径越来越复杂,每次重绘的工作就会增加,直接导致了帧数的下降。看来我们需要一个更好的方法了。
Core Animation为这些图形类型的绘制提供了专门的类,并给他们提供硬件支持(第六章『专有图层』有详细提到)。`CAShapeLayer`可以绘制多边形,直线和曲线。`CATextLayer`可以绘制文本。`CAGradientLayer`用来绘制渐变。这些总体上都比Core Graphics更快,同时他们也避免了创造一个寄宿图。
如果稍微将之前的代码变动一下,用`CAShapeLayer`替代Core Graphics,性能就会得到提高(见清单13.2).虽然随着路径复杂性的增加,绘制性能依然会下降,但是只有当非常非常浮躁的绘制时才会感到明显的帧率差异。
清单13.2 用`CAShapeLayer`重新实现绘图应用
~~~
#import "DrawingView.h"
#import
@interface DrawingView ()
@property (nonatomic, strong) UIBezierPath *path;
@end

@implementation DrawingView
+ (Class)layerClass
{
//this makes our view create a CAShapeLayer
//instead of a CALayer for its backing layer
return [CAShapeLayer class];
}
- (void)awakeFromNib
{
//create a mutable path
self.path = [[UIBezierPath alloc] init];
//configure the layer
CAShapeLayer *shapeLayer = (CAShapeLayer *)self.layer;
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.lineWidth = 5;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
//get the starting point
CGPoint point = [[touches anyObject] locationInView:self];
//move the path drawing cursor to the starting point
[self.path moveToPoint:point];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
//get the current point
CGPoint point = [[touches anyObject] locationInView:self];
//add a new line segment to our path
[self.path addLineToPoint:point];
//update the layer with a copy of the path
((CAShapeLayer *)self.layer).path = self.path.CGPath;
}
@end
~~~
- Introduction
- 1. 图层树
- 1.1 图层与视图
- 1.2 图层的能力
- 1.3 使用图层
- 1.4 总结
- 2. 寄宿图
- 2.1 contents属性
- 2.2 Custom Drawing
- 2.3 总结
- 3. 图层几何学
- 3.1 布局
- 3.2 锚点
- 3.3 坐标系
- 3.4 Hit Testing
- 3.5 自动布局
- 3.6 总结
- 4. 视觉效果
- 4.1 圆角
- 4.2 图层边框
- 4.3 阴影
- 4.4 图层蒙板
- 4.5 拉伸过滤
- 4.6 组透明
- 4.7 总结
- 5. 变换
- 5.1 仿射变换
- 5.2 3D变换
- 5.3 固体对象
- 5.4 总结
- 6. 专用图层
- 6.1 CAShapeLayer
- 6.2 CATextLayer
- 6.3 CATransformLayer
- 6.4 CAGradientLayer
- 6.5 CAReplicatorLayer
- 6.6 CAScrollLayer
- 6.7 CATiledLayer
- 6.8 CAEmitterLayer
- 6.9 CAEAGLLayer
- 6.10 AVPlayerLayer
- 6.11 总结
- 7. 隐式动画
- 7.1 事务
- 7.2 完成块
- 7.3 图层行为
- 7.4 呈现与模型
- 7.5 总结
- 8. 显式动画
- 8.1 属性动画
- 8.2 动画组
- 8.3 过渡
- 8.4 在动画过程中取消动画
- 8.5 总结
- 9. 图层时间
- 9.1 CAMediaTiming协议
- 9.2 层级关系时间
- 9.3 手动动画
- 9.4 总结
- 10. 缓冲
- 10.1 动画速度
- 10.2 自定义缓冲函数
- 10.3 总结
- 11. 基于定时器的动画
- 11.1 定时帧
- 11.2 物理模拟
- 12. 性能调优
- 12.1. CPU VS GPU
- 12.2 测量,而不是猜测
- 12.3 Instruments
- 12.4 总结
- 13. 高效绘图
- 13.1 软件绘图
- 13.2 矢量图形
- 13.3 脏矩形
- 13.4 异步绘制
- 13.5 总结
- 14. 图像IO
- 14.1 加载和潜伏
- 14.2 缓存
- 14.3 文件格式
- 14.4 总结
- 15. 图层性能
- 15.1 隐式绘制
- 15.2 离屏渲染
- 15.3 混合和过度绘制
- 15.4 减少图层数量
- 15.5 总结