這篇文章介紹UIBezierPath的詳細的使用, 以及一些細節!

創建一個XTBezierPath繼承于UIView的類 使用drawRect 完成圖形的繪制

在drawRect方法完成繪制 使用 moveToPoint, addLineToPoint兩個方法繪制一個任意多邊形 其中w, h 代表自定義View的寬, 高 代碼如下:

            // 初始化一個UIBezierPath對象.
            UIBezierPath *bPath = [UIBezierPath bezierPath];
            // 線寬.
            bPath.lineWidth = 10;
            // 拐點處理.
            bPath.lineCapStyle = kCGLineCapRound;
            // 終點處理.
            bPath.lineJoinStyle = kCGLineCapRound;
            // 添加線上的點.
            [bPath moveToPoint:CGPointMake(w / 2, 0.0)];
            [bPath addLineToPoint:CGPointMake(w, h / 2)];
            [bPath addLineToPoint:CGPointMake(w / 2, h)];
            [bPath addLineToPoint:CGPointMake(0.0, h / 2)];
            [bPath closePath];
            // 填充內部顏色.
            // 繪制線.
            [bPath stroke];

任意多邊形

繪制一個矩形, 直接使用bezierPathWithRect這個方法

            // 創建矩形.
            UIBezierPath *bPath = [UIBezierPath bezierPathWithRect:CGRectMake(30, 30, w - 60, h - 60)];
            bPath.lineWidth = 10;
            [bPath stroke];

矩形

繪制內切曲線, 直接使用這個方法bezierPathWithOvalInRect

             // 這個方法, 是做一個內切曲線.
            // 圓形就是寬高相等.
            UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(5, 5, w - 10, h - 100)];
            bPath.lineWidth = 10;
            [bPath stroke];

內切曲線

繪制一條弧線, bezierPathWithArcCenter這個方法

            UIBezierPath *bPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:130 startAngle:0 endAngle:M_PI_2 clockwise:YES];
            bPath.lineWidth = 10;
            [bPath stroke];

弧線

繪制二次貝塞爾曲線,moveToPoint, addQuadCurveToPoint這兩個搭配使用

原理圖

            // 二次貝塞爾曲線的支持.
            UIBezierPath *bPath = [UIBezierPath bezierPath];
            // 開始的點.
            [bPath moveToPoint:CGPointMake(0, h)];
            // 終止點, 控制點.
            [bPath addQuadCurveToPoint:CGPointMake(w, h) controlPoint:CGPointMake(0, 0)];
            [bPath fill];

貝塞爾曲線

繪制三次貝塞爾曲線, moveToPoint, addCurveToPoint

原理圖

// 三次貝塞爾曲線
            UIBezierPath *bPath = [UIBezierPath bezierPath];
            [bPath moveToPoint:CGPointMake(0, h / 2)];
            [bPath addCurveToPoint:CGPointMake(w, h / 2) controlPoint1:CGPointMake(w / 2, 0) controlPoint2:CGPointMake(w / 2, h)];
            bPath.lineWidth = 10;
            [bPath stroke];

貝塞爾曲線

UIBezierPath類只是CGPathRef數據類型和path繪圖屬性的一個封裝, 我們可以用來直接修改底層的path, 通過CGMutablePathRef, 1. 完全的使用Core Graphics函數去修改path

#if 0
            CGMutablePathRef cgPath = CGPathCreateMutable();
            CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(0, 0, 300, 300));
            CGPathAddEllipseInRect(cgPath, NULL, CGRectMake(50, 50, 200, 200));
            
            // Now create the UIBezierPath object
            UIBezierPath* bPath = [UIBezierPath bezierPath];
            bPath.CGPath = cgPath;
            bPath.usesEvenOddFillRule = YES;
            bPath.lineWidth = 5;
            // After assigning it to the UIBezierPath object, you can release
            // your CGPathRef data type safely.
            [bPath stroke];
            CGPathRelease(cgPath);
            
#endif
// 2.搭配使用 UIBezierPath類擁有自己底層的CGPathRef data type, 所以需要使用一個副本來修改, 之后再賦值
#if 1
            UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 300, 300)];
            
            // Get the CGPathRef and create a mutable version.
            CGPathRef cgPath = bPath.CGPath;
            CGMutablePathRef  mutablePath = CGPathCreateMutableCopy(cgPath);
            
            // Modify the path and assign it back to the UIBezierPath object
            CGPathAddEllipseInRect(mutablePath, NULL, CGRectMake(50, 50, 200, 200));
            bPath.CGPath = mutablePath;
            
            // Release both the mutable copy of the path.
            bPath.lineWidth = 5;
            [[UIColor purpleColor] set];
            [bPath stroke];
            CGPathRelease(mutablePath);
#endif

效果圖

繪制一個圓, 同時畫一個邊框

            // Create an oval shape to draw.
            UIBezierPath *bPath = [UIBezierPath bezierPathWithOvalInRect:
                                   CGRectMake(0, 0, 200, 200)];
            
            // Set the render colors
            [[UIColor lightGrayColor] setStroke];
            [[UIColor greenColor] setFill];
            
            CGContextRef aRef = UIGraphicsGetCurrentContext();
            
            // If you have content to draw after the shape,
            // save the current state before changing the transform
            //CGContextSaveGState(aRef);
            
            // Adjust the view's origin temporarily. The oval is
            // now drawn relative to the new origin point.
            CGContextTranslateCTM(aRef, 50, 50);
            
            // Adjust the drawing options as needed.
            bPath.lineWidth = 5;
            
            // Fill the path before stroking it so that the fill
            // color does not obscure the stroked line.
            [bPath fill];
            [bPath stroke];

效果圖

總結 : UIBezierPath 使用這個就可以完成多種演示的圖形了.

https://github.com/summerxx27/iOSUI