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)
    }

待续~~~