绘图(C语言)

Quartz2D

• 二维绘图引擎，同时支持ios和mac系统
  • 引擎：别人封装好的库
• 作用
  • 绘制图形：线条、三角形、矩形、圆、弧
  • 绘制文字
  • 绘制/生成图片
  • 读取/生成pdf
  • 截图/裁剪图片
  • 自定义UI控件(圆形的进度条)
• 实例：
  • 裁剪图片
  • 涂鸦/画板
  • 手势解锁
  • 报表：折线图、饼状图、柱状图
    • 关于图表的框架
    • github --->ios charts

• 开发中的价值
  • 个性化，自定义控件，构造比较复杂的UI界面

图形上下文(画板)

• CGContextRef(上下文)

• 作用

  • 保存绘图信息、绘图的状态
  • 决定绘制的输出目标(绘制到什么地方去)
    • 输出目标可以是PDF文件，Bitmap或者显示器的窗口上
  • 绘制好的图形，保存到图形上下文中，根据输出目标不同，显示到不同的输出目标上

• 相同的一套绘图序列，指定不同的上下文，就可将相同的图形绘制到不同的目标

• 画板：往哪些地方去画？

  • Bitmap Graphics Context
  • PDF Graphics Context
  • Window Graphics Context（窗口）
  • Layer Graphics Context
    • UIView之所以能够显示就是因为内部有一个layer
  • Printer Graphics Context

自定义view

• 条件

  • 必须要有上下文
  • 上下文必须与view相关联，才能将内容绘制到view上面

• 步骤：

  • 新建一个类，继承UIView
  • 实现drawRect：方法，在这个方法里面
  • 取得跟当前view相关联的图形上下文
  • 绘制相应的图形内容
  • 利用图形上下文将绘制的所有的内容渲染显示到view上面

基本路径绘制(直线)

• 自定义view:DrawView

• drawRect：(CGRect)rect

  • 作用：绘图

  • 什么时候调用：在view显示的时候调用

  • 参数：当前view的bounds

  • 在此方法中，会自动创建跟view相关联的上下文

  • 获取上下文(无论开启上下文，还是获取上下文都是以UIGraphics开头)

    • UIGraphicsGetCurrentContext()
    • 返回值CGContextRef,指向指针的结构体

  • 往上下文当中绘制内容

    • 画笔：[UIBezierPath bezierPath]
    • 从起点添加一根线到终点
      • 把画笔移动到某个点
        • moveToPoint
      • 添加一个线到另一个点
        • addLineToPoint:
    • 一个路径可以描述多条线
    • 把上一个路径的终点当做下一个路径的起点

  • 把绘制的内容添加到上下文当中

    • CGContextAddPath()把哪个路径添加到哪个上下文
    • CGPathRef —— UIBezierPath转成CGPathRef
      • UI的转成CG(CoreGraphics)
        • .CGPath
        • .CGColor

  • 把上下文的内容渲染到view的layer上面

    • 渲染：stroke(描边).fill(填充)
    • CGContextStrokePath

• 修改上下文的状态（线条的状态样式）

  • CGContextSetLine
  • 线宽CGContextSetLineWidth
  • 颜色
    • [[UIColor redColor]setStroke]
    • [[UIColor redColor]setFill]
    • [[UIColor redColor]set]自动匹配渲染的效果
  • 线的连接样式CGContextSetLineJoin(哪个上下文,Round/Miter/Bevel)
  • 设置顶角样式CGContextSetLineCap(哪个上下文,Round//)

基本路径绘制(曲线)

• 获取跟view相关联的上下文
  • UIGraphicsGetCurrentContext()
• 描述路径
  • UIBezierPath
  • moveToPoint：
  • 添加一个曲线到某个点
  • addQuadCurveToPoint:controlPoint:
• 把路径添加到上下文
  • CGContextAddPath
• 把上下文的内容渲染到view的layer上面
  • CGContextStrokePath

基本路径绘制(画矩形)

• 获取跟view相关联的上下文
  • UIGraphicsGetCurrentContext()
• 描述路径
  • 矩形：UIBezierPath bezierPathWithRect:
  • 圆角矩形：UIBezierPath bezierPathWithRoundRect:cornerRadius:
    • cornerRadius为宽度一半的时候，就是圆
• 把路径添加到上下文
  • CGContextAddPath()
• 把上下文的内容渲染到view的layer上面
  • CGContextFillPath()
• 设置上下文状态
  • [[UIColor redColor] set]

基本路径绘制(圆形)

• 椭圆UIBezierPath * path = [UIBezierPath bizierPathWithOvalInRect:]

• [path stroke]

• stroke/fill内部经过了四个步骤

基本路径绘制(弧/扇形)

• UIBezierPath bezierPahtWithArcCenter:弧所在的圆心radius:圆的半径startAngle:开始角度endAngle:截止角度clockwise：是否为顺时针

  • 顺时针画一个180度的弧
  • center:(rect.size.width0.5 ,rect.size.height0.5)
  • radius = rect.size.with*0.5 - 10
  • startA = 0
  • endA = M_PI
  • YES:顺时针，NO:逆时针 closewise:是决定怎么到某一点
  • 角度往上是负的，往下是正的

• closePath :关闭路径，从路径的终点连线到起点

  • 当使用fill的时候，会自动关闭路径

• 设置上下文的状态，必须要在绘制之前进行

下载进度条

• 监听UISlider的拖动，更改Label的内容

  • 获取进度值.value就是当前进度值
  • 把value值显示到label上面
    • 保留两位小数.2f
    • %是特殊符合，想要显示%需要写两个%：%%

• 在view上面画东西，需要用到drawRect:方法，就需要自定义类

  • 画弧bezierPathWithArcCenter:
    • center:宽度高度的一半
    • radius:宽度的一半减去一个值
    • startA - M_PI_2
    • endA = startA + progressM_PI2
      • progress:进度值，value
      • 定一个属性接收进度值

• 监听属性变化，重写progress的set方法

• 重绘：

  • drawRect：当手动调用该方法的时候，是不会自动创建图形上下文的
  • 只有系统调用drawRect:方法，才会创建跟view相关联的上下文
  • 重绘方法 setNeedsDisplay 只要调用了这个方法，系统就会调用drawRect:方法

饼图

• 思路分析
  • 上一个扇形的截止角度是下一个扇形的开始角度

绘制文字|图片

• 自定义view
• 画文字
  • 要画的文字内容
  • 字典key值描述文字属性
    • 字体
      dict[NSFontAttributeName]= [UIFont systemFontOfSize:]
    • UIKit
      • NSAttributeString:
    • 颜色NSForegroundColorAttributeName
    • 描边NSStrokeColorAttributeName
    • 描边的宽度NSNumber@
      NSStrokeWidthAttributeName
    • 阴影NSShadowAttributeName
      • shadowOffset 阴影的偏移量
        • 默认右下偏移
        • 负的就是左上
      • shadowColor
      • shadowBlurRadius模糊
  • drawAtPoint:withAttributes:
    • attributes:传字典
  • drawInRect:当前范围withAttributes:
    • 文字较多的时候，文字会换行，而drawAtPoint：不会换行

• 画图片

  • 加载一张图片，就是要画的图片
  • drawAtPoint:
    • 绘制的是图片的原始大小
  • drawInRect:
    • 会把要绘制的图片给填充到指定的区域
  • drawAsPatternInRect：
    • 平铺
  • 必须要在drawRect方法中进行

• 注意：

  • 只有是往view上画东西，都必须要在drawRect:方法中进行

• 裁剪

  • 画之前做裁剪,设置裁剪的范围
  • 超过裁剪区域以外的内容都不显示
  • UIRectClip(CGRectMake(0，0，50，50))
  • 设置裁剪必须要在绘制之前进行

模仿系统的UIImageView

• CTO:技术总监
• 继承UIView--创建XMGImageView
  • image属性
    • 把图片画到上面去
    • self.image drawInRect:
  • 切换图片touchBegan
    • 重写image的set方法
    • 重绘操作
  • initWithImage:
    • 提供一个init的对象方法
    • 初始化父类
    • self.frame有值