貝塞爾概念
首先了解貝塞爾曲線宰啦,網(wǎng)上有很多資料查看1查看2
這兩篇看完,就足夠了解后面要說的內容了
繪制基礎
從iOS3.2開始,支持用UIBezierPath來創(chuàng)建基于矢量的路徑夯缺,它是對Core Graphics框架路徑相關特性的封裝怖喻。可以通過它來定義比如橢圓或者矩形等形狀鳞仙,也可以定義多個直線或曲線組成的形狀君躺。同時支持繪制輪廓峭判,填充內容,甚至剪裁棕叫。
UIBezierPath對象是對CGPathRef類型的封裝林螃。我們可以用任意的直線或曲線路徑來組成矢量圖,每一段路徑都包含一個或多個點和詮釋這些點的繪制方法俺泣。每一條鏈接的直線和曲線路徑構成自路徑subpath疗认。每一條線的終點是下一條線的起點。一個UIBezierPath對象包含一個或多個子路徑來定義完整的路徑伏钠。
創(chuàng)建路徑過程:
- 創(chuàng)建一個路徑對象
- 設置一些繪制屬性參數(shù)横漏,比如線寬lineWidth等畫圖屬性,或fillColor等填充屬性熟掂。
- 用moveToPoint:方法設置起點缎浇。
- 添加一條直線或者曲線來定義子路精。
- 如果有需要打掘,用closePath是子路徑閉合华畏,方法是直接在起點和終點間繪制一條直線鹏秋。
- 如果有需要尊蚁,重復345步驟添加子路徑。
創(chuàng)建路徑時侣夷,應該讓你繪制的點是相對于(0横朋,0)原點點的。因為這樣后面可以方便的移動路徑百拓。繪制是應用當前圖像上下文的坐標系琴锭。如果路徑是相對于原點的晰甚,就可以很容易的移動并做撤銷等操作,你只需要用平移的防射變換來修改它决帖。
繪制路徑會用到stroke和fill的一些方法厕九,這些方法在當前圖形上下文運行。運行過程包含用路徑對象的屬性柵格化直線和曲線地回。柵格化過程不需要修改路徑對象扁远,因此你可以用同樣的路徑對象繪制在同樣或不同的上下文繪制多次。
上代碼刻像,前面幾條會理解更清晰
CAShapeLayer *layer1 = [CAShapeLayer layer];
layer1.bounds = CGRectMake(0, 0, 200, 200);
layer1.position = self.view.center;
layer1.backgroundColor = [UIColor colorWithRed:0.9 green:0.3 blue:0.3 alpha:0.3].CGColor;
UIBezierPath *path = [UIBezierPath bezierPath]; //步驟1
path.lineWidth = 1.; //步驟2
path.usesEvenOddFillRule = NO; //步驟2
[path moveToPoint:CGPointMake(50, 0)]; //步驟3
[path addCurveToPoint:CGPointMake(0, 50)
controlPoint1:CGPointMake(50, 25)
controlPoint2:CGPointMake(25, 50)]; //步驟4
[path addCurveToPoint:CGPointMake(-50, 0)
controlPoint1:CGPointMake(-25, 50)
controlPoint2:CGPointMake(-50, 25)];
[path addCurveToPoint:CGPointMake(0, -50)
controlPoint1:CGPointMake(-50, -25)
controlPoint2:CGPointMake(-25, -50)];
[path addCurveToPoint:CGPointMake(50, 0)
controlPoint1:CGPointMake(25, -50)
controlPoint2:CGPointMake(50, -25)];
[path closePath]; //步驟5
CGAffineTransform transform = CGAffineTransformMakeTranslation(100, 100);
[path applyTransform:transform]; //步驟6
layer1.path = path.CGPath;
layer1.fillColor = [UIColor whiteColor].CGColor;
layer1.strokeColor = [UIColor blueColor].CGColor;
[self.view.layer addSublayer:layer1];
效果

線段類型
1. 直線
直線通過addLineToPoint:方法傳入路徑的終點畅买,和上一條線的終點繪制一條直線。
2. 曲線
曲線通過以下兩個方法實現(xiàn):
- 三次貝塞爾曲線:addCurveToPoint:controlPoint1:controlPoint2:
- 二次貝塞爾曲線:addQuadCurveToPoint:controlPoint:
三次需要4個參數(shù)细睡,二次需要3個參數(shù)谷羞。第一個參數(shù)都是上一條線的終點。貝塞爾曲線在第一部分提到溜徙,看明白就很容易理解這里面的參數(shù)了湃缎。
3. 弧線
通過addArcWithCenter: radius: startAngle: endAngle: clockwise:方法實現(xiàn),參數(shù)通過方法名都看得懂了蠢壹。
其他
繪制橢圓形和矩形
橢圓形:用bezierPathWithOvalInRect:方法傳入的rect矩形參數(shù)繪制一個內切曲線雁歌。當傳入的rect是一個正方形時,繪制的圖像是一個內切圓知残;當傳入的rect是一個長方形時靠瞎,繪制的圖像是一個內切橢圓。
矩形:用bezierPathWithRect:方法
用Core Graphics方法修改路徑
用stroke和fill方法在current graphics context中去渲染路徑