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, withEvent event: UIEvent?)

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

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

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

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

添加线到当前路径
CGPath.CGPathAddLineToPoint(path: CGMutablePath?, _ m: UnsafePointer, _ 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)
    }

}