美文网首页
iOS 13:抽屉效果、Quartz2D、图形绘制实例

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

作者: d2cd99b0efce | 来源:发表于2016-04-06 19:13 被阅读322次

抽屉效果

  • 实现抽屉效果,尽量不要使用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);
  • 图形上下文,相当于内存缓冲区。
  • 矩阵操作:平移、缩放、旋转
  • 注意:矩阵操作必须要在添加路径之前。

相关文章

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

    抽屉效果 实现抽屉效果,尽量不要使用touchMoved:,因为touchMoved:不能添加到UITableVi...

  • Quartz2D

    Quartz2D Quartz2D是二维绘图引擎,同时支持iOS和Mac系统。可以绘制图形,绘制文字,绘制/生成图...

  • Quartz2D学习笔记

    Quartz2D Quartz2D是一个二维绘图引擎,iOS和Mac都支持 我们可以用来: 绘制图形 绘制文字 绘...

  • Quartz2D

    一、Quartz2D基本概念 1、Quartz2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境 ...

  • iOS--Quartz2D(上)

    一、Quartz2D基本概念 1、Quartz2D是一个二维图形绘制引擎,支持iOS环境和Mac OS X环境 2...

  • iOS之QuartZ 2D 绘图(一)

    Quartz2D Quartz2D是苹果封装的一个库,针对iOS和os系统绘制不同的类型的制图方式 图形上下文(一...

  • iOS用户头像的圆形图片裁剪常用方法

    使用图层剪切 通过Quartz2D将图形绘制出一张圆形图片 通常的解决的办法就是通过Quartz2D将图形绘制出一...

  • Quartz2D

    Quartz2D Quartz2D概述 Quartz2D可以完成什么:绘制图形:线,三角形,圆,椭圆等等绘制文字(...

  • Quartz2D简介

    什么是Quart2D? Quartz2D是一个二维绘图引擎 Quartz2D能完成的工作绘制图形绘制文字绘制/生成...

  • iOS图形绘制框架 ——UIBezierPath 、Core G

    iOS图形绘制框架 ——UIBezierPath 、Core Graphics 和OpenGL iOS图形绘制框架...

网友评论

      本文标题:iOS 13:抽屉效果、Quartz2D、图形绘制实例

      本文链接:https://www.haomeiwen.com/subject/fadmlttx.html