·您现在的位置: 云翼网络 >> 文章中心 >> 网站建设 >> app软件开发 >> IOS开发 >> iOSQuartz2D-01-核心要点

iOSQuartz2D-01-核心要点

作者:佚名      IOS开发编辑:admin      更新时间:2022-07-23

简介


  • 作用

    • 绘制
    • 绘制图形 : 线条\三角形\矩形\圆\弧等
    • 绘制文字
    • 绘制\生成图片(图像)
    • 读取\生成PDF
    • 截图\裁剪图片
    • 自定义UI控件(通常为内部结构较复杂的控件)
    • UIKit中的绝大部分控件都是由系统绘制的
    • 矩阵操作(使绘制到图形啥下文中的所有路径都发生变化)
    • 缩放
    • 旋转
    • 平移
  • 简介

    • Quartz2D隶属于Core Graphic框架,是一个二维的绘图引擎,直接操于Layer(图层),通常在-drawRect:方法中获取上下文,将需要绘制的内容绘制到图形上下文中,然后将图层渲染到控件,最后关闭图形上下文。
    • - (void)drawRect:(CGRect)rect,该方法只会界面即将显示的时候调用一次,若要在此调用需要调用重绘方法- (void)setNeedsDisplay

常用的绘制操作


  • 绘制直线(三种方法)

    • 通过添加路径的方式绘制直线,最后把路径渲染的上下文
    • 开启上下文

      • CGContextRef context = UIGraphicsGetCurrentContext()
    • 描述所要绘制的路径

      • 创建路径
        CGMutablePathRef CGPathCreateMutable(void)
      • 设置起点
        void CGPathMoveToPoint(CGMutablePathRef path, const CGAffineTransform *m, CGFloat x, CGFloat y)
      • 连线
        void CGPathAddLineToPoint(CGMutablePathRef path, const CGAffineTransform *m, CGFloat x, CGFloat y)
    • 将路径添加到上下文

      • void CGContextAddPath(CGContextRef context, CGPathRef path)
    • 渲染上下文

      • void CGContextStrokePath(CGContextRef c)
    • 直接在上下文中绘制直线
    • 开启上下文

      • CGContextRef context = UIGraphicsGetCurrentContext()
    • 描述所要绘制的路径

      • 设置起点
        void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
      • 连线
        void CGContextAddLineToPoint(CGContextRef c, CGFloat x, CGFloat y)
    • 渲染上下文

      • void CGContextStrokePath(CGContextRef c)
    • 通过贝瑟尔绘制直线
    • 常见贝瑟尔路径(最普通的路径)

      • (UIBezierPath *)bezierPath
    • 设置起点

      • (void)moveToPoint:(CGPoint)point
    • 连线

      • (void)addLineToPoint:(CGPoint)point
    • 渲染

      • (void)stroke
  • 绘制曲线

    • 获取上下文
    • CGContextRef UIGraphicsGetCurrentContext(void)
    • 绘制路径
    • 设置起点
      void CGContextMoveToPoint(CGContextRef c, CGFloat x, CGFloat y)
    • 连线
      void CGContextAddQuadCurveToPoint(CGContextRef c, CGFloat cpx, CGFloat cpy, CGFloat x, CGFloat y)
    • 渲染上下文
      void CGContextStrokePath(CGContextRef c)
  • 绘制圆弧(通过贝瑟尔路径)

    • 创建贝瑟尔路径
    • + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
    • - (void)stroke
  • 绘制饼状图

    • 思路:
      1) 饼状图其实是在圆弧的基础上增加了两条线而完成
    • 实现步骤
    • 通过贝瑟尔路径绘制圆弧

      • + (UIBezierPath *)bezierPathWithArcCenter:(CGPoint)center radius:(CGFloat)radius startAngle:(CGFloat)startAngle endAngle:(CGFloat)endAngle clockwise:(BOOL)clockwise
    • 添加直线使路径封闭

      • 从路径终点到圆弧圆心添加直线
      • - (void)addLineToPoint:(CGPoint)point
      • 路径起点到圆弧圆心的直线会被自动添加
        调用- (void)fill方法是自动添加
    • 设置填充颜色

      • - (void)set,此方法是UIColor对象的方法,用于设置上下文填充或渲染的颜色
    • 填充并封闭路径并渲染

      • - (void)fill,通过贝瑟尔路径调用该方法
  • 绘制柱状图

    • 思路
      1) 通过贝瑟尔路径可以直接绘制柱状图
    • 实现步骤
    • 创建贝瑟尔路径

      • + (UIBezierPath *)bezierPathWithRect:(CGRect)rect
    • 设置填充颜色

      • - (void)set,此方法是UIColor对象的方法,用于设置上下文中填充或渲染的颜色
    • 填充并封闭路径并渲染

      • - (void)fill
  • 绘制文字

    • 思路
    • NSString的分类NSStringDrawing实现了将NSString对象的绘制方法

      • - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs,从某个点开始绘制文字
      • - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs,在rect区域内绘制文字
    • 在绘制文字是,还可以通过attrs参数设置其属性
    • 实现步骤
    • 创建NSString对象
    • 设置文本属性(其属性不存在一个字典中,通过指定的key去设置相应的属性)

      • 设置文本颜色
        NSForegroundColorAttributeName
      • 设置字体
        NSFontAttributeName
      • 设置渲染时的宽度
        NSStrokeWidthAttributeName
      • 设置渲染时的颜色
        NSStrokeColorAttributeName
      • 设置背景属性
        NSShadowAttributeName
        设置背景颜色:shadowColor(UIColor)
        模糊属性:shadowBlurRadius(CGFloat)
        偏移量:shadowOffset
    • 绘制文字

      • - (void)drawInRect:(CGRect)rect withAttributes:(NSDictionary *)attrs
      • - (void)drawAtPoint:(CGPoint)point withAttributes:(NSDictionary *)attrs,若使用该方法,则文字会单行显示
  • 绘制图片

    • 思路
      直接调用UIImage的用于绘制的对象方法即可绘制
    • 实现步骤
    • 创建UIImage对象
    • 创建绘制区域
    • 设置超出绘制区域的内容被剪掉
      UIRectClip(CGRect rect)
    • 绘制图片

      • - (void)drawaspatternInRect:(CGRect)rect,平铺的方式显示图片,铺满整个绘制区域(rect)
      • - (void)drawAtPoint:(CGPoint)point,显示一张与原来图片大小一样的图片
      • - (void)drawInRect:(CGRect)rect,图片被拉伸,大小等于rect
      • - (void)drawAtPoint:(CGPoint)point blendMode:(CGBlendMode)blendMode alpha:(CGFloat)alpha