CAShapeLayer及UIBezierPath

一、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，则这个点在路径外边，不然，就是在里边。

图1.png

kCAFillRuleEvenOdd(奇偶)-这个规则通过从canvas上某个点往任一方向绘制射线到无穷远，然后计算给定图形上线段路径和该射线交叉点的数量。如果这个数是奇数，那么该点在图形内部；如果是偶数，该点在图形外部。

图2.png

这是目前最多的解释，基本上都是这样来解释这两种填充规则的。但是还有几种情况不太明白，如下面两种情况:图3-1是小圆顺时针，大圆逆时针。图3-2是小圆逆时针，大圆顺时针。用的是非零规则。按照非零规则图3-1应该和图3-2的效果一样才对。同时奇偶规则下也会出现几种理解不了的现象。希望有懂的，留言相告。

图3-1是小圆顺时针，大圆逆时针

图3-2是小圆逆时针，大圆顺时针

2、lineCap：线端点类型有三种情况

kCALineCapButt

kCALineCapRound

kCALineCapSquare

效果图下图所示

图4

1、3区别没看出来。

3、lineJoin:线连接类型有三种类型

kCALineJoinMiter

kCALineJoinRound

kCALineJoinBevel

效果如下所示:

图5-kCALineJoinMiter

图5-kCALineJoinRound

图5-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