DrawTutorial

自定义了一个类 继承了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) 弹栈

矩形.png

        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)

整体效果图

圆弧 圆弧 贝兹曲线第一种 贝兹曲线第二种.png