一、CAShapeLayer
CAShapeLayer继承自CALayer,具有强大的绘制功能。而且直接进行GPU渲染，节省了内存，提高了效率。好处基本上就是这个了，不过它因为有path这个属性，和UIBezierPath结合使用可以绘制出各种图形。很方便，也很强大。
属性列表
//路径,CASshapeLayer就是根据这个路径绘制图形的
@property(nullable) CGPathRef path;
//填充内部的颜色，默认黑色。支持动画
@property(nullable) CGColorRef fillColor;
//填充方式有两种
@property(copy) NSString *fillRule;
//路径颜色,默认nil。支持动画
@property(nullable) CGColorRef strokeColor;
//起点和终点，取值在0-1之间。于路径总长度成比例关系。支持动画
@property CGFloat strokeStart;
@property CGFloat strokeEnd;
//路径宽度。支持动画
@property CGFloat lineWidth;
// 最大斜接长度。斜接长度指的是在两条线交汇处内角和外角之间的距离。默认10。支持动画
@property CGFloat miterLimit;
//线端点类型
@property(copy) NSString *lineCap;
//线连接类型
@property(copy) NSString *lineJoin;
// 线型模板的起始位置。支持动画
@property CGFloat lineDashPhase;
//线型模板,这是一个NSNumber的数组，索引从1开始记，奇数位数值表示实线长度，偶数位数值表示空白长度。
@property(nullable, copy) NSArray*lineDashPattern;
属性详解
这里面运用了很多SVG的知识，如fillRule填充方式，线端点类型、线连接类型等
1、fillRule:填充方式有两种非零和奇偶规则。解释如下
kCAFillRuleNonZero(非零)—这个规则通过从帆布上的某个点往任一方向绘制射线到无穷远，然后检查图形的线段和射线相交的点，来确定“内部区域”。从0开始计数，每次路径线段是从左到右穿过射线就加一，从右到左的就减一。通过计算交叉点，如果结果是0，则这个点在路径外边，不然，就是在里边。
kCAFillRuleEvenOdd(奇偶)-这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部。
这是目前最多的解释，基本上都是这样来解释这两种填充规则的。但是还有几种情况不太明白，如下面两种情况:图3-1是小圆顺时针，大圆逆时针。图3-2是小圆逆时针，大圆顺时针。用的是非零规则。按照非零规则图3-1应该和图3-2的效果一样才对。同时奇偶规则下也会出现几种理解不了的现象。希望有懂的，留言相告。
2、lineCap：线端点类型有三种情况
kCALineCapButt
kCALineCapRound
kCALineCapSquare
效果图下图所示
1、3区别没看出来。
3、lineJoin:线连接类型有三种类型
kCALineJoinMiter
kCALineJoinRound
kCALineJoinBevel
效果如下所示:
4、miterLimit:斜接长度指的是在两条线交汇处内角和外角之间的距离。默认10。支持动画
二、UIBezierPath
属性列表
//初始化
+ (instancetype)bezierPath;
//矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//在rect所表示的矩形中画椭圆形
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//圆角矩形，rect：矩形位置、形状。cornerRadius:定点的圆角半径
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius;
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
*画圆，一个加号方法，一个减号方法。
*center:圆心位置
*radius:半径
*startAngle:开始的点
*endAngle:结束的点
*clockwise:是否顺时针画
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
//于CGPathRef结合绘制路径
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
@property(nonatomic) CGPathRef CGPath;
//将UIBezierPath类转化成CGPathRef
- (CGPathRef)CGPath
//绘制起点
- (void)moveToPoint:(CGPoint)point;
//绘制除起点外的其它点
- (void)addLineToPoint:(CGPoint)point;
*绘制曲线(起点由moveToPoint:绘制)
*endPoint:终点
*controlPoint1:第一个控制点
*controlPoint2:第二个控制点
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//绘制曲线(只有一个控制点)
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//闭合路径，即在终点和起点连一根线
- (void)closePath;
//移除所有点
- (void)removeAllPoints;
//在原有基础上连接路径
- (void)appendPath:(UIBezierPath *)bezierPath;
//扭转路径，即起点变成终点，终点变成起点
- (UIBezierPath *)bezierPathByReversingPath;
//路径进行仿射变换
- (void)applyTransform:(CGAffineTransform)transform;
// Path info
@property(readonly,getter=isEmpty) BOOL empty;
@property(nonatomic,readonly) CGRect bounds;
@property(nonatomic,readonly) CGPoint currentPoint;
- (BOOL)containsPoint:(CGPoint)point;
//线宽、线端点类型、线连接类型、线拐角处宽度在CALayer中都有讲到，这里就不多说了。
@property(nonatomic) CGFloat lineWidth;
@property(nonatomic) CGLineCap lineCapStyle;
@property(nonatomic) CGLineJoin lineJoinStyle;
@property(nonatomic) CGFloat miterLimit;
@property(nonatomic) CGFloat flatness;
//是否用奇偶填充规则
@property(nonatomic) BOOL usesEvenOddFillRule;
*绘制虚线
*pattern:C类型线性数据
*count:pattern中数据个数
*phase:起始位置
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;
//填充、描边
- (void)fill;
- (void)stroke;
//设置填充的混合模式
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//设置描边的混合模式
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//修改当前图形上下文的绘图区域可见,随后的绘图操作导致呈现内容只有发生在指定路径的填充区域
- (void)addClip;
属性详解
SVG参考文章: http://www.w3cplus.com/svg/svg-fill-stroke.html © w3cplus.com
