UIBezierPath的介绍和使用

上一篇文章介绍了CoreGraphics,UIBezierPath就是路径绘制的UIKit封装,可以绘制矩形曲线等简单的图形。所以,同样的,使用UIBezierPath绘制图形也是要在drawRect:方法中进行。

大体步骤为:

  1. 重写view 的drawRect:方法
  2. 创建UIBezierPath对象
  3. moveToPoint:设置路径起始点
  4. 使用UIBezierPath的类方法绘制需要的路径
  5. 设置图形属性
  6. 绘制图形

使用UIBezierPath绘制简单的图形

    //1.创建UIBezierPath
    UIBezierPath *path = [UIBezierPath bezierPath];
    //2.绘制路径
    [path moveToPoint:CGPointMake(50, 300)];
    [path addLineToPoint:CGPointMake(50, 200)];
    [path addCurveToPoint:CGPointMake(350, 200) controlPoint1:CGPointMake(160, 50) controlPoint2:CGPointMake(240, 350)];
    [path addLineToPoint:CGPointMake(350, 300)];
    [path closePath];
    //3.设置图形属性
    [[UIColor redColor] setStroke];
    [[UIColor blueColor] setFill];
    path.lineWidth = 5;
    path.lineCapStyle = kCGLineCapRound;
    path.lineJoinStyle = kCGLineJoinRound;
    //4.绘制图形
    [path fill];
UIBezierPath的介绍和使用_第1张图片
UIBezierPathView1.png

一些常用属性

//路径宽度
@property(nonatomic) CGFloat lineWidth;

//路径端点样式
/*
    kCGLineCapButt    默认,平的
    kCGLineCapRound   圆的
    kCGLineCapSquare  矩形
*/
@property(nonatomic) CGLineCap lineCapStyle;

//路径拐点样式
/*
    kCGLineJoinMiter    拐点形状为尖的
    kCGLineJoinRound    拐点形状为圆的
    kCGLineJoinBevel    拐点形状为平的
*/
@property(nonatomic) CGLineJoin lineJoinStyle;

//最大斜接长度 斜接长度指的是在两条线交汇处内角和外角之间的距离,如果正常的斜接长度大于miterLimit的值,则显示类型类似kCGLineJoinBevel
@property(nonatomic) CGFloat miterLimit; // Used when lineJoinStyle is kCGLineJoinMiter

//确定路径渲染的精确度,默认值为0.6,值越小,渲染精度越高,计算时间也越长。
@property(nonatomic) CGFloat flatness;

//渲染规则,设置为yes则路径会使用奇偶规则填充,设置为no使用非零规则填充。
@property(nonatomic) BOOL usesEvenOddFillRule;

//获取路径的终点,如果当前路径为空, 那么该属性的值将会是 CGPointZero
@property(nonatomic, readonly) CGPoint currentPoint;

一些常用方法

//创建一个路径对象
+ (instancetype)bezierPath;

//创建一个矩形
+ (instancetype)bezierPathWithRect:(CGRect)rect;

//创建一个椭圆,内切于矩形
+ (instancetype)bezierPathWithOvalInRect:(CGRect)rect;

//创建一个圆角矩形
+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect cornerRadius:(CGFloat)cornerRadius; // rounds all corners with the same horizontal and vertical radius

//圆角位置可选的矩形
//rect:矩形位置及尺寸
//corners:圆弧所在角的位置,可多选
/*
    UIRectCornerTopLeft       左上角
    UIRectCornerTopRight      右上角
    UIRectCornerBottomLeft    左下角
    UIRectCornerBottomRight   右下角
    UIRectCornerAllCorners    所有角
*/
+ (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;

//利用CGPathRef创建路径
+ (instancetype)bezierPathWithCGPath:(CGPathRef)CGPath;

//路径移动到某点
- (void)moveToPoint:(CGPoint)point;

//从当前点划一条到指定点的直线
- (void)addLineToPoint:(CGPoint)point;

//从当前点划一条到指定点的三次贝塞尔曲线
- (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 NS_AVAILABLE_IOS(4_0);

//关闭路径
- (void)closePath;

//删除路径內的所有点
- (void)removeAllPoints;

//拼接已经存在的路径
- (void)appendPath:(UIBezierPath *)bezierPath;

//返回一个当前路径翻转后的路径
- (UIBezierPath *)bezierPathByReversingPath NS_AVAILABLE_IOS(6_0);

//对路径中的所有点进行仿射变换
- (void)applyTransform:(CGAffineTransform)transform;

//设置虚线
//pattern  c语言数组,表示的是虚线的实线长度和实现中间间隔距离
//count    pattern数组的个数
//phase    虚线从哪个位置开始绘制
- (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;

//路径中是否包含某个点,如果是封闭路径,则返回封闭区域是否包含某个点
- (BOOL)containsPoint:(CGPoint)point;

//绘制路径中间的填充
- (void)fill;

//绘制路径
- (void)stroke;

//以指定模式填充路径封闭的范围
- (void)fillWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//以指定模式绘制路径
- (void)strokeWithBlendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha;

//剪切区域,路径之外的区域将不被渲染
- (void)addClip;

绘制矩形

    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRect:CGRectMake(100, 100, 200, 100)];
    [[UIColor blueColor] set];
    [rectPath fill];
UIBezierPath的介绍和使用_第2张图片
UIBezierPathView2.png

绘制椭圆

    UIBezierPath *ovalPath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(100, 100, 200, 100)];
    [[UIColor blueColor] set];
    ovalPath.lineWidth = 2;
    [ovalPath stroke];
UIBezierPath的介绍和使用_第3张图片
UIBezierPathView3.png

圆角矩形

    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) cornerRadius:10];
    [[UIColor blueColor] set];
    rectPath.lineWidth = 2;
    [rectPath stroke];
UIBezierPath的介绍和使用_第4张图片
UIBezierPathView4.png

自定义圆角矩形

    UIBezierPath *rectPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(100, 100, 200, 100) byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight cornerRadii:CGSizeMake(10, 10)];
    [[UIColor blueColor] set];
    rectPath.lineWidth = 2;
    [rectPath stroke];
UIBezierPath的介绍和使用_第5张图片
UIBezierPathView5.png

弧形

    UIBezierPath *arcPath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 150) radius:100 startAngle:-M_PI_2 endAngle:M_PI_4 clockwise:YES];
    [[UIColor blueColor] set];
    [arcPath fill];
UIBezierPath的介绍和使用_第6张图片
UIBezierPathView6.png

你可能感兴趣的:(UIBezierPath的介绍和使用)