iOS - 用UIBezierPath介绍和实现简单的扇形下载进
2019-01-21 本文已影响0人
ShIwEn9
所写知识点来自《小码哥视频教程》
吐槽：实习生太苦b
相关知识点：
- DrawRect方法的使用
- 常见图形的绘制：线条、多边形、圆
- 绘图状态的设置：文字颜色、线宽等
- 图形上下文状态的保存和恢复（图形上下文栈）
- 图片的裁剪
- 截图
一、简单介绍Quartz2D
1. 什么是Quartz2D？
Quartz 2D是一个二维绘图引擎，同时支持iOS和Mac系统
2. Quartz 2D能完成的工作
绘制图形 : 线条\三角形\矩形\圆\弧等
绘制文字
绘制\生成图片(图像)
读取\生成PDF
截图\裁剪图片
自定义UI控件
...
二、Quartz2D实例
只要是往View中画东西，必须得在- (void)drawRect:(CGRect)rect;方法中去写
1. 基本路径绘制
- DrawRect在程序中的调用顺序：
viewWillAppear -> drawRect -> viewDidAppear
即将显示和显示完毕之间
- (void)drawRect:(CGRect)rect {
NSLog(@"%s",__func__) ;
}
控制器中
2. UIBezierPath对象相关的方法和属性
- UIBezierPath创建的类方法
// 创建基本路径
+ (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
// 创建指定位置圆角的矩形路径
+ (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;
- UIBezierPath相关属性和方法
- 属性
// 与之对应的CGPath
@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
};
// 两条线交汇处内角和外角之间的最大距离,需要交叉点类型为kCGLineJoinMiter是生效，最大限制为10
@property(nonatomic) CGFloat miterLimit;
// 个人理解为绘线的精细程度，默认为0.6，数值越大，需要处理的时间越长
@property(nonatomic) CGFloat flatness;
// 决定使用even-odd或者non-zero规则
@property(nonatomic) BOOL usesEvenOddFillRule;
- 方法
// 反方向绘制path
- (UIBezierPath *)bezierPathByReversingPath;
// 设置画笔起始点
- (void)moveToPoint:(CGPoint)point;
// 从当前点到指定点绘制直线
- (void)addLineToPoint:(CGPoint)point;
// 添加弧线
- (void)addArcWithCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise NS_AVAILABLE_IOS(4_0);
/* center弧线圆心坐标 radius弧线半径 startAngle弧线起始角度 endAngle弧线结束角度 clockwise是否顺时针绘制 */
// 添加贝塞尔曲线
- (void)addQuadCurveToPoint:(CGPoint)endPoint controlPoint:(CGPoint)controlPoint;
/* endPoint终点 controlPoint控制点 */
- (void)addCurveToPoint:(CGPoint)endPoint controlPoint1:(CGPoint)controlPoint1 controlPoint2:(CGPoint)controlPoint2;
/* endPoint终点 controlPoint1、controlPoint2控制点 */
// 移除所有的点，删除所有的subPath
- (void)removeAllPoints;
// 将bezierPath添加到当前path
- (void)appendPath:(UIBezierPath *)bezierPath;
// 填充
- (void)fill;
// 路径绘制
- (void)stroke;
// 在这以后的图形绘制超出当前路径范围则不可见
- (void)addClip;
3. UIBezierPath的简单使用
基本步骤:
1.获取上下文 -> 2.描述路径 -> 3.添加路径到上下文 -> 4.把上下文的内容渲染到View的layer上
- UIBezierPath绘制直线
- 无论是开启上下文还是获取上下文都是以以UIGraphics开头
- 图形上下文（Graphics Context）：是一个CGContextRef类型的数据
- 图形上下文的作用:
保存绘图信息、绘图状态
决定绘制的输出目标（绘制到什么地方去？）
(输出目标可以是PDF文件、Bitmap或者显示器的窗口上）- 相同的一套绘图序列，指定不同的Graphics Context，就可将相同的图像绘制到不同的目标上
- Quartz2D提供了以下几种类型的Graphics Context：
Bitmap Graphics Context
PDF Graphics Context
Window Graphics Context
Layer Graphics Context
Printer Graphics Context
实例展示：
/**
作用：专门用来绘图
什么时候调用：当View显示时调用
rect :代表当前控件的bounds
*/
- (void)drawRect:(CGRect)rect {
NSLog(@"%s",__func__) ;
//在此方法中内部会自动创建一个跟View相关联的上下文
//可以直接获取
NSLog(@"%@",NSStringFromCGRect(rect)) ;
//小技巧：无论是开启上下文还是获取上下文都是以UIGraphics开头
//1.获取当前跟View相关联的上下文(画板 <- 比喻)
CGContextRef ctx = UIGraphicsGetCurrentContext() ;
//2.描述路径(画笔)
UIBezierPath * path = [UIBezierPath bezierPath] ;
//2.1设置起点(画笔的落点) 坐标的原点是以当前绘制View的左上角为（0,0）原点来参考.
[path moveToPoint:CGPointMake(50, 50)] ;
//2.2添加一根线到某个点，终点（画笔的收点）
[path addLineToPoint:CGPointMake(50, 250)] ;
//一个路径可以描述多条线
//再画另外一个点
[path moveToPoint:CGPointMake(0, 0)] ; //起点
[path addLineToPoint:CGPointMake(50, 30)] ;//终点
//上一个路径的终点直接设为上一个路径的起点（x相同）
[path addLineToPoint:CGPointMake(50,70)]; //终点x和起点x相同
[path addLineToPoint:CGPointMake(30,70)]; //终点y和起点y相同
//设置上下文的状态
CGContextSetLineWidth(ctx, 5) ; // 设置线条的宽度
//设置上下文的链接样式
/*
typedef CF_ENUM(int32_t, CGLineJoin) {
kCGLineJoinMiter,默认样式
kCGLineJoinRound,圆弧样式
kCGLineJoinBevel,切去尖角样式
};
*/
CGContextSetLineJoin(ctx, kCGLineJoinRound) ;
//设置顶角样式
/*
typedef CF_ENUM(int32_t, CGLineCap) {
kCGLineCapButt,
kCGLineCapRound,
kCGLineCapSquare
};
*/
CGContextSetLineCap(ctx, kCGLineCapButt) ;
//设置线的颜色 setStroke setFill 直接使用set,会自动匹配渲染的模式
//[[UIColor redColor] setStroke] ;//描边
//[[UIColor redColor] setFill] ; //填充
[[UIColor redColor] set] ;
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath) ;
//4.把上下文的内容渲染到View相关联的layer上（将画板添加到View）
//渲染的上市有两种：
//1.描边:stroke
//2.填充:fill
CGContextStrokePath(ctx) ;
}
效果展示
- UIBezierPath绘制曲线
画曲线，一般是一条直线，然后定义几个控制点，使直线变弯曲。
二次曲线函数
三次曲线函数
- (void)drawRect:(CGRect)rect {
//1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext() ;
//2.描述路径
UIBezierPath *path = [UIBezierPath bezierPath] ;
//画笔起点
[path moveToPoint:CGPointMake(20, 30)] ;
//添加一条曲线到某个点上
//参数一：终点
//参数二：控制点
[path addQuadCurveToPoint:CGPointMake(200, 30) controlPoint:CGPointMake(100, 100)] ;
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath) ;
//4.把上下文的内容渲染到View的layer
CGContextStrokePath(ctx) ;
}
效果
- UIBezierPath绘制矩形
bezierPathWithRect:描述矩形
cornerRadius:可以理解成矩形最上方一个点到矩形左边顶点的距离。
- (void)drawRect:(CGRect)rect {
//获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext() ;
//描述矩形路径
/*
bezierPathWithRect:描述矩形
参数:矩形的w尺寸大小
*/
UIBezierPath *path = [UIBezierPath bezierPathWithRect:CGRectMake(50, 50, 200, 100)] ;
/*
bezierPathWithRect:描述圆角矩形
参数一：矩形的尺寸大小
参数二：矩形的圆角半径
*/
path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(50, 50, 200, 100) cornerRadius:15.f] ;
//设置上下文的状态得要在渲染之前设置
[[UIColor redColor] set] ;
//把路径添加到上下文
CGContextAddPath(ctx, path.CGPath) ;
//把上下文的内容渲染到View的layer上
// CGContextStrokePath(ctx) ;//描边
CGContextFillPath(ctx) ;
}
矩形效果
- UIBezierPath绘制圆
描述圆的画法有很多
bezierPathWithOvalInRect:绘制圆
- (void)drawRect:(CGRect)rect {
//1.获取上下文
CGContextRef ctx = UIGraphicsGetCurrentContext() ;
//2.描述绘画路径 bezierPathWithOvalInRect:绘制圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 200)] ;
//当宽度和高度一样的时候就是正圆了
path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 100)] ;
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath) ;
//设置上下文
[[UIColor magentaColor] set] ;
//4.把上下文的内容渲染到View的layer上
CGContextFillPath(ctx) ;
}
-
补充：快捷方法 - 其他图形也适用
- (void)drawRect:(CGRect)rect {
//2.描述绘画路径 bezierPathWithOvalInRect:绘制圆
UIBezierPath *path = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(50, 50, 100, 200)] ;
[[UIColor redColor]set] ;
[path stroke] ;
// [path fill] ;
}
效果
- UIBezierPath绘制扇形和圆弧
- (void)drawRect:(CGRect)rect {
/**
绘制圆弧
Center: 中心点坐标
radius:弧所在的半径
startAngle:开始的角度 ; 0度是圆的最右侧，向上的度数为负的，向下的度数为正的
endAngle:结束的角度
clockwise:是顺时针还是逆时针 默认:顺时针
*/
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(100, 100) radius:50 startAngle:0 endAngle:M_PI_2 clockwise:YES] ;
//添加一根线到圆心，然后关闭路径就成了扇形
[path addLineToPoint:CGPointMake(100, 100)];
//关闭路径
[path closePath] ;
[path stroke] ;
[path fill] ;//当使用填充时，会自动关闭路径
}
效果
实例-绘制下载进度条
目录结构
ProgressView.h
#import <UIKit/UIKit.h>
NS_ASSUME_NONNULL_BEGIN
@interface ProgressView : UIView
@property(nonatomic,assign)CGFloat value ;
@end
NS_ASSUME_NONNULL_END
ProgressView.m
#import "ProgressView.h"
@implementation ProgressView
-(void)setValue:(CGFloat)value{
_value = value ;
//这样系统不会执行drawRect方法
//[self drawRect:self.bounds] ;
//当系统调用drawRect方法的时候，在drawRect会自动创建跟View相关的上下文
//手动调用是没有效果的
//通知系统，执行drawRect方法
//setNeedsDisplay:重新绘制
[self setNeedsDisplay] ;
}
- (void)drawRect:(CGRect)rect {
NSLog(@"%@",NSStringFromCGRect(rect));
// Drawing code
//1.获取view相关联的上下文
CGContextRef ctx = UIGraphicsGetCurrentContext() ;
//2.描述路径
CGPoint center = CGPointMake(rect.size.width * 0.5, rect.size.height * 0.5) ;
NSLog(@"%@",NSStringFromCGPoint(center)) ;
CGFloat radius = rect.size.height * 0.5 -20 ;
NSLog(@"%f",radius) ;
CGFloat startAngle = -M_PI_2 ;
CGFloat endAngle = startAngle + self.value * M_PI * 2 ;
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:YES] ;
[[UIColor blueColor] set] ;
//关闭路径
[path addLineToPoint:center];
//3.把路径添加到上下文
CGContextAddPath(ctx, path.CGPath) ;
//4.把上下文的l内容渲染到View上
// CGContextStrokePath(ctx) ;
CGContextFillPath(ctx) ;
}
@end
ViewController.m
#import "ViewController.h"
#import "ProgressView.h"
@interface ViewController ()
@property (weak, nonatomic) IBOutlet ProgressView *progressView;
@property (weak, nonatomic) IBOutlet UILabel *progressLabel;
@property (weak, nonatomic) IBOutlet UISlider *progressSlider;
@end
@implementation ViewController
- (IBAction)progressValueChange:(UISlider *)sender {
self.progressView.value = sender.value ;
NSString *strValue = [NSString stringWithFormat:@"%.2f%%",sender.value * 100] ;
self.progressLabel.text = strValue ;
}
- (void)viewDidLoad {
[super viewDidLoad];
}
@end
屏幕快照 2019-01-22 11.48.38.png
相关图片参考网络
这样简单的使用Quartz2D就完成了，希望能够一起进步，共勉❤️。
求职广告：本人实习生，现在急需一份工作，杭州南京合肥的都可以。对我感兴趣的可以私聊我 0.0。谢谢～～～
