使用UIBezierPath绘制图形

首页 > 代码库 > 使用UIBezierPath绘制图形

2024-08-30 19:32:08 219人阅读

当需要画图时我们一般创建一个UIView子类，重写其中的drawRect方法

再drawRect方法中利用UIBezierPath添加画图

UIBezierPath的使用方法：

（1）创建一个Bezier path对象。

（2）使用方法moveToPoint:去设置初始线段的起点。

（3）添加line或者curve去定义一个或者多个subpaths。

（4）改变UIBezierPath对象跟绘图相关的属性。

我们可以设置stroked path的属性lineWidth和lineJoinStyle。也可以设置filled path的属性usesEvenOddFillRule

我们直接上demo，创建一个BezierView继承自UIView并重写drawRect方法

#import "BezierView.h"

@implementation BezierView


- (void)drawRect:(CGRect)rect {
    // Drawing code

    //设置线条颜色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //创建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 5.0f;              //设置线条宽度
        path.lineCapStyle  = kCGLineCapRound;   //设置拐角
        path.lineJoinStyle = kCGLineCapRound;  //终点处理
        //设置起始点
        [path moveToPoint:CGPointMake(100, 0)];
        
        //增加线条
        [path addLineToPoint:CGPointMake(200, 40)];
        [path addLineToPoint:CGPointMake(160, 140)];
        [path addLineToPoint:CGPointMake(40, 140)];
        [path addLineToPoint:CGPointMake(0, 40)];
        
        //关闭路径
        [path closePath];
        
        path;
    });
    
    //根据坐标连线
    [apath stroke];
}

然后把自定义的View添加到Controller中

#import "ViewController.h"
#import "BezierView.h"

#define SCREEN_WIDTH [UIScreen mainScreen].bounds.size.width
#define SCREEN_HEIGHT [UIScreen mainScreen].bounds.size.height

@interface ViewController ()

@end

@implementation ViewController

- (void)viewDidLoad {
    
    [super viewDidLoad];
    
    BezierView *beView     = [[BezierView alloc] initWithFrame:                                CGRectMake(0, 0, SCREEN_WIDTH, SCREEN_HEIGHT)];
    
    beView.backgroundColor = [UIColor whiteColor];
    
    [self.view addSubview:beView];
    
}

@end

运行结果能看到一个多边形

技术分享

如果把drawRect中最后一句话改为[apath fill];运行结果就是实心图

技术分享

我们可以用UIBezierPath的bezierPathWithRect:CGRect(rect)方法来画矩形，代码如下

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //设置线条颜色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //创建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithRect:CGRectMake(10, 40, 200, 100)];
    
    //更具坐标连线
    [apath fill];
}

运行结果：

技术分享

我们可以用UIBezierPath的bezierPathWithOvallInRect:CGRect(rect)方法来画圆形和椭圆，代码如下

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //设置线条颜色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //创建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(10, 40, 200, 100)];
    apath.lineWidth     = 5.0f;
    apath.lineCapStyle  = kCGLineCapRound;
    apath.lineJoinStyle = kCGLineCapRound;
    
    //更具坐标连线
    [apath stroke];
}

运行结果：

技术分享

用下面这个方法画带指定远角的矩形

+ (instancetype)bezierPathWithRoundedRect:(CGRect)rect byRoundingCorners:(UIRectCorner)corners cornerRadii:(CGSize)cornerRadii;

上代码：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //设置线条颜色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //创建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, 200, 100)
                                                byRoundingCorners:UIRectCornerTopLeft
                                                      cornerRadii:CGSizeMake(100, 100)];
    apath.lineWidth     = 5.0f;
    apath.lineCapStyle  = kCGLineCapRound;
    apath.lineJoinStyle = kCGLineCapRound;
    
    //更具坐标连线
    [apath stroke];
}

运行结果：

技术分享

如果要设置多个圆角的话就给byRoundingCorners多设置几个角度，角度可选如下

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

例如：

UIBezierPath *apath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(10, 40, 200, 100)
                                                byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
                                                      cornerRadii:CGSizeMake(100, 100)];

就有两个圆角

技术分享

也可以用下面这个方法画圆弧

+ (instancetype)bezierPathWithArcCenter:(CGPoint)center　　　　//圆心坐标

　　　　　　　　　　　　　　　　　　radius:(CGFloat)radius　　　　//半径

　　　　　　　　　　　　　　　　startAngle:(CGFloat)startAngle　　//弧形开始的角度

　　　　　　　　　　　　　　　　 endAngle:(CGFloat)endAngle　　 //弧形结束的角度

　　　　　　　　　　　　　　　　 clockwise:(BOOL)clockwise; //正向还是反向画弧

上代码：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //设置线条颜色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //创建UIBezierPath
    UIBezierPath *apath = [UIBezierPath bezierPathWithArcCenter:CGPointMake(150, 200)
                                                         radius:100 startAngle:M_PI / 2
                                                       endAngle:M_PI
                                                      clockwise:YES];
    apath.lineWidth     = 5.0f;
    apath.lineCapStyle  = kCGLineCapRound;
    apath.lineJoinStyle = kCGLineCapRound;
    
    //更具坐标连线
    [apath stroke];
}

运行结果如下

技术分享

另外

UIBezierPath也可以画贝赛尔曲线, 是在创建BezierPath是通过添加点来实现

- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;

上代码：

- (void)drawRect:(CGRect)rect {
    // Drawing code

    //设置线条颜色
    UIColor *color = [UIColor redColor];
    [color set];
    
    //创建UIBezierPath
    UIBezierPath *apath = ({
    
        UIBezierPath *path = [UIBezierPath bezierPath];
        path.lineWidth     = 5.0f;              //设置线条宽度
        path.lineCapStyle = kCGLineCapRound;   //设置拐角
        
        //设置起始点
        [path moveToPoint:CGPointMake(100, 100)];

        
        //增加弧形
        [path addCurveToPoint:CGPointMake(100, 200)
                controlPoint1:CGPointMake(100, 100)
                controlPoint2:CGPointMake(300, 300)];

        
        path;
    });


    //更具坐标连线
    [apath stroke];
}

运行结果如下:

技术分享

还可以直接在path中添加圆形段

[path addArcWithCenter:CGPointMake(100, 200)
                        radius:100 startAngle:M_PI / 2
                      endAngle:M_PI clockwise:YES];

最后附上UIBezierPath画圆弧时段坐标系

技术分享

使用UIBezierPath绘制图形

声明：以上内容来自用户投稿及互联网公开渠道收集整理发布，本网站不拥有所有权，未作人工编辑处理，也不承担相关法律责任，若内容有误或涉及侵权可进行投诉：投诉/举报工作人员会在5个工作日内联系你，一经查实，本站将立刻删除涉嫌侵权内容。

联系
我们

首页 > 代码库 > 使用UIBezierPath绘制图形

使用UIBezierPath绘制图形

看完仍有疑问？有类似问题直接问程序猿