小試牛刀
效果圖是一個圓角矩形加一個尖角三角形，我稱之為尖角矩形滞时，如下圖所示
image1.png
直接要設(shè)計師提供一個切圖當(dāng)然是非常簡單的叁幢，而且毫無難度。
但是剛好前兩天看到一個效果坪稽，使用UIBezierPath畫的一個下拉刷新的效果曼玩，這會想想是否能不用圖片，使用UIBezierPath來畫這個效果窒百。
說干就干演训。
背景區(qū)域整體大小為，寬140贝咙，高50样悟，尖角區(qū)域長度為20
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(20, 0)];
[path addLineToPoint:CGPointMake(0, 25)];
[path addLineToPoint:CGPointMake(20, 50)];
[path addLineToPoint:CGPointMake(140, 50)];
[path addLineToPoint:CGPointMake(140, 0)];
[path closePath];
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = path.CGPath;
layer.fillColor = UIColorFromRGB(0xFFEEE8).CGColor;
[rightBgView.layer insertSublayer:layer atIndex:0];
輕輕松松，效果實現(xiàn)庭猩。
進(jìn)階效果
經(jīng)過初級實驗窟她，使用UIBezierPath繪制不規(guī)則圖形還蠻簡單，有一個復(fù)雜的效果蔼水，也考慮自己繪制震糖。效果圖如下
image2.png
根據(jù)和設(shè)計師溝通，得知右邊為一個圓角矩形趴腋，左下角為一個不規(guī)則圖形吊说，類似一個矩形，裁切掉一個橢圓后剩下的一個邊角（設(shè)計師畫的一個三角形优炬，然后將一條邊拉成弧形颁井，如下圖所示）
image3.png
既然拆分成圓角矩形和另外一個不規(guī)則圖形，就使用兩個UIBezierPath來分別繪制蠢护，第一步雅宾，圓角矩形，這個很容易
// 根據(jù)內(nèi)容取得文字寬度葵硕，已設(shè)置按鈕的contentEdgeInserts
CGFloat width = _tipsButton.intrinsicContentSize.width;
// 此處要用設(shè)置的高度20眉抬，而不能取內(nèi)容高度
CGFloat height = 20;
// 左邊不規(guī)則圖形寬度
CGFloat flex = 12;
// 將效果拆分，一個是矩形圓角懈凹，一個是不規(guī)則色塊
UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(flex, 0, width-flex, height) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:CGSizeMake(4, 4)];
CAShapeLayer *tipsLayer = [CAShapeLayer layer];
tipsLayer.path = path1.CGPath;
tipsLayer.fillColor = UIColorFromRGB(0xFFEEE8).CGColor;
[_tipsButton.layer insertSublayer:tipsLayer atIndex:0];
第二步蜀变，不規(guī)則圖形，使用了二階貝塞爾曲線
// 不規(guī)則圖形
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(0, height)];
// 如果不想調(diào)試效果介评，直接使用這句库北，畫1/4個圓
// [path2 addArcWithCenter:CGPointMake(0, 6) radius:14 startAngle:M_PI_2 endAngle:0 clockwise:NO];
// 這是不斷調(diào)試效果后的結(jié)果，畫一個二階貝塞爾曲線
[path2 addQuadCurveToPoint:CGPointMake(flex, 6) controlPoint:CGPointMake(flex, height)];
[path2 addLineToPoint:CGPointMake(flex, height)];
[path2 closePath];
CAShapeLayer *tipsLayer2 = [CAShapeLayer layer];
tipsLayer2.path = path2.CGPath;
tipsLayer2.fillColor = UIColorFromRGB(0xFFEEE8).CGColor;
[_tipsButton.layer insertSublayer:tipsLayer2 atIndex:0];
最后效果圖
image4.png
后面偶然發(fā)現(xiàn)，UIBezierPath可以將2個path疊加贤惯，優(yōu)化后的代碼
// 根據(jù)內(nèi)容取得文字寬度，已設(shè)置按鈕的contentEdgeInserts
CGFloat width = _tipsButton.intrinsicContentSize.width;
// 此處要用設(shè)置的高度20棒掠，而不能取內(nèi)容高度
CGFloat height = 20;
// 左邊不規(guī)則圖形寬度
CGFloat flex = 12;
// 將效果拆分孵构，一個是矩形圓角，一個是不規(guī)則色塊
UIBezierPath *path1 = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(flex, 0, width-flex, height) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight | UIRectCornerBottomRight cornerRadii:CGSizeMake(4, 4)];
// 不規(guī)則圖形
UIBezierPath *path2 = [UIBezierPath bezierPath];
[path2 moveToPoint:CGPointMake(0, height)];
// 如果不想調(diào)試效果烟很，直接使用這句颈墅，畫1/4個圓
// [path2 addArcWithCenter:CGPointMake(0, 6) radius:14 startAngle:M_PI_2 endAngle:0 clockwise:NO];
// 這是不斷調(diào)試效果后的結(jié)果，畫一個二階貝塞爾曲線
[path2 addQuadCurveToPoint:CGPointMake(flex, 6) controlPoint:CGPointMake(flex, height)];
[path2 addLineToPoint:CGPointMake(flex, height)];
[path2 closePath];
// 兩個path疊加
[path1 appendPath:path2];
CAShapeLayer *tipsLayer = [CAShapeLayer layer];
tipsLayer.path = path1.CGPath;
tipsLayer.fillColor = UIColorFromRGB(0xFFEEE8).CGColor;
[_tipsButton.layer insertSublayer:tipsLayer atIndex:0];
