iOS圖形繪製UIBezierPath篇

1、繪製直線

UIBezierPath *line = [[UIBezierPath alloc] init];
//設置線寬
line.lineWidth = 3;
[line moveToPoint:CGPointMake(50, 20)];
[line addLineToPoint:CGPointMake(150, 20)];
//設置繪製線條顏色，這個地方需要注意！UIBezierPath本身類中不包含設置顏色的屬性，它是通過UIColor來直接設置。
[[UIColor orangeColor] setStroke];
/*
*線條形狀
*kCGLineCapButt,   //不帶端點
*kCGLineCapRound,  //端點帶圓角
*kCGLineCapSquare  //端點是正方形
*/
line.lineCapStyle = kCGLineCapRound;
[line stroke];

2、繪製矩形

• 直接通過UIRectFill繪製（不帶邊框）

[[UIColor blueColor] setFill];
UIRectFill(CGRectMake(50, 30, 100, 40));

• 使用UIBezierPath繪製（帶邊框）

UIBezierPath *rectangle = [UIBezierPath bezierPathWithRect:CGRectMake(50, 80, 80, 80)];
//邊框線寬
rectangle.lineWidth = 3;
//邊框線顏色
[[UIColor purpleColor] setStroke];
/*
*線條之間連接點形狀
*kCGLineJoinMiter,      //內斜接
*kCGLineJoinRound,     //圓角
*kCGLineJoinBevel      //外斜接
*/
rectangle.lineJoinStyle = kCGLineJoinRound;
//繪製邊框
[rectangle stroke];
//設置填充顏色
[[UIColor yellowColor] setFill];
//繪製矩形內部填充部分
[rectangle fill];

• 直接繪製帶圓角的矩形（實心）：這裏也是可以添加邊框，具體設置同上

UIBezierPath *rectangleCorner = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 170, 80, 80) cornerRadius:4];
[[UIColor brownColor] setFill];
[rectangleCorner fill];

• 繪製部分帶圓角的矩形邊框（空心）

/*
*UIRectCorner:圓角位置
*UIRectCornerTopLeft     = 1 << 0,     //左上角
*UIRectCornerTopRight    = 1 << 1,     //右上角
*UIRectCornerBottomLeft  = 1 << 2,     //左下角
*UIRectCornerBottomRight = 1 << 3,     //右下角
*UIRectCornerAllCorners        //所有角
*
*/
rectangleCorner = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 260, 40, 40) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight cornerRadii:CGSizeMake(4, 4)];
[rectangleCorner stroke];

3、繪製圓形（繪製橢圓只需更改高寬即可）

UIBezierPath *circle = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 310, 80, 80)];
[[UIColor blueColor] setStroke];
circle.lineWidth = 3;
[circle stroke];
[[UIColor redColor] setFill];
[circle fill];

4、繪製多邊形:(這是正宗的三角形)

UIBezierPath *polygon = [UIBezierPath bezierPath];
[polygon moveToPoint:CGPointMake(50, 390)];
[polygon addLineToPoint:CGPointMake(30, 450)];
[polygon addLineToPoint:CGPointMake(100, 450)];
[[UIColor magentaColor] setFill];
[polygon fill];

啊，三角形不是多邊形嗎？不調戲各位看客了，還是來個正宗多邊形，哈哈哈（六角形）

[polygon moveToPoint:CGPointMake(50, 460)];
[polygon addLineToPoint:CGPointMake(20, 500)];
[polygon addLineToPoint:CGPointMake(50, 540)];
[polygon addLineToPoint:CGPointMake(100, 540)];
[polygon addLineToPoint:CGPointMake(130, 500)];
[polygon addLineToPoint:CGPointMake(100, 460)];
[[UIColor magentaColor] setFill];
[polygon fill];

5、繪製弧線

//clockwise參數表示是否順時針繪製
//弧長計算公式：
UIBezierPath *arcLine = [UIBezierPath bezierPathWithArcCenter:CGPointMake(160, 20) radius:50 startAngle:0 endAngle:90 *  M_PI / 180 clockwise:YES];
//下面這種創建方式也是一樣的
//[arcLine addArcWithCenter:CGPointMake(160, 20) radius:50 startAngle:0 endAngle:90 * M_PI / 180 clockwise:YES];
arcLine.lineWidth = 3;
[[UIColor grayColor] setStroke];
[arcLine stroke];

6、繪製貝塞爾曲線

UIBezierPath *quadLine = [UIBezierPath bezierPath];
[quadLine moveToPoint:CGPointMake(160, 80)];
//帶一個控制點
//[quadLine addQuadCurveToPoint:CGPointMake(210, 120) controlPoint:CGPointMake(240, 90)];
//帶兩個控制點
[quadLine addCurveToPoint:CGPointMake(310, 80) controlPoint1:CGPointMake(210, 150) controlPoint2:CGPointMake(270, 150)];
[[UIColor redColor] setStroke];
[quadLine stroke];

7、繪製一個簡單的曲線圖(這個技術難度不高，項目中又常見，可以拿來練練手)

- (void)drawRect:(CGRect)rect {
//繪製線條
    UIBezierPath *grayLine = [UIBezierPath bezierPath];
    grayLine.lineWidth = 1;
    grayLine.lineCapStyle = kCGLineCapButt;
    [[UIColor lightGrayColor] setStroke];
    CGFloat x1 = 140;
    CGFloat x2 = 360;
    CGFloat y = 160;
    //循環繪製7條橫向線條
    for (int i = 0; i < 7; i++) {
        [self drawPathWithLine:grayLine movePoint:CGPointMake(x1, y + i * 20) toPoint:CGPointMake(x2, y + i * 20)];
    }

    //繪製豎線
    [self drawPathWithLine:grayLine movePoint:CGPointMake(x1 + 5, y) toPoint:CGPointMake(x1 + 5, y + 6 * 20 + 5)];
    [self drawPathWithLine:grayLine movePoint:CGPointMake(x2, y) toPoint:CGPointMake(x2, y + 6 * 20 + 5)];
    //繪製圓點
    UIBezierPath *circleDot = [self drawCircleWithOvalInRect:CGRectMake(x1, y + 5 * 20 - 5, 10, 10)];
    [[UIColor blueColor] setStroke];
    UIBezierPath *blueLine = [UIBezierPath bezierPath];
    blueLine.lineWidth = 2;
    [self drawPathWithLine:blueLine movePoint:CGPointMake(circleDot.currentPoint.x - 2.5, circleDot.currentPoint.y - 5) toPoint:CGPointMake(x1 + 40 + 2.5 , y + 1 * 20 + 5)];
    circleDot = [self drawCircleWithOvalInRect:CGRectMake(x1 + 40, y + 1 * 20 - 5, 10, 10)];
    [self drawPathWithLine:blueLine movePoint:CGPointMake(circleDot.currentPoint.x , circleDot.currentPoint.y + 2.5) toPoint:CGPointMake(x1 + 80 , y + 3 * 20 - 12.5)];
    circleDot = [self drawCircleWithOvalInRect:CGRectMake(x1 + 80, y + 3 * 20 - 15, 10, 10)];
    [self drawPathWithLine:blueLine movePoint:CGPointMake(circleDot.currentPoint.x , circleDot.currentPoint.y + 5) toPoint:CGPointMake(x1 + 120 , y + 4 * 20)];
    circleDot = [self drawCircleWithOvalInRect:CGRectMake(x1 + 120, y + 4 * 20, 10, 10)];
    [self drawPathWithLine:blueLine movePoint:CGPointMake(circleDot.currentPoint.x, circleDot.currentPoint.y - 5) toPoint:CGPointMake(x1 + 160 , y + 1 * 20 - 5)];
    circleDot = [self drawCircleWithOvalInRect:CGRectMake(x1 + 160, y + 1 * 20 - 15, 10, 10)];
    [self drawPathWithLine:blueLine movePoint:CGPointMake(circleDot.currentPoint.x , circleDot.currentPoint.y + 5) toPoint:CGPointMake(x1 + 200 , y + 6 * 20 - 15)];
    circleDot = [self drawCircleWithOvalInRect:CGRectMake(x1 + 200 - 2.5, y + 6 * 20 - 15, 10, 10)];
}

- (void)drawPathWithLine:(UIBezierPath *)line movePoint:(CGPoint)movePoint toPoint:(CGPoint)toPoint {
    [line moveToPoint:movePoint];
    [line addLineToPoint:toPoint];
    [line stroke];
}

- (UIBezierPath *)drawCircleWithOvalInRect:(CGRect)frame {
    UIBezierPath *circleDot = [UIBezierPath bezierPathWithOvalInRect:frame];
    [[UIColor blueColor] setFill];
    [circleDot fill];
    return circleDot;
}

看客：博主，你代碼寫的太差了！我看不下去了！死菜雞！

博主：大哥，我已經盡力了！

看客：這麼菜，你還有臉寫博客！你咋不上天呢？

博主：那你咋不遁地！

文中代碼效果圖：

不要問我爲什麼畫的這麼醜，哥已經盡力了！

參考博客地址：

• iOS繪圖之用UIKit框架繪製常見圖形（這篇是用Swift語言寫的）

轉載請註明出處
iOS圖形繪製UIBezierPath篇