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)



    }

完整的界面如下