iOS 13:抽屉效果、Quartz2D、图形绘制实例

抽屉效果

  • 实现抽屉效果,尽量不要使用touchMoved:,因为touchMoved:不能添加到UITableView中,故尽量使用手势pan。
  • 经过验证,上下滑动实现UITableView表格cell的上下滑动。当pan手势有一定角度时候,会触发抽屉效果。
  • KVO
    // 利用KVO时刻监听mainV的frame属性
    // Observer:观察者 谁想监听
    // KeyPath:监听的属性
    // options:监听新值的改变
    [_mainV addObserver:self forKeyPath:@"frame" options:NSKeyValueObservingOptionNew context:nil];
  • 设计原理:如果A控制器的view成为B控制View的子控件,注意A控制器一定要成为B控制器的子控制器。使用addChildViewController:。

Quartz2D

  • 是一个二维绘图引擎,MAC OSX 与 iOS 都能通用
  • Quartz2D的API是纯C语言的
  • 图形上下文,类似于画板 - 内存缓存
图片 1.png
  • 图形上下文(Graphics Context):是一个CGContextRef类型的数据。只能获取引用,不能够重新实例化。
// 绘图的步骤: 1.获取上下文 2.创建路径(描述路径) 3.把路径添加到上下文 4.渲染上下文
// 通常在这个方法里面绘制图形
// 为什么要再drawRect里面绘图,只有在这个方法里面才能获取到跟View的layer相关联的图形上下文
// 什么时候调用:当这个View要显示的时候才会调用drawRect绘制图形,
// 注意:rect是当前控件的bounds
- (void)drawRect:(CGRect)rect {
    // 如何绘制曲线
    // 原生绘制方法
    // 获取上下文
    CGContextRef ctx = UIGraphicsGetCurrentContext();
    // 描述路径
    // 设置起点
    CGContextMoveToPoint(ctx, 50, 50);
    // cpx:控制点的x
    CGContextAddQuadCurveToPoint(ctx, 150, 20, 250, 50);
    // 渲染上下文
    CGContextStrokePath(ctx);
}
  • 什么时候调用drawRect:只有需要显示的时候才会调用,调用顺序如下:

    • viewDidLoad:
    • viewWillAppear:
    • drawRect:
    • viewDidAppear:
  • drawRect:不能手动调用,因为图形上下文创建不了,只能由系统帮我们创建,并且传递给我们。系统调用drawRect:步骤:

    • 1.创建上下文
    • 2.调用drawRect:
    • 3.传递上下文给drawRect:
  • 但是在其他方法中可以调用:[self setNeedsDisplay]或者setNeedsDisplayInRect:,此函数是等屏幕刷新的时候调用drawRect:

  • View之所以能显示东西,完全是因为它内部的layer。View内部有个layer(图层)属性,drawRect:方法中取得的是一个Layer Graphics Context,因此,绘制的东西其实是绘制到view的layer上去了

项目:基本图形绘制

  • 绘制方法3种

    • 1.C语言底层绘制
      • 获取图形上下文
      • 描述路径:添加路径,并设置路径属性、状态
      • 将路径添加至上下文中
      • 渲染上下文
    • 2.C语言快速绘制
      • 获取上下文
      • 直接使用简便函数描述路径,省去了将路径添加至上下文中,但是底层调用第1种方法。
      • 渲染上下文
    • 3.objc封装绘制 贝瑟尔路径
      • 创建贝瑟尔路径
      • 描述路径
      • 渲染路径
  • 绘制曲线
    http://donbe.blog.163.com/blog/static/138048021201052093633776/

2313724308561861661.gif
  • 贝瑟尔路径绘制方式:
    • 1.stroke 描边,如果有宽度,内部则为空心
    • 2.fill 对于一个封闭的图形,绘制一个实心
    • 3.closePath,连接首尾,成为一个封闭图形

项目:画饼图、柱状图

  • rgb颜色,正常情况下取值是: 0 ~ 255,但是在objc中取值是:0 ~ 1
  • 注意:一般的图形都会有封装好的框架,不需要自己手动从0使用Quartz2D 进行绘制。

项目:绘制文字和图片

  • 在UIKit framework的第一个文件 NSAttributedStrings.h,包含了富文本属性。UILable具有attributedText属性,创建富文本字符串并赋予给attributeText,可以设置文字状态。
  • [UILable * , sizeToFit],只能计算普通文本。
  • drawAtPoint 不会换行,drawAtRect,在这个设置的Rect中可以换行。
  • UIRectClip 裁剪显示区域Rect,渲染的路径就放在裁剪的Rect中。
  • 图片本身也有尺寸,比如属性:image.size.width。
  • 绘制图形如下:
- (void)drawRect:(CGRect)rect {
    // 超出裁剪区域的内容全部裁剪掉
    // 注意:裁剪必须放在绘制之前
    UIRectClip(CGRectMake(0, 0, 50, 50));
    
    UIImage *image = [UIImage imageNamed:@"001"];
    
    // 默认绘制的内容尺寸跟图片尺寸一样大
//    [image drawAtPoint:CGPointZero];
//    [image drawInRect:rect];
    // 绘图
    [image drawAsPatternInRect:rect];

项目:定时器(雪花)

  • 使用定时器每隔一段时间更新雪花的位置
  • 使用NSTimer,流畅性不好,因为调用优先级不高,并不会准时调用,手机CPU空闲时调度。故很少用于绘图。
  • 使用CADisplayLink,将其添加至主运行循环中,addToRunLoop:。每次屏幕刷新的时候调用,屏幕一般1S中刷新60次。
  • [self setNeedsDisplay];注意:这个方法并不会马上调用drawRect,其实这个方法只是给当前控件添加刷新的标记,等下一次屏幕刷新的时候才会调用drawRect。

项目:图形上下文状态栈、图形上下文矩阵操作

  • 图形上下文的路径的部分状态,是一个栈,设置一次,共同享有。有时需要一开始保存好最纯净的路径状态,当再次使用时候restore还原。
  • 贝瑟尔路径的状态,属于路径单独拥有的。
  • 路径之间的相互转化
    // 把路径添加到上下文
    // .CGPath 可以UIkit的路径转换成CoreGraphics路径
    CGContextAddPath(ctx, path.CGPath);
  • 图形上下文,相当于内存缓冲区。
  • 矩阵操作:平移、缩放、旋转
  • 注意:矩阵操作必须要在添加路径之前。
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 203,547评论 6 477
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 85,399评论 2 381
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 150,428评论 0 337
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 54,599评论 1 274
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 63,612评论 5 365
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,577评论 1 281
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 37,941评论 3 395
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,603评论 0 258
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 40,852评论 1 297
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,605评论 2 321
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,693评论 1 329
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,375评论 4 318
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 38,955评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 29,936评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,172评论 1 259
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 43,970评论 2 349
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,414评论 2 342

推荐阅读更多精彩内容

  • --绘图与滤镜全面解析 概述 在iOS中可以很容易的开发出绚丽的界面效果,一方面得益于成功系统的设计,另一方面得益...
    韩七夏阅读 2,708评论 2 10
  • 转载:http://www.jianshu.com/p/32fcadd12108 每个UIView有一个伙伴称为l...
    F麦子阅读 6,148评论 0 13
  • 每个UIView有一个伙伴称为layer,一个CALayer。UIView实际上并没有把自己画到屏幕上;它绘制本身...
    shenzhenboy阅读 3,081评论 0 17
  • Quartz2D以及drawRect的重绘机制字数1487 阅读21 评论1 喜欢1一、什么是Quartz2D Q...
    PurpleWind阅读 760评论 0 3
  • 在iOS中随处都可以看到绚丽的动画效果,实现这些动画的过程并不复杂,今天将带大家一窥ios动画全貌。在这里你可以看...
    每天刷两次牙阅读 8,461评论 6 30