Note 21 2D绘图

2D绘图

四层框架:

上层的可以用下层的,越下层功能越多,并且越简单

1. Cocoa touch Layer
2. Media Layer
3. Core Service Layer 服务层
4. Core OS layer 核心系统层

Core Animation

一.设置圆形的按键

CALayer 显示

        let btn = UIButton(type: .System)
        btn.frame = CGRect(x: 100, y: 100, width: 50, height: 50)
        self.view.addSubview(btn)
        btn.backgroundColor = UIColor.cyanColor()
        btn.layer.cornerRadius = 25//倒圆角,倒脚半径25
        
        btn.layer.borderColor = UIColor.blueColor().CGColor
        btn.layer.borderWidth = 1 //设置边框大小才会生效(默认边框长度为0)
        
        btn.layer.shadowColor = UIColor.blackColor().CGColor
        btn.layer.shadowOffset = CGSize(width: 1, height: 1)
        btn.layer.shadowOpacity = 0.7 //设置透明度 默认是0

二.UIView绘图

绘制的三种方法:

1. CGContextStrokePath(context)
2. CGContextFillPath(context)
3. CGContextDrawPath(context, mode: CGPathDrawingMode)

CGPathDrawingMode:

 public enum CGPathDrawingMode : Int32 {
    
    case Fill
    case EOFill
    case Stroke
    case FillStroke    非零环绕数
    case EOFillStroke  奇偶环绕数EO even-odd

}
//填充和绘制边框模式 

绘图前获取当前绘图环境(上下文)
let context = UIGraphicsGetCurrentContext()
绘图环境设置了,就一直会有效,可以用SaveGstate与RestoreGstate去保存与恢复

1.绘制线

绘图过程:
** MoveToPoint - AddlineToPoint - StrokePath **

        CGContextMoveToPoint(cxt, 0, 0)
        CGContextAddLineToPoint(cxt, 50, 50)
        CGContextAddLineToPoint(cxt, 0, 100)
        let cgp = CGPoint(x: 50, y: 0)
        CGContextAddLineToPoint(cxt,cgp.x, cgp.y)
        //设置了当前绘图环境的任何画图工具的东西,都一直会有效
        UIColor.cyanColor().setStroke()//设置线的颜色
        CGContextSetLineWidth(cxt, 5)//设置线的宽度
        CGContextSetLineCap(cxt, .Round)//设置线两段的头
        CGContextSetLineJoin(cxt, .Round)//设置连接处
        CGContextStrokePath(cxt)
        
        CGContextMoveToPoint(cxt, 90, 0)
        CGContextAddLineToPoint(cxt, 100, 100)
        CGContextSetLineDash(cxt, 0, [2,3], 2) //设置虚线, 1.偏移量, 2.虚线重复的像素, 3.数组里面的个数
        CGContextStrokePath(cxt)
        
        CGContextMoveToPoint(cxt, 50, 60)
        CGContextAddLineToPoint(cxt, 50,100)
        CGContextStrokePath(cxt)

2.绘制矩形

        //设置填充颜色
        UIColor.redColor().setFill()
        
        //绘制矩形
        CGContextAddRect(context, CGRect(x: 0, y: 0, width: 150, height: 50))
        CGContextDrawPath(context, .FillStroke)
        //填充方式-非零环绕数,奇偶环绕数(Even-odd)
        //CGContextStrokePath(context) 只绘制边框
        //CGContextFillPath(context) 只填充

3.绘制圆弧

        //绘制弧线
        //1.
        CGContextAddArc(context, 150, 150, 50, 0, CGFloat(M_PI/3), 0)
        
        //2.
        CGContextMoveToPoint(context, 150,200)
        CGContextAddArcToPoint(context, 200, 200, 300, 400, 150)
        
        CGContextStrokePath(context)//绘图

4.贝兹曲线(贝赛尔曲线)

        //贝兹曲线(贝赛尔曲线)
        let context = UIGraphicsGetCurrentContext()
        //二次方的需要三个点
        CGContextMoveToPoint(context, 100, 100)//第一个点
        CGContextAddQuadCurveToPoint(context, 150, 0, 300, 100)//设置第二第三个点
        //三次方的需要四个点
        //二次方的终点是第一个点
        CGContextAddCurveToPoint(context, 350, 50, 380, 80, 400, 100)//设置第二个点,第三个点,地四个点
        CGContextStrokePath(context)

5.绘制网格,利于观察图形

        let context = UIGraphicsGetCurrentContext()
        
        //绘制网格
        var y: CGFloat = 50
        while y < self.bounds.size.height {
            //2. 开始，设置绘制起点
            CGContextMoveToPoint(context, 0, y)
            //3. 往上下文上添加图形
            CGContextAddLineToPoint(context, self.bounds.size.width, y)
            y += 50
        }
        
        var x: CGFloat = 50
        while x < self.bounds.size.width {
            //2. 开始，设置绘制起点
            CGContextMoveToPoint(context, x, 0)
            //3. 往上下文上添加图形
            CGContextAddLineToPoint(context, x, self.bounds.size.height)
            
            x += 50
        }
        CGContextSaveGState(context)//保存绘图状态
        
        UIColor.cyanColor().setStroke()
        CGContextSetLineDash(context, 0, [2,2], 2)
        CGContextStrokePath(context)
        
        CGContextRestoreGState(context)//恢复保存时候的绘图状态

//Graph plot chart pie bar