Quartz2D初识和应用

Quartz 2D是一个二维绘图引擎，同时支持iOS和Mac系统
Quartz 2D能完成的工作：

• 绘制图形 : 线条\三角形\矩形\圆\弧等
• 绘制文字
• 绘制/生成图片
• 读取生成PDF
• 截图、裁剪图片

• 自定义UI控件

  Quartz2D在iOS开发中的价值

  • 为了便于搭建美观的UI界面，iOS提供了UIKit框架，里面有各种各样的UI控件
  • UILabel：显示文字
  • UIImageView：显示图片
  • UIButton：同时显示图片和文字（能点击）

图形上下文

图形上下文（Graphics Context）：是一个CGContextRef类型的数据

• 图形上下文的作用
• 保存绘图信息、绘图状态
• 决定绘制的输出目标（绘制到什么地方去？）
• （输出目标可以是PDF文件、Bitmap或者显示器的窗口上）
• 相同的一套绘图序列，指定不同的Graphics Context，就可将相同的图像绘制到不同的目标上

图像上下文

• Quartz2D提供了以下几种类型的Graphics Context：
• Bitmap Graphics Context
• PDF Graphics Context
• Window Graphics Context
• Layer Graphics Context
• Printer Graphics Context

自定义View

利用Quarz2D绘制东西到view上面去
1、得由图形上下文 ，因为它能保存绘图信息，并决定绘制到哪里去
2、那个图形上下文必须和view相关联，才能将内容绘制到view上面

自定义view的步骤

1、新建一个继承于uiview的类
2、实现- （void）drawRect:(CGRect)rect方法，然后在这个方法中实现

具体步骤：

• 1>、获取当前的图形上下文；

let ctx = UIGraphicsGetCurrentContext()

• 2>、描述路径

let ctx = UIGraphicsGetCurrentContext()

• 3>、把路径添加到上下文中

CGPathMoveToPoint(path, nil, 100, 10)CGPathAddLineToPoint(path, nil, 100, 50)CGContextAddPath(ctx, path)

• 4>、渲染上下文

CGContextStrokePath(ctx)

以上的1> 2> 3> 4>是绘图的基本步骤

对上面的绘图步骤进行简化如下：

let ctx = UIGraphicsGetCurrentContext()CGContextMoveToPoint(ctx, 20, 20)CGContextAddLineToPoint(ctx, 200, 200)CGContextStrokePath(ctx)

继续简化，使用贝塞尔路径的方式实现：

let path = UIBezierPath().bezierPathByReversingPath()path .moveToPoint(CGPointMake(40, 40))path.addLineToPoint(CGPointMake(140, 140))path.stroke()

设置绘图状态 需要在渲染之前

UIColor.redColor().setStroke() //设置线条颜色CGContextSetLineWidth(cox, 10); //设置线宽...

绘制圆形：
// 圆弧

let endAngle = CGFloat(M_PI * 2)let path = UIBezierPath(arcCenter: CGPointMake(100, 100), radius: 90, startAngle: 0, endAngle:endAngle, clockwise: false)path.fill()

//画扇形

// 扇形let endAngle = CGFloat(M_PI_2)let centerPoint = CGPointMake(100, 100)let path = UIBezierPath(arcCenter: centerPoint, radius: 90, startAngle: 0, endAngle:endAngle, clockwise: true)path.addLineToPoint(centerPoint)path.closePath()path.stroke()

画扇形图

        let arr = [10.0, 20.0, 30.0,50, 40];        var totle = 0.0        for i in 0 ..< arr.count {            totle += arr[i]        }        let centerPoint = CGPointMake(120, 120)        var startAngle: CGFloat = 0.0        var endAngle: CGFloat = 0.0        var angle: CGFloat = 0.0        for i in 0 ..< arr.count {            startAngle = endAngle            angle = CGFloat(arr[i] / totle * M_PI * 2)            endAngle = startAngle + angle            let path = UIBezierPath(arcCenter:centerPoint, radius: 100.0, startAngle: startAngle, endAngle: endAngle, clockwise: true)            path.addLineToPoint(centerPoint)            color().setFill()            path.fill()        }    }    func color() -> UIColor {        let r: CGFloat = CGFloat(arc4random_uniform(256))        let g: CGFloat = CGFloat(arc4random_uniform(256))        let b: CGFloat = CGFloat(arc4random_uniform(256))        return UIColor(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: 1.0)    }

// 柱状体

// 柱状体                let arr = [10.0, 20.0, 30.0,50, 40, 60.0, 35.5];        var totle = 0.0        for i in 0 ..< arr.count {            totle += arr[i]        }        let radio: CGFloat = (rect.size.height - 20) / (CGFloat(arr[findMax(arr)] / totle) * rect.size.height)        var x: CGFloat = 0.0        var y: CGFloat = 0.0        var w: CGFloat = 0.0        var h: CGFloat = 0.0        for i in 0 ..< arr.count {            w = (rect.size.width - 20) / CGFloat(2 * arr.count - 1)            h = CGFloat(arr[i] / totle) * rect.size.height * radio            x = 2 * w * CGFloat(i) + 10            y = rect.size.height - h            let path = UIBezierPath(rect: CGRectMake(x, y, w, h))            color().setFill()            path.fill()            let str: String = String.init(format: "%.1f", arr[i])            let label = UILabel(frame: CGRectMake(x - 10, y - 20, w + 20 , 20))            label.text = str as String            label.font = UIFont.systemFontOfSize(12.0)            label.textAlignment = NSTextAlignment.Center            label.textColor = color()            self.addSubview(label)        }    func findMax(arr: [Double]) -> Int {        var flag: Int = 0        for i in 0 ..< arr.count - 1 {            if arr[i] < arr[i + 1] {                flag = i + 1            }        }        return flag    }    func color() -> UIColor {        let r: CGFloat = CGFloat(arc4random_uniform(256))        let g: CGFloat = CGFloat(arc4random_uniform(256))        let b: CGFloat = CGFloat(arc4random_uniform(256))        return UIColor(red: r / 255.0, green: g / 255.0, blue: b / 255.0, alpha: 1.0)    }

待续~~~