iOS:貝塞爾曲線(UIBezierPath)-----OC

貝塞爾曲線是一個畫圖的類,需在drawRect方法中繪制;可以繪制直線、矩形、圓、橢圓以及其他復雜的圖形
貝塞爾曲線(UIBezierPath)的使用如下:

類方法:
//基本路徑
+ (instancetype)bezierPath;
//矩形路徑
+ (instancetype)bezierPathWithRect:(CGRect)rect;
//橢圓,當rect為正方形是則為圓
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;
//圓角矩形、圓路徑
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius
//指定矩形的角為圓角
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;
//弧線路徑/扇形
+ (instancetype)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise;
//CGpath創建
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;
對象方法
- (instancetype)init NS_DESIGNATED_INITIALIZER;
- (nullable instancetype)initWithCoder:(NSCoder *)coder NS_DESIGNATED_INITIALIZER;
屬性
//返回一個不可變的CGPathRef,在UIBezierPath被進一步修改之前有效
@property(nonatomic) CGPathRef CGPath;
- (CGPathRef)CGPath NS_RETURNS_INNER_POINTER CF_RETURNS_NOT_RETAINED;
//判斷是否為空 只讀屬性
@property(readonly,getter=isEmpty) BOOL empty;
//整個路徑的位置
@property(nonatomic,readonly) CGRect bounds;
//當前路徑的位置
@property(nonatomic,readonly) CGPoint currentPoint;
//線的寬度
@property(nonatomic) CGFloat lineWidth;
//線的末端的類型
@property(nonatomic) CGLineCap lineCapStyle;
typedef CF_ENUM(int32_t, CGLineCap) {
    kCGLineCapButt, //無端點
    kCGLineCapRound,//圓形端點
    kCGLineCapSquare//方形端點
};
//相交線的交點類型
@property(nonatomic) CGLineJoin lineJoinStyle;
typedef CF_ENUM(int32_t, CGLineJoin) {
    kCGLineJoinMiter,//直接連接
    kCGLineJoinRound,//圓角連接
    kCGLineJoinBevel//斜角連接
};
//miterLimit 屬性設置或返回最大斜接長度,只有當 lineJoinStyle 屬性為 "kCGLineJoinMiter" 時,miterLimit 才有效
@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter
//線的精細程度
@property(nonatomic) CGFloat flatness;
//填充區域的方法
@property(nonatomic) BOOL usesEvenOddFillRule; // Default is NO. When YES, the even-odd fill rule is used for drawing, clipping, and hit testing.
方法
//設置畫筆的起始點
- (void)moveToPoint:(CGPoint)point;
//從當前點到指定點繪制直線
- (void)addLineToPoint:(CGPoint)point;
//繪制曲線(三階貝塞爾曲線) 從起點到結束點的曲線,有兩個控制點坐標controlPoint1、controlPoint2
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
//繪制曲線(二階貝塞爾曲線)從起點到終點的曲線,一個控制點
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
//繪制弧線 中線點、半徑、開始角、結束角、繪制方向
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise API_AVAILABLE(ios(4.0));
//設置為封閉的路徑
- (void)closePath;
//移除所有的點
- (void)removeAllPoints;
//兩個貝塞爾曲線路徑拼接
- (void)appendPath:(UIBezierPath *)bezierPath;
//創建并返回一個與當前路徑相反的新的貝塞爾曲線
- (UIBezierPath *)bezierPathByReversingPath API_AVAILABLE(ios(6.0));
//用CGAffineTransform變換路徑的所有點
- (void)applyTransform:(CGAffineTransform)transform;
//是否包含指定的點
- (BOOL)containsPoint:(CGPoint)point;
//設置虛線
- (void)setLineDash:(nullable const CGFloat *)pattern count:(NSInteger)count phase:(CGFloat)phase;
//獲取虛線
- (void)getLineDash:(nullable CGFloat *)pattern count:(nullable NSInteger *)count phase:(nullable CGFloat *)phase;
//填充
- (void)fill;
//繪制路徑
- (void)stroke;

//描邊的混合模式
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//填充的混合模式
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;
//修改當前圖形上下文的繪制的可見區域,之后繪圖操作顯示的內容只有發生在指定路徑的填充區域
- (void)addClip;

使用

1、繪制直線

UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addLineToPoint:CGPointMake(300, 300)];
[path stroke];
line.png

2、矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 200)];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;
[path stroke];
Rect.png

3、橢圓/圓

UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 300)];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
path.lineJoinStyle = kCGLineJoinBevel;
[path stroke];
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 200)];
Oval_C.png
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 300)];
Oval_O.png

4、圓/圓角矩形曲線,
a、半徑大于或等于正方形的邊長一半時為圓,此時半徑不起作用(此處描述有問題)
b、半徑小于于正方形的邊長一半時為圓角矩形
c、當圖形長和寬不等時為圓角矩形,如圖"Rounded_R"

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 180, 150) cornerRadius:80];
path.lineWidth = 3.f;
[path stroke];

問題:a的描述,當為正方形且半徑時邊長的一半是時圓。
當初始化的時候設置半徑為32時,此時是一個圓角矩形。
當初始化的時候設置半徑為33時,此時是一個圓。
希望知道的小伙伴解答一下,感激不盡!!!

[UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:32];
32.png
[UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 100, 100) cornerRadius:33];
33.png
Rounded_R.png

5、圓角矩形

UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 200, 100, 100) byRoundingCorners:UIRectCornerTopLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(40, 40)];
path.lineWidth = 3.f;
[path fill];//填充
[path stroke];

typedef NS_OPTIONS(NSUInteger, UIRectCorner) {
    UIRectCornerTopLeft     = 1 << 0,
    UIRectCornerTopRight    = 1 << 1,
    UIRectCornerBottomLeft  = 1 << 2,
    UIRectCornerBottomRight = 1 << 3,
    UIRectCornerAllCorners  = ~0UL
};

UIRectCornerTopLeft | UIRectCornerBottomRight 用“|”或連接可以切指定位置的圓角,cornerRadii為圓角的大小


R.png

6、繪制貝塞爾曲線三階

UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addCurveToPoint:CGPointMake(300, 100) controlPoint1:CGPointMake(130, 70) controlPoint2:CGPointMake(160, 160)];
[path stroke];
Curve.png

7、繪制貝塞爾曲線二階

UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addQuadCurveToPoint:CGPointMake(300, 100) controlPoint:CGPointMake(180, 180)];
[path stroke];
QuadCurve.png

8、弧線

UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 3.f;
path.lineCapStyle = kCGLineCapRound;
[path moveToPoint:CGPointMake(100, 100)];
[path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 clockwise:YES];
[path stroke];

[path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 NO];
Arc_NO.png
[path addArcWithCenter:CGPointMake(200, 200) radius:100 startAngle:120 endAngle:180 clockwise:YES];
Arc_YES.png
拓展

修改線的顏色

UIColor *color = [UIColor redColor];
[color set];//修改線和填充顏色
[color setFill];//修改填充顏色
[color setStroke];//修改線的顏色

如果想要線條顏色和填充的顏色不同,可以再次創建一個新的color。

最后編輯于
?著作權歸作者所有,轉載或內容合作請聯系作者
平臺聲明:文章內容(如有圖片或視頻亦包括在內)由作者上傳并發布,文章內容僅代表作者本人觀點,簡書系信息發布平臺,僅提供信息存儲服務。

推薦閱讀更多精彩內容