博客
关于我
强烈建议你试试无所不能的chatGPT,快点击我
使用UIBezierPath绘制图形
阅读量:6257 次
发布时间:2019-06-22

本文共 6501 字,大约阅读时间需要 21 分钟。

当需要画图时我们一般创建一个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];}

运行结果如下

  

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

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

 

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

另外UIBezierPath可以画贝赛尔曲线

 

下面是添加二次贝赛尔曲线的方法

- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;

 上代码:

- (void)drawRect:(CGRect)rect {    // Drawing code    //设置线条颜色    UIColor *color = [UIColor redColor];    [color set];        //创建UIBezierPath    UIBezierPath *apath = ({            UIBezierPath *path = [UIBezierPath bezierPath];        path.lineWidth     = 2.0f;              //设置线条宽度        //path.lineCapStyle = kCGLineCapRound;   //设置拐角                //绘制二次贝赛尔曲线                //设置起始点        [path moveToPoint:CGPointMake(100, 300)];                //设置EndPoint & Control Point        [path addQuadCurveToPoint:CGPointMake(300, 300) controlPoint:CGPointMake(100, 10)];                path;    });        //更具坐标连线    [apath stroke];}

运行结果为:

可以参照下面这张图看看每个点的定义

三次贝赛尔曲线会有2个控制点

 

上代码:

- (void)drawRect:(CGRect)rect {    // Drawing code    //设置线条颜色    UIColor *color = [UIColor redColor];    [color set];        //创建UIBezierPath    UIBezierPath *apath = ({            UIBezierPath *path = [UIBezierPath bezierPath];        path.lineWidth     = 2.0f;              //设置线条宽度                //绘制三次贝赛尔曲线                //设置起始点        [path moveToPoint:CGPointMake(100, 300)];                //设置EndPoint & Control Point        [path addCurveToPoint:CGPointMake(300, 200)                controlPoint1:CGPointMake(200, 80)                controlPoint2:CGPointMake(220, 500)];                path;    });        //更具坐标连线    [apath stroke];}

运行结果:

 

转载于:https://www.cnblogs.com/zhouxihi/p/6253296.html

你可能感兴趣的文章
centos6下安装docker
查看>>
常见的算法PHP 版,自整理
查看>>
使用UITableView隐藏的复选功能
查看>>
自定义下拉菜单(按钮下面出现下拉菜单),失去焦点后,如何下拉菜单自动消失,以及弹出窗体位置一直变化问题...
查看>>
uboot指令和环境变量
查看>>
Python之模块(二)
查看>>
Python跳出循环语句continue与break的区别
查看>>
内存中堆,栈的区别
查看>>
JavaScript
查看>>
django 配置邮件发送 send_email
查看>>
程序员聊人生
查看>>
ScrollView中嵌套WebView SrcollView自动向下滚动
查看>>
Python尾递归-创始人为何不愿TRE以及我们如何模拟TRE
查看>>
PKUSC2016
查看>>
Java内存分配和内存管理
查看>>
CNCF 有哪些具体的项目内容?
查看>>
[转]Oracle 清除incident和trace -- ADRCI用法
查看>>
农产品期货普遍回调 短期压力仍较大
查看>>
数据之路 Day8 Matplotlib包
查看>>
Ye.云狐J2刷机笔记 | 完美切换内部存储卡和SD卡的改法.vold.fstab
查看>>