CAShaper主要用于繪圖店煞，類似于直線苞慢、曲線诵原、各種圖形、貝塞爾曲線、虛線等等绍赛。下面主要介紹幾個常用的繪圖
GitHub工程地址本篇主要的內(nèi)容在Layer/CAShaperLayer/ShaperLayer里
一蔓纠、先說下CAShaperLayer的屬性
/*
* CAShapeLayer屬性解釋：
*
** @property(nullable) CGPathRef path;
呈現(xiàn)的形狀的路徑。賦值時吗蚌，路徑被復(fù)制腿倚。默認(rèn)為null
** @property(nullable) CGColorRef fillColor;
填充路徑的顏色，或不需要填充蚯妇。默認(rèn)顏色為不透明的黑色敷燎。
** @property(copy) NSString *fillRule;
當(dāng)在填充顏色的時候則就需要這種填充規(guī)則，值有兩種箩言，非零和奇偶數(shù)硬贯，但默認(rèn)是非零值。
** @property(nullable) CGColorRef strokeColor;
設(shè)置描邊色陨收，默認(rèn)無色饭豹。
** @property CGFloat strokeStart; @property CGFloat strokeEnd;
這兩個值被定義用于繪制邊線輪廓路徑的子區(qū)域。該值必須在[0,1]范圍畏吓，0代表路徑的開始墨状，1代表路徑的結(jié)束卫漫。在0和1之間的值沿路徑長度進行線性插值菲饼。strokestart默認(rèn)為0，strokeend默認(rèn)為1列赎。
** @property CGFloat lineWidth;
lineWidth為線的寬度宏悦，默認(rèn)為1；
** @property CGFloat miterLimit;
miterLimit為最大斜接長度包吝。斜接長度指的是在兩條線交匯處和外交之間的距離饼煞。只有l(wèi)ineJoin屬性為kCALineJoinMiter時miterLimit才有效。邊角的角度越小诗越，斜接長度就會越大砖瞧。為了避免斜接長度過長，我們可以使用miterLimit屬性嚷狞。如果斜接長度超過miterLimit的值块促，邊角會以lineJoin的“bevel”即kCALineJoinBevel類型來顯示。
** @property(copy) NSString *lineCap;
lineCap為線端點類型床未，值有三個類型竭翠，分別為kCALineCapButt 、kCALineCapRound 薇搁、kCALineCapSquare斋扰，默認(rèn)值為Butt；
** @property(copy) NSString *lineJoin;
lineJoin為線連接類型，其值也有三個類型传货，分別為kCALineJoinMiter屎鳍、kCALineJoinRound、kCALineJoinBevel问裕，默認(rèn)值是Miter
** @property CGFloat lineDashPhase;
lineDashPhase為線型模版的起始位置
** @property(nullable, copy) NSArray<NSNumber *> *lineDashPattern;
lineDashPattern為線性模版哥艇，這是一個NSNumber的數(shù)組，索引從1開始記僻澎，奇數(shù)位數(shù)值表示實線長度貌踏，偶數(shù)位數(shù)值表示空白長度。
*/
1窟勃、直線
/*線性的CAShapeLayer*/
- (CAShapeLayer *)lineLayer
{
if(!_lineLayer){
_lineLayer = [[CAShapeLayer alloc] init];
// 設(shè)置線條顏色
_lineLayer.strokeColor = [UIColor redColor].CGColor;
// 設(shè)置線條寬度
_lineLayer.lineWidth = 5;
// 繪制線條路徑
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
//設(shè)置layer的path
_lineLayer.path = path.CGPath;
}
return _lineLayer;
}
效果
直線
2.虛線
/*線性的CAShapeLayer*/
- (CAShapeLayer *)lineLayer
{
if(!_lineLayer){
_lineLayer = [[CAShapeLayer alloc] init];
// 設(shè)置線條顏色
_lineLayer.strokeColor = [UIColor redColor].CGColor;
// 設(shè)置線條寬度
_lineLayer.lineWidth = 5;
// 繪制線條路徑
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 100)];
[path addLineToPoint:CGPointMake(200, 100)];
// 連接類型為round祖乳，就是拐角處的線條類型
_lineLayer.lineJoin = kCALineJoinRound;
//線性模版，這是一個NSNumber的數(shù)組秉氧，索引從1開始記眷昆，奇數(shù)位數(shù)值表示實線長度，偶數(shù)位數(shù)值表示空白長度汁咏。下面表示的是一個等距等寬的虛線亚斋。
_lineLayer.lineDashPattern = @[@5,@5];
//設(shè)置layer的path
_lineLayer.path = path.CGPath;
}
return _lineLayer;
}
效果
虛線
3、弧線
/*弧線CAShapeLayer*/
- (CAShapeLayer *)radianLayer
{
if(!_radianLayer){
_radianLayer = [[CAShapeLayer alloc] init];
_radianLayer.strokeColor = [UIColor orangeColor].CGColor;
// 設(shè)置fillColor填充色為透明攘滩，這樣繪制的時候才會以線的形式繪制
_radianLayer.fillColor = [UIColor clearColor].CGColor;
// 設(shè)置layer的路徑
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 50)];
// 第一個參數(shù)為結(jié)束點帅刊，第二個參數(shù)為控制點
[path addQuadCurveToPoint:CGPointMake(250, 250) controlPoint:CGPointMake(150, 300)];
_radianLayer.path = path.CGPath;
}
return _radianLayer;
}
效果
弧線
4、曲線
/*曲線*/
- (CAShapeLayer *)curveLayer
{
if(!_curveLayer){
_curveLayer = [[CAShapeLayer alloc] init];
_curveLayer.strokeColor = [UIColor greenColor].CGColor;
_curveLayer.fillColor = [UIColor clearColor].CGColor;
// 繪制曲線
UIBezierPath * path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(50, 350)];
// 第一個參數(shù)是終點位置漂问；第二個參數(shù)是第一個控制點赖瞒；第三個參數(shù)是第二個控制點
[path addCurveToPoint:CGPointMake(250, 350) controlPoint1:CGPointMake(100, 250) controlPoint2:CGPointMake(200, 450)];
_curveLayer.path = path.CGPath;
}
return _curveLayer;
}
效果
曲線
5、空心圓
/*圓形CAShapeLayer*/
- (CAShapeLayer *)circleLayer
{
if(!_circleLayer){
_circleLayer = [[CAShapeLayer alloc] init];
_circleLayer.strokeColor = [UIColor yellowColor].CGColor;
_circleLayer.lineWidth = 5;
_circleLayer.position = CGPointMake(70, 150);
_circleLayer.fillColor = [UIColor clearColor].CGColor;
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
_circleLayer.path = path.CGPath;
}
return _circleLayer;
}
效果
空心圓
6蚤假、帶填充色的圓
空心圓和帶填充色的圓栏饮，代碼只有一處不同：
_circleLayer.fillColor = [UIColor redColor].CGColor;//填充色為紅色
_circleLayer.fillColor = [UIColor clearColor].CGColor;//填充色為透明
/*圓形CAShapeLayer*/
- (CAShapeLayer *)circleLayer
{
if(!_circleLayer){
_circleLayer = [[CAShapeLayer alloc] init];
_circleLayer.strokeColor = [UIColor yellowColor].CGColor;
_circleLayer.lineWidth = 5;
_circleLayer.position = CGPointMake(70, 150);
_circleLayer.fillColor = [UIColor redColor].CGColor;
UIBezierPath * path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 100, 100)];
_circleLayer.path = path.CGPath;
}
return _circleLayer;
}
效果
實心圓
這篇說道的是CAShaperLayer的基礎(chǔ)繪圖，下篇會介紹CAShaperLayer的動畫磷仰，主要介紹一個進度條和一個注水動畫
