Quartz2D简单用法

Quartz2D

知识

• Quartz2D是一个二维绘图引擎，同时支持ios和Mac系统
• Quartz2D能完成的工作:
  • 绘制图形(线性\三角形\矩形\圆\弧)
  • 绘制文字
  • 绘制\生成图片
  • 读取\生成PDF
  • 截图\裁剪图片
  • 自定义UI控件

图形上下文

• 图形上下文(Graphics Context):是一个CGContextRef类型的数据
• 作用：
  • 保存绘图信息，绘图状态
  • 决定绘制的输出目标(PDF、Bitmap...)

掌握

• drawRect方法的调用

  • drawRect方法在view第一次显示到屏幕上的时候调用
  • 调用view的setNeedsDisplay或者setNeedsDisplayInRect时调用

• 上下文

  • 只有在drawRect方法中才能获取上下文

• layer

  • View之所以能显示东西，完全时因为其内部的layer

• 常见图形的绘制

  • 一般步骤

   //获取上下文
      let ctx = UIGraphicsGetCurrentContext()
      //设置起点
      CGContextMoveToPoint(10,10)
      //设置终点
      CGContextAddLineToPoint(50,50)
      //绘制图形
      CGContextStrokePath(ctx)
  
  

  • 也可以这样

      //获取上下文
      let ctx = UIGraphicsGetCurrentContext()
      //设置路径
      let path = UIBezierPath()
      //设置起点
      let startPoint = CGPointMake(10,10)
      //设置终点
      let endPoint = CGPointMake(50,50)
      //描述路径
      path.moveToPoint(startPoint)
      path.addLineToPoint(endPoint)
      //将路径添加到上下文中
      CGContextAddPath(ctx,path.CGPath)
      //绘制
      CGContextStrokePath(ctx)
      CGContextSetLineCap(ctx, .Round)//设置起线断的样式
      // case Butt
      // case Round
      // case Square
      CGContextSetLineJoin(ctx,.Bevel)//设置转折点的样式
      // case Miter
      // case Round
      // case Bevel
  
  

• 位图上下文操作

• 由于位图上下文不是系统创建的上下文，所以需要手动开启，并且不用在view中的drawRect方法中获取

   // 1 开启上下文
       UIGraphicsBeginImageContextWithOptions(view.bounds.size, false, 0.0)
   // 2 获取上下文
       let ctx = UIGraphicsGetCurrentContext()
   // 3 将当前layer渲染到上下文中
       view.layer.renderInContext(ctx!)
   // 4 从上下文中获取图片
       let newImage = UIGraphicsGetImageFromCurrentImageContext()
   // 5 将图片转换成2进制UIImagePNGRepresentation
       let data = UIImagePNGRepresentation(newImage)
   // 6 关闭上下文
       UIGraphicsEndImageContext()
   // 7 写入桌面
       let path: NSString = "/Users/xxx/Desktop"
       let abslotePath = path.stringByAppendingPathComponent("view.png")
       data!.writeToFile(abslotePath as String, atomically: true)

• 水印图片
  • 思路：将一段文字渲染到上下文中，步骤和上面差不多
  • 注意的是drawAtPoint不会自动换行而drawInRect会自动换行
• 图片裁剪
  • 思路：先设置裁剪路径，然后将图片绘制到裁剪的路径中，最后从上下文中获取裁剪后的图片即可

    //1 获取image
    let image = UIImage(named:"aaa")
    //2 开启位图上下文
    UIGraphicsBeginImageContextWithOptions(image.size,false,0)
    //3 设置路径
    let path = UIBezierPath(ovalInRect: CGRectMake(0, 0, (image?.size.width)!, (image?.size.height)!))
    //4 设置裁剪区域
    path.addClip()
    //5 绘制图片
    image.drawAtPoint(CGPointZero)
    //6 从上下文中获取裁剪后的图片
    let newImage = UIGraphicsGetImageFromCurrentImageContext()
    //7 关闭上下文
    UIGraphicsEndImageContext()

• 截图
  • 思路：就是将要截屏的View的layer渲染到图形上下文中即可

    //开启上下文
   UIGraphicsBeginImageContext(UIScreen.mainScreen().bounds.size)
   //获取上下文
   let ctx = UIGraphicsGetCurrentContext()
   //渲染要截屏的图层
   view.layer.renderInContext(ctx!)
   //从上下文中获取图片
   let captureImage = UIGraphicsGetImageFromCurrentImageContext()