自定义了一个类 继承了UIView 默认带了override func drawRect(rect: CGRect){} 系统会自动调用 接下来所有的绘图都是在这里完成
import UIKit
class CustomView: UIView {
override func drawRect(rect: CGRect) {
drawcon()
//其它绘图都是直接写在这个函数体内,为了理顺思路和美观,所以排版的时候放在了外面
}
绘制表格 其中包含了绘图的基本步骤
func drawcon(){
//1. 获取上下文
let context = UIGraphicsGetCurrentContext()
var x:CGFloat = 50
while x < self.frame.size.width {
//2. 开始,设置绘制起点
CGContextMoveToPoint(context, x , 0)
//3. 终点 往上下文上添加图形
CGContextAddLineToPoint(context, x, self.frame.size.height)
x += 50
}
var y :CGFloat = 50
while y < self.frame.size.height{
CGContextMoveToPoint(context, 0, y)
CGContextAddLineToPoint(context, self.frame.size.width, y)
y += 50
}
//4.保存当前的上下文状态
CGContextSaveGState(context)
//5. 设置颜色、样式、尺寸
CGContextSetLineWidth(context, 2)
CGContextSetStrokeColor(context, [1,0,0,1])
//连接处设置
// CGContextSetLineJoin(cxt, .Round)
CGContextSetLineDash(context, 0, [4,5], 2)
//6.绘制
CGContextStrokePath(context)
//7.恢复到上次保存时的状态
CGContextRestoreGState(context)
}
绘制矩形
context 环境都是在drawRect中 对象只有一个 如果设置了with为1那么整个过程就为1 所有为了解决这个问题 就利用图形状态堆栈CGContextSaveGState(context) 入栈 CGContextRestoreGState(context) 弹栈
let context = UIGraphicsGetCurrentContext()
CGContextAddRect(context, CGRect(x: 100, y: 50, width: 100, height: 100))
CGContextAddRect(context, CGRect(x: 150, y: 100, width: 100, height: 100))
//边框颜色 红绿蓝 透明度
CGContextSetStrokeColor(context, [0,1,0,1])
//设置边框粗细
CGContextSetLineWidth(context, 4)
// 只画边框
// CGContextStrokePath(context)
//只画填充
// CGContextFillPath(context)
//填充颜色
CGContextSetFillColor(context, [1, 0, 0, 1])
//非零环绕数
//Even-Odd 用来判断填充的内部 画填充或者边框
根据奇偶来判断外部还是内部 交叉点为偶数则是外部 不填充
CGContextDrawPath(context,.EOFillStroke)
绘制圆和圆弧
//给定一个矩形就能确定一个圆 相切原理
CGContextAddEllipseInRect(context, CGRect(x: 100, y: 100, width: 100, height: 200))
//圆点 半径 起点角度 终点角度 1 代表顺时针 电脑反方向认为
//绘制椭圆
CGContextAddArc(context, 100, 100, 100,0, CGFloat(M_PI_2), 1)
//注意当前点的位置 及上图最后一个点的位置
//第一个坐标表示交叉点 第二个坐标是两点确定一线
//确定两条直线(有交点)然后给半径就能确定一段弧线
//绘制圆弧
CGContextAddArcToPoint(context, 300, 200, 300, 400, 100)
绘制
//贝兹曲线(贝塞尔曲线)
//第一种 只有一个控制点 还有起始点和终点
//第一个坐标是控制点 第二个是终点 起始点是上图给的
CGContextAddQuadCurveToPoint(context, 350, 200, 400, 300)
//找一个新的起点重新画
CGContextMoveToPoint(context, 0, 600)
//第二种 有两个控制点 还有一个终点 起点已给出
CGContextAddCurveToPoint(context, 100, 500, 200, 300, 500, 600)
整体效果图