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

待续~~~