UIBezierPath :使用UIBezierPath類可以創(chuàng)建基于矢量的路徑, 這個類在UIKit中. 此類是Core Graphics框架關(guān)于path的一個封裝. 使用此類可以定義簡單的形狀, 如橢圓或者矩形, 或者有多個直線和曲線段組成的形狀.
CAShapeLayer:CAShapeLayer 是 CALayer 的子類, 但是比 CALayer 更靈活, 可以畫出各種圖形. 每個CAShapeLayer對象都代表著將要被渲染到屏幕上的一個任意的形狀(shape). 具體的形狀由其path(類型為CGPathRef)屬性指定.
但是, CAShapeLayer 有一條屬性 path , 用這個屬性配合上 UIBezierPath 這個類使用可以達到很好的效果.
首先,說明下 UIBezierPath貝塞爾弧線常用方法
1 . 根據(jù)一個矩形畫曲線
+ (UIBezierPath *)bezierPathWithRect:(CGRect)rect
例: 畫矩形
矩形.gif
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(130, 10, 100, 80)];
layer.path = path.CGPath;
//填充顏色
layer.fillColor = [UIColor clearColor].CGColor;
//邊框顏色
layer.strokeColor = [UIColor redColor].CGColor;
[self.displayView.layer addSublayer:layer];
2 . 根據(jù)矩形框的內(nèi)切圓畫曲線
+ (UIBezierPath *)bezierPathWithOvalInRect:(CGRect)rect
//根據(jù)矩形畫帶圓角的曲線
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius
//在矩形中, 可以針對四角中的某個角加圓角
+ (UIBezierPath *)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii
參數(shù)：
corners:枚舉值, 可以選擇某個角
cornerRadii:圓角的大小
//以某個中心點畫弧線
+ (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
參數(shù)：
center:弧線中心點的坐標
radius:弧線所在圓的半徑
startAngle:弧線開始的角度值
endAngle:弧線結(jié)束的角度值
clockwise:是否順時針畫弧線
例: 通過弧度畫圓
畫圓.gif
//這個畫出來是一個圓形
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 10, 100, 100) cornerRadius:50];
layer.path = path.CGPath;
layer.fillColor = [UIColor orangeColor].CGColor;
layer.strokeColor = [UIColor blueColor].CGColor;
[self.displayView.layer addSublayer:layer];
//這個畫出來是帶圓角的矩形
CAShapeLayer *layer1 = [CAShapeLayer layer];
UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(120, 10, 100, 100) byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(10, 10)];
layer1.path = path1.CGPath;
layer1.fillColor = [UIColor clearColor].CGColor;
layer1.strokeColor = [UIColor redColor].CGColor;
[self.displayView.layer addSublayer:layer1];
//這是一段弧
CAShapeLayer *layer2 = [CAShapeLayer layer];
/*
param: ArcCenter 圓心 radius 半徑 startAngle/endAngle 開始 結(jié)束角度 clockwise YES 順時針 NO 逆時針
*/
UIBezierPath *path2 = [UIBezierPath bezierPathWithArcCenter:CGPointMake(280, 60) radius:50 startAngle:0 endAngle:M_PI clockwise:YES];
layer2.path = path2.CGPath;
layer2.fillColor = [UIColor clearColor].CGColor;
layer2.strokeColor = [UIColor brownColor].CGColor;
[self.displayView.layer addSublayer:layer2];
對于涉及到角度的問題，起始角和結(jié)束角备籽，這里的角度使使用弧度制來表示可以參考這個:
1455416085288481.png
3 . 畫二元曲線, 一般和moveToPoint配合使用
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint
參數(shù)：
endPoint:曲線的終點
controlPoint:畫曲線的基準點
//以三個點畫一段曲線, 一般和moveToPoint配合使用
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2
參數(shù)：
endPoint:曲線的終點
controlPoint1:畫曲線的第一個基準點
controlPoint2:畫曲線的第二個基準點
例: 雙點控制曲線
雙點控制曲線.gif
//貝塞爾曲線的畫法是由起點,終點,控制點 三個參數(shù)來畫的
CGPoint startPoint = CGPointMake(50, 70);
CGPoint endPoint = CGPointMake(300, 70);
CGPoint controlPoint1 = CGPointMake(112.5, 10);
CGPoint controlPoint2 = CGPointMake(237.5, 130);
CALayer *layer1 = [CALayer layer];
layer1.frame = CGRectMake(startPoint.x, startPoint.y, 5, 5);
layer1.backgroundColor = [UIColor redColor].CGColor;
CALayer *layer2 = [CALayer layer];
layer2.frame = CGRectMake(endPoint.x, endPoint.y, 5, 5);
layer2.backgroundColor = [UIColor redColor].CGColor;
CALayer *layer3 = [CALayer layer];
layer3.frame = CGRectMake(controlPoint1.x, controlPoint1.y, 5, 5);
layer3.backgroundColor = [UIColor redColor].CGColor;
CALayer *layer4 = [CALayer layer];
layer4.frame = CGRectMake(controlPoint2.x, controlPoint2.y, 5, 5);
layer4.backgroundColor = [UIColor redColor].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath];
CAShapeLayer *layer = [CAShapeLayer layer];
[path moveToPoint:startPoint];
//在這里使用兩個控制點
[path addCurveToPoint:endPoint controlPoint1:controlPoint1 controlPoint2:controlPoint2];
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor blackColor].CGColor;
[self.displayView.layer addSublayer:layer];
[self.displayView.layer addSublayer:layer1];
[self.displayView.layer addSublayer:layer2];
[self.displayView.layer addSublayer:layer3];
[self.displayView.layer addSublayer:layer4];
當然, 無聊時也可以繪個字
字.gif
//設置起點坐標
CGFloat startX = 50;
CGFloat startY = 50;
CAShapeLayer *layer = [CAShapeLayer layer];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(startX, startY)];
[path addLineToPoint:CGPointMake(startX+50, startY)];
[path addLineToPoint:CGPointMake(startX+25, startY+25)];
[path addArcWithCenter:CGPointMake(startX+25, startY+50) radius:25 startAngle:M_PI*3/2 endAngle:M_PI clockwise:YES];
[path moveToPoint:CGPointMake(startX, startY+25)];
[path addLineToPoint:CGPointMake(startX, startY+150)];
//
[path moveToPoint:CGPointMake(startX+60, startY)];
[path addLineToPoint:CGPointMake(startX+120, startY)];
[path moveToPoint:CGPointMake(startX+95, startY-50)];
[path addQuadCurveToPoint:CGPointMake(startX+60, startY+50) controlPoint:CGPointMake(startX+100, startY)];
[path addLineToPoint:CGPointMake(startX+130, startY+50)];
[path moveToPoint:CGPointMake(startX+95, startY+25)];
[path addLineToPoint:CGPointMake(startX+95, startY+150)];
[path addLineToPoint:CGPointMake(startX+60, startY+125)];
[path moveToPoint:CGPointMake(startX+80, startY+60)];
[path addLineToPoint:CGPointMake(startX+35, startY+145)];
[path moveToPoint:CGPointMake(startX+100, startY+60)];
[path addLineToPoint:CGPointMake(startX+140, startY+145)];
//
layer.path = path.CGPath;
layer.fillColor = [UIColor clearColor].CGColor;
layer.strokeColor = [UIColor redColor].CGColor;
[self.displayView.layer addSublayer:layer];
demo 下載點這里
