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)

}

完整的界面如下