IOS UI画线

首先先删除故事板里面默认的 viewcontroller文件，添加一个Navigation controller文件

插入一个Table View Cell
在拖入一个viewcontroller
按住control点击刚插入的Table View Cell 拖入viewcontroller选择push

新建UIView类文件
然后在故事版中选择刚才拖入的viewcontroller属性 选择这个类

在类中先写

required init(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)    }

画线代码

override func drawRect(rect: CGRect) {        // Drawing code        var context = UIGraphicsGetCurrentContext()        CGContextMoveToPoint(context, 100, 100)        CGContextAddLineToPoint(context, 150, 100)        CGContextMoveToPoint(context, 200, 100)        CGContextAddLineToPoint(context, 200, 200)        CGContextSetRGBStrokeColor(context, 1, 0, 1, 1) //颜色        CGContextSetLineWidth(context, 5)  //宽度        CGContextStrokePath(context)    }

如图

添加矩形

添加viewcontroller和类文件和上面一样

绑定类后

在文件中同样要先写一下

    required init(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)    }

之后在drawRect函数中写

override func drawRect(rect: CGRect) {        var context = UIGraphicsGetCurrentContext()        CGContextAddRect(context, CGRect(x: 100, y: 100, width: 100, height: 100))//添加一个矩形        CGContextSetRGBFillColor(context, 1, 0, 0, 1)//颜色        CGContextFillPath(context)//填充        CGContextSetLineWidth(context, 5)//线条宽度        CGContextSetRGBStrokeColor(context, 1, 1, 0, 1)//填充颜色        CGContextStrokeRect(context, CGRect(x: 100, y: 100, width: 100, height: 100))        // Drawing code    }

绘制园
创建类之前步奏同上，绘制园有两种方法，一种是通过画弧完成，另一种是通过绘制一个矩形，与这个矩形外切的园即所得。

    override func drawRect(rect: CGRect) {        // Drawing code        //第一种绘制方法        //==================================================        var context = UIGraphicsGetCurrentContext()//        CGContextAddArc(context, 100, 100, 50, 0, 3.14, 0)        CGContextAddArc(context, 200, 200, 100, 0, 3.14*2, 0)  //画一条弧 x,y,半径，起始角度，终止角度，顺时针0逆时针1        CGContextSetLineWidth(context, 10)   //线条宽度        CGContextStrokePath(context)        //=============填充颜色        CGContextAddArc(context, 200, 200, 100, 0, 6.28, 0)        CGContextSetRGBFillColor(context, 1, 1, 0, 1)        CGContextFillPath(context)        //第二种绘制方法        //==================================================        //椭圆形绘制方法 CGRect中放正方形就是圆形，矩形就是椭圆形        CGContextAddEllipseInRect(context, CGRect(x: 50, y: 350, width: 200, height: 100))        CGContextStrokePath(context)        CGContextAddEllipseInRect(context, CGRect(x: 200, y: 500, width: 100, height: 100))        CGContextStrokePath(context)    }}

绘制一张图片
同样要添加类，同以上步奏

接着在Images.xcassets 里面放一张图片，这里这张图片的名字为“2”

在类文件中添加

    required init(coder aDecoder: NSCoder) {        super.init(coder: aDecoder)        UiImage = UIImage(named: "2")!.CGImage    }    var UiImage:CGImageRef?

此时初始化比之前多了一行。

在调整的时候需要进行存储与释放，否则会影响到后面要绘制的元素。取消注释可以看到差别。

    override func drawRect(rect: CGRect) {        // Drawing code        var context = UIGraphicsGetCurrentContext()        //=====================        CGContextSaveGState(context)        //状态的存储        CGContextTranslateCTM(context, 10, 400)     //状态的调整        CGContextScaleCTM(context, 1, -1)           //缩放        CGContextDrawImage(context, CGRect(x: 50, y: -100, width: 200, height: 350),UiImage )        CGContextRestoreGState(context)         //状态恢复        //存储与恢复是为了保证不会因为对context的调整影响到后面的绘制某一个元素的时候影响其他元素，只要有调整，在调整前要保存，调整后释放        //=======================//        CGContextStrokeRect(context, CGRect(x: 100, y: 100, width: 100, height: 100))    }

最后是绘制画板

同样添加类与初始化之前都一样

在类中定义路径

    var path = CGPathCreateMutable()    override func touchesBegan(touches: Set<NSObject>, withEvent event: UIEvent) {        var p = (touches as NSSet).anyObject()?.locationInView(self)        CGPathMoveToPoint(path, nil, p!.x, p!.y)    }//触摸开始    override func touchesMoved(touches: Set<NSObject>, withEvent event: UIEvent) {        var p = (touches as NSSet).anyObject()?.locationInView(self)        CGPathAddLineToPoint(path, nil, p!.x, p!.y)        setNeedsDisplay()    }//触摸移动

drawRect代码如下

override func drawRect(rect: CGRect) {//        var context = UIGraphicsGetCurrentContext()//        //        var path = CGPathCreateMutable()    //创建存储路径//        CGPathMoveToPoint(path, nil, 200, 200)//起始点//        CGPathAddLineToPoint(path, nil, 100, 100)//移动点//        //        CGContextAddPath(context, path)//        CGContextStrokePath(context)        // Drawing code        var context = UIGraphicsGetCurrentContext()        CGContextAddPath(context, path)        CGContextStrokePath(context)    }

完整的界面如下