4.Swift 自定义View

4.Swift 自定义View

绘制线条

import UIKit，在UIKit中有一个UIGraphics.h，这个类中存在func UIGraphicsGetCurrentContext() -> CGContext方法为我们提供CGContext的实例

设置点的位置
CGContext.CGContextMoveToPoint(c: CGContext?, _ x: CGFloat, _ y: CGFloat)

添加一条直线
CGContext.CGContextAddLineToPoint(c: CGContext?, _ x: CGFloat, _ y: CGFloat)

通过RGB设置边的颜色
CGContext.CGContextSetRGBStrokeColor(c: CGContext?, _ red: CGFloat, _ green: CGFloat, _ blue: CGFloat, _ alpha: CGFloat)

设置线宽度
CGContext.CGContextSetLineWidth(c: CGContext?, _ width: CGFloat)

绘制边的路径
CGContext.CGContextStrokePath(c: CGContext?)

class DrawLinesView: UIView { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder)! } // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func drawRect(rect: CGRect) { // 获得CGContext，相当于画笔的角色 let paint:CGContext = UIGraphicsGetCurrentContext()! // 设置点的位置 CGContextMoveToPoint(paint, 200, 200) // 添加一条直线段从当前的点，指向到(x,y) CGContextAddLineToPoint(paint, 300, 200) CGContextMoveToPoint(paint, 250, 150) CGContextAddLineToPoint(paint, 250, 250) CGContextMoveToPoint(paint, 200, 150) CGContextAddLineToPoint(paint, 300, 150) CGContextMoveToPoint(paint, 200, 250) CGContextAddLineToPoint(paint, 300, 250) CGContextMoveToPoint(paint, 200, 250) CGContextAddLineToPoint(paint, 300, 250) CGContextMoveToPoint(paint, 280, 235) CGContextAddLineToPoint(paint, 295, 245) // 设置边的颜色 CGContextSetRGBStrokeColor(paint, 0.7, 0.2, 0.5, 0.6) // 设置线条宽度 CGContextSetLineWidth(paint, 3) // 开始绘制边的路径 CGContextStrokePath(paint) } }

绘制矩形

添加矩形
CGContext.CGContextAddRect(c: CGContext?, _ rect: CGRect)

通过RGB设置填充颜色
CGContext.CGContextSetRGBFillColor(c: CGContext?, _ red: CGFloat, _ green: CGFloat, _ blue: CGFloat, _ alpha: CGFloat)

开始绘制填充的路径
CGContext.CGContextFillPath(c: CGContext?)

设置线条宽度
CGContext.CGContextSetLineWidth(c: CGContext?, _ width: CGFloat)

设置边的颜色
CGContext.CGContextSetRGBStrokeColor(c: CGContext?, _ red: CGFloat, _ green: CGFloat, _ blue: CGFloat, _ alpha: CGFloat)

开始绘制矩形的边
CGContext.CGContextStrokeRect(c: CGContext?, _ rect: CGRect)

class DrawRectView: UIView { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder)! } // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func drawRect(rect: CGRect) { // Drawing code let paint:CGContext = UIGraphicsGetCurrentContext()! // 添加矩形 CGContextAddRect(paint, CGRect(x: 100, y: 100, width: 100, height: 100)) // 设置填充颜色 CGContextSetRGBFillColor(paint, 1, 0, 0, 1) // 开始绘制填充的路径 CGContextFillPath(paint) // 设置线条宽度 CGContextSetLineWidth(paint, 5) // 设置边的颜色 CGContextSetRGBStrokeColor(paint, 0, 0, 1, 1) // 开始绘制矩形的边 CGContextStrokeRect(paint, CGRect(x: 100, y: 100, width: 100, height: 100)) } }

绘制圆形

添加弧形
CGContextAddArc(c: CGContext?, _ x: CGFloat, _ y: CGFloat, _ radius: CGFloat, _ startAngle: CGFloat, _ endAngle: CGFloat, _ clockwise: Int32)

通过RGB设置填充颜色
CGContextSetRGBFillColor(c: CGContext?, _ red: CGFloat, _ green: CGFloat, _ blue: CGFloat, _ alpha: CGFloat)

开始绘制填充的路径
CGContextFillPath(c: CGContext?)

设置线的宽度
CGContextSetLineWidth(c: CGContext?, _ width: CGFloat)

开始绘制边的路径
CGContextStrokePath(c: CGContext?)

添加椭圆
CGContextAddEllipseInRect(c: CGContext?, _ rect: CGRect)

开始绘制边的路径
CGContextStrokePath(c: CGContext?)

class DrawCircleView: UIView { required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder)! } // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func drawRect(rect: CGRect) { // Drawing code let context:CGContext = UIGraphicsGetCurrentContext()! // 添加弧形，开始角度是0，结束角度是2*π，即圆 CGContextAddArc(context, 150, 200, 100, 0, 3.141592657*2, 0) // 设置填充颜色 CGContextSetRGBFillColor(context, 0, 0, 1, 1) // 开始绘制填充的路径 CGContextFillPath(context) // 添加弧形，开始角度是0，结束角度是2*π，即圆 CGContextAddArc(context, 150, 200, 100, 0, 3.141592657*2, 0) // 设置线的宽度 CGContextSetLineWidth(context, 10) // 开始绘制边的路径 CGContextStrokePath(context) // 添加椭圆 CGContextAddEllipseInRect(context, CGRect(x: 50, y: 500, width: 200, height: 100)) // 开始绘制边的路径 CGContextStrokePath(context) } }

绘制图像

保存CGContext的状态
CGContext.CGContextSaveGState(c: CGContext?)

转变为当前图形状态的变换矩形
CGContext.CGContextTranslateCTM(c: CGContext?, _ tx: CGFloat, _ ty: CGFloat)

坐标空间转换
CGContext.CGContextScaleCTM(c: CGContext?, _ sx: CGFloat, _ sy: CGFloat)

绘制图像
CGContext.CGContextDrawImage(c: CGContext?, _ rect: CGRect, _ image: CGImage?)

恢复当前图形状态
CGContext.CGContextRestoreGState(c: CGContext?)

class DrawImageView: UIView {

    var uiImage:CGImageRef?

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)!
        self.uiImage = UIImage(named:"mz_6.jpg")?.CGImage
    }

    // Only override drawRect: if you perform custom drawing.
    // An empty implementation adversely affects performance during animation.
    override func drawRect(rect: CGRect) {
        // Drawing code
        let context:CGContext = UIGraphicsGetCurrentContext()!
        // 保存CGContext的状态
        CGContextSaveGState(context)
        // 转变为当前图形状态的变换矩形
        CGContextTranslateCTM(context, 10,400)
        // 坐标空间转换
        CGContextScaleCTM(context, 1, -1)
        // 绘制图像
        CGContextDrawImage(context, CGRect(x: 0, y: 0, width: 200, height: 200), self.uiImage)

        // 从上一个图形堆栈中恢复当前图形状态，在这个过程里，弹出这个图形状态的堆栈
        // 简单开说，开始绘图了
        CGContextRestoreGState(context)

    }

}

写字板

触摸事件回调，触摸开始
UIResponder.touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?)

触摸事件回调，触摸移动
UIResponder.touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?)

获得AnyObject对象
NSSet.anyObject() -> AnyObject?

获得当前坐标的CGPoint
UITouch.locationInView(view: UIView?)

创建一个的可变路径
CGPath.CGPathCreateMutable() -> CGMutablePath

添加线到当前路径
CGPath.CGPathAddLineToPoint(path: CGMutablePath?, _ m: UnsafePointer<CGAffineTransform>, _ x: CGFloat, _ y: CGFloat)

异步执行,setNeedsDisplay会调用自动调用drawRect方法
UIView.setNeedsDisplay()

把一个路径添加到graphics context中
CGContext.CGContextAddPath(c: CGContext?, _ path: CGPath?)

class DrawBoardView: UIView { // 创建一个的可变路径 var path = CGPathCreateMutable() required init(coder aDecoder: NSCoder) { super.init(coder: aDecoder)! } // touch事件，开始 override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) { // 取得当前点的坐标 let p:CGPoint = (touches as NSSet).anyObject()!.locationInView(self) // 设置点的位置 CGPathMoveToPoint(self.path, nil, p.x, p.y) } // touch事件，移动 override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) { // 取得当前点的坐标 let p:CGPoint = (touches as NSSet).anyObject()!.locationInView(self) // 添加线到当前路径 CGPathAddLineToPoint(self.path, nil, p.x, p.y) // 异步执行,setNeedsDisplay会调用自动调用drawRect方法 setNeedsDisplay() } // Only override drawRect: if you perform custom drawing. // An empty implementation adversely affects performance during animation. override func drawRect(rect: CGRect) { // Drawing code let context:CGContext = UIGraphicsGetCurrentContext()! // 把一个路径添加到graphics context中 CGContextAddPath(context, self.path) CGContextSetLineWidth(context, 2.0) CGContextStrokePath(context) } }