手把手教你通过Quartz2D制作彩色涂鸦板和手势解锁

我们已经学习完了Quartz2D的一些基本的用法，在实际开发过程中，经常使用Quartz2D，可以帮助我们少使用苹果自带的控件，直接画图到上下文，对系统的性能是一个非常好的优化方式。Quartz2D的功能强大，绝逼不是画线，绘制图片那么easy，今天讲一下他在实际项目中的应用，顺便将思路理清楚，方便大家看涂鸦板demo，还有手势解锁

---

文章中的几个demo

• 1.使用图形上下文制作涂鸦板
• 2.使用贝塞尔路径制作涂鸦板
• 3.手势解锁

---

下面详细的介绍一下项目的思路

一.使用图形上下文制作涂鸦板

效果图 点击保存，在相册中的图片

分析
1.涂鸦板实际上就是绘制很多的线条
2.保存线条，使用可变数组
3.使用上下文绘制图片，使用drawRect方法
4.和屏幕交互，应该使用touchesBegin方法

代码分析

1.自定义一个DBPainterView
2.在view中生成一个可变数组作为变量，懒加载处理，可以供程序使用

    //MARK: - 懒加载属性
    //用于盛放所有单个路径的数组
    private lazy var pointArr:NSMutableArray = {
        return NSMutableArray()
    }()

3.实现touchesBegin，touchesMoved,touchesEnd方法

    //MARK： - 重写touch三个方法
    //touchBegin
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let touch = touches.first
        let startPoint = touch?.locationInView(touch?.view)
        let linePathArr = NSMutableArray()
        
        linePathArr.addObject(NSValue.init(CGPoint: startPoint!))
        pointArr.addObject(linePathArr)
        
        setNeedsDisplay()
    }
    
    //touchMoved
    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let touch = touches.first
        let startPoint = touch?.locationInView(touch?.view)
        let lastLineArr = pointArr.lastObject
        lastLineArr!.addObject(NSValue.init(CGPoint: startPoint!))
        setNeedsDisplay()
    }
    
    //touchEnd
    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let touch = touches.first
        let startPoint = touch?.locationInView(touch?.view)
        let lastLineArr = pointArr.lastObject
        lastLineArr!.addObject(NSValue.init(CGPoint: startPoint!))
        setNeedsDisplay()
    }

代码分析，
3.1.touchesBegin就是开始绘制，现在没有拿到路径的具体的点，所以我们应该给每一个路劲用一个小数组保存所有点的数组** linePathArr（保存每一根line的数组），每一次调用都应该是创建一个新的路径（新的linePathArr），然后加到保存所有路径的数组中（ pointArr保存了所有line的数组），然后调用setNeedsDisplay方法，绘制路径
3.2.touchesMoved方法是手指在屏幕移动的时候调用的，频率最高，就是一直在添加point，说白了，就是给最新添加的那个路径添加点，所以应当找到数组中最后一个路径，然后给这个路径添加point，let lastLineArr = pointArr.lastObject,lastLineArr!.addObject(NSValue.init(CGPoint: startPoint!))
3.3.touchEnd方法和2**的事情是一样的，所以可以提炼一下代码，我就不写了

4.绘制图片 drawRect

    override func drawRect(rect: CGRect) {
        let ctx = UIGraphicsGetCurrentContext()
        for index in 0 ..< pointArr.count
        {
            //获取单根线
            let linePathArr = pointArr.objectAtIndex(index)
              for j in 0 ..< linePathArr.count
              {
                let point = linePathArr.objectAtIndex(j).CGPointValue()
                if j == 0 {
                    CGContextMoveToPoint(ctx, point.x, point.y)
                }else
                {
                    CGContextAddLineToPoint(ctx, point.x, point.y)
                }
            }
         }
        //设置上下文的属性
        CGContextSetLineWidth(ctx, 3)
        UIColor.redColor().set()
        CGContextSetLineCap(ctx, CGLineCap.Round)
        //渲染
        CGContextStrokePath(ctx)
    }

}

4.1 首先遍历大数组A，获取每一条线（所有点）的数组B，遍历B中所有的点，但是B中的第一个b[0]应该是调用CGContextMoveToPoint,b[其他]应当调用CGContextAddLineToPoint方法，
4.2.可以设置一下图形上下文的属性，最后渲染就好了.
4.3 可以设置好多种颜色，使用图形上下文栈就可以实现

5.DBPainterView 对外实现的“上一步”,"清空"，“保存”功能

//删除
    func clear(){
       pointArr.removeAllObjects()
        setNeedsDisplay()
    }
    //上一步
    func preview()
    {
        pointArr.removeLastObject()
        setNeedsDisplay()
    }
    //保存到本地
    func saveToAbum() {
        //保存图片的事件
        UIGraphicsBeginImageContextWithOptions(self.frame.size, false, 0.0)
        let ctx = UIGraphicsGetCurrentContext()
       self.layer.renderInContext(ctx!)
        //获取图片
        let image = UIGraphicsGetImageFromCurrentImageContext()
        //结束位图上下文
        UIGraphicsEndImageContext()
        UIImageWriteToSavedPhotosAlbum(image, nil, nil, nil)
    }

代码太简单，就不解释了哈

二.使用贝塞尔路径制作涂鸦板

彩色画板

刚才使用了图形上下文绘制路径，感觉还行，但是可以简化，刚才说的将一个路径的所有点放到路径的数组中，然后根据点来绘制，可以理解，但是会很麻烦，因为底层就是通过CGContextPathRef绘制路径的，因为CGContextPathRef是C语言，大数组不能添加它，所以我们放弃，然后选择贝塞尔路径,他是oc中对象，非常适合制作涂鸦板

     //绘制一条路径的写法，非常的简单
        let path = UIBezierPath()
        path.moveToPoint(CGPoint.init(x: 9, y: 9))
        path.addLineToPoint(CGPoint.init(x: 40, y: 50))
        path.stroke()

使用贝塞尔路径制作涂鸦板的步骤（和图形上下文基本一致）

• 1.懒加载一个用来橙装所有路径的数组pathArr
• 2.touchesBegin的时候，生成一个路径，调用moveToPoint方法，添加起点，将path保存到数组中
• 3.更改线宽和更改线的颜色，要个自定义的view设置lineWidth，和lineColor这个属性，最后要去给path设置这两个属性

 override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let touch = touches.first
        let startPoint = touch?.locationInView(touch?.view)
        //1.创建路径
        let path = UIBezierPath()
       //2.设置起点
        path.moveToPoint(startPoint!)
        //3.将path，添加到pathArr上
        pathArr.addObject(path)
        //4.绘图
        setNeedsDisplay()
    }

• 3.touchesMoved和touchesEnd方法功能一致，就合二为一了，就是获取大数组中最后一个路径，然后调用addLineToPoint方法

    //touchMoved
    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
        addPointToPath(touches)
    }
    
    //touchEnd
    override func touchesEnded(touches: Set<UITouch>, withEvent event: UIEvent?) {
        addPointToPath(touches)
    }
    
    //touchMoved和touchEnd统一的代码
    private func addPointToPath(touches: Set<UITouch>){
        let touch = touches.first
        let movePoint = touch?.locationInView(touch?.view)
        //获取最后一个path
        let path = pathArr.lastObject as! UIBezierPath;
        path.addLineToPoint(movePoint!)
        setNeedsDisplay()
    }
    

4.绘制路径

    override func drawRect(rect: CGRect) {
     //绘制线条
        for index in 0 ..< pathArr.count
        {
            let path = pathArr[index] as! UIBezierPath
             path.stroke()
        }
    }

5.添加线宽和线颜色的属性

  //设置一个变量，用来存储线宽
    var lineWidth:CGFloat = 2;
    //设置一个变脸，用来存储线颜色
    var lineColor:UIColor = UIColor.blackColor();

5.1 我们要将颜色和宽的的属性使用到以后的线上，不能影响到过去的，所以，应该在生成一个path的时候，直接设置他的这两个属性，因为path中没有lineColor这个属性，所以自定义一个DBBezierPath

class DBBezierPath: UIBezierPath {
    var lineColor:UIColor?
}

5.2 重新修改一下touchesBegin方法

//touchBegin
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let touch = touches.first
        let startPoint = touch?.locationInView(touch?.view)
        //1.创建路径
        let path = DBBezierPath()
        path.lineWidth = lineWidth
        //2.设置线条的颜色
        path.lineColor = lineColor
       //2.设置起点
        path.moveToPoint(startPoint!)
        //3.将path，添加到pathArr上
        pathArr.addObject(path)
        //4.绘图
        setNeedsDisplay()
    }

5.3 在渲染的时候，我们要将自定义的lineColor取出来，渲染

  override func drawRect(rect: CGRect) {
     //绘制线条
        for index in 0 ..< pathArr.count
        {
            let path = pathArr[index] as! DBBezierPath
             path.lineColor!.set()
             path.stroke()
        }
    }

5.4 这样就可以制作出彩色的画板了，而且其他保存，上一步等功能都可以正常使用

使用了贝塞尔路径，远离了两个数组，运行和理解起来超级简单？

---

三.手势解锁

要做这样的手势解锁控件

思路和注意点

• 1.创建基本的九宫格样式UI
• 2.抽取方法类和自定义一个button（注意btn.userInteractionEnabled = false）
• 3.提出工具方法
  3.1 获取当前的触摸点
  3.2 判断当前点是不是在btn中
• 4.保存选中的所有按钮
• 5.通过选中的按钮连线
  5.1 防止数组中多次添加同一个button
• 6.使用touchesEnd方法清空数组
  6.1 给drawRect方法添加判空的条件
  6.2 重新绘制状态
  6.3 使用makeObjectsSelect方法让所有的button的选中状态为NO
• 7.绘制最后一个按钮和手指移动的地点的连线
  7.1 在touchesMoved方法中保存手指的所在的point
  7.2 在drawRect方法中链接最后一个按钮和point
  7.3 设置bezierPath的基本属性
  7.4 解决刚刚点击第一个按钮，但是连线到CGPointZore的bug（在TouchBegin中清空，在drawRect判断）
• 8.减小触摸button的响应范围
• 9.拼接用户的触摸路径
• 10.添加代理方法，让外界知道用户的触摸路径（给代理添加IBOut）
• 11.修改连线的具体颜色

代码讲解分析

1.创建基本的九宫格样式UI

基本目标

• 1.1 自定义一个GULockView，然后使用经典九宫格算法实现

 //设置初始化函数,创建9个按钮
    required init?(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)
        setUpBsicUI()
    }
    
    //初始化函数
    private func setUpBsicUI()
    {
        //创建九个按钮
        for index in 0 ..< 9
        {
            let btn = GUButton.init(type: UIButtonType.Custom);
            addSubview(btn)
            btn.tag = index
            btn.addTarget(self, action: "btnClick:", forControlEvents: UIControlEvents.TouchUpInside)
        }
    }

• 1.2 布局UI

    //设置九个按钮的位置
    override func layoutSubviews() {
        super.layoutSubviews()
        //经典的九宫格算法
        let totalColume = 3
        let bWidth:CGFloat = 74
        let bHeight:CGFloat = bWidth
        let margin = (self.frame.width - bWidth * CGFloat(totalColume))/CGFloat(totalColume+1)
        //自己的高度是bHeight*3
        
        for index in 0 ..< self.subviews.count
        {
        let currentRow = index/totalColume
        let currentColumn = index%totalColume
        let bX = margin + (CGFloat(currentColumn) * (bWidth+margin))
        let bY = CGFloat(currentRow) * (bHeight+margin)
        let btn = self.subviews[index]
        btn.frame = CGRectMake(bX, bY, bWidth, bHeight)
        
        }
    }

2.抽取方法类和自定义一个button

• 2.1 自定义一个GUButton,设置内部的图片等样式，

        setImage(UIImage.init(named: "gesture_node_normal"), forState: UIControlState.Normal)
        setImage(UIImage.init(named: "gesture_node_highlighted"), forState: UIControlState.Selected)
        setImage(UIImage.init(named: "gesture_node_disable"), forState: UIControlState.Disabled)
        contentMode = UIViewContentMode.Center
        userInteractionEnabled = false

• 2.2btn.userInteractionEnabled = false 一定要写

userInteractionEnabled = false userInteractionEnabled = ture

这个涉及到了时间传递，我们马上要去实现触摸的三个方法，如果手势路过btn，恰巧userInteractionEnabled = ture，那么手势直接让btn截获，那么GULockView获取不到手势，造成了问题，所以一定要设置为no，（如果就是不想设置为no，其实也可以在自定义的CGButton中实现touches三个方法，调用super.touches三个方法往上传递，不推荐）

3.提出工具方法，设置btn被选中的条件

3.1 获取当前的触摸点

    /**
     获取是否当前触摸点的坐标
     :returns: 所在的点的坐标
     */
    private func pointWithTouches(touches: Set<UITouch>) -> CGPoint?
    {
        let touch = touches.first
        let locPoint = touch?.locationInView(touch?.view)
        return locPoint
    }

3.2 判断当前点是不是在btn中

    /**
     判断是否选中的点的依据
     :param: point 当前点
     :returns: 所在的按钮，可能没有
     */
    private func buttonWithPoint(point:CGPoint) -> UIButton?
    {
        //遍历数组，看看是不是在9个按钮的里面
        for index in 0 ..< self.subviews.count
        {
            let b = self.subviews[index] as! UIButton
           let isIn = CGRectContainsPoint(b.frame, point)
            if isIn {
                return b
            }
        }
        return nil
    }

3.2 设置btn被选中的状态

   //touchesMoved 和 touchesBegin此刻的内容都是这个
    override func touchesMoved(touches: Set<UITouch>,
                               withEvent event: UIEvent?) {
        let point = pointWithTouches(touches)
        let locBtn = buttonWithPoint(point!)
        if (locBtn != nil)  {
            locBtn?.selected = true
        }

        setNeedsDisplay()
    }

4.保存选中的所有按钮

可以通过一个数组来保存所有的按钮

    //MARK: - 懒加载数组
    private lazy var btns:NSMutableArray = NSMutableArray()

在touchesBegan和touchesMoved方法中添加所选择的按钮

   if (locBtn != nil) {
            locBtn?.selected = true
            //添加到数组中
           btns.addObject(locBtn!)
        }

5.通过选中的按钮连线

5.1 防止数组中多次添加同一个button

出现了问题，数组中添加了重复的btn

解决方法

//在判断的时候，添加一个条件，是否selected == false 
  if (locBtn != nil && locBtn?.selected == false) {
            locBtn?.selected = true
            //添加到数组中
           btns.addObject(locBtn!)
        }

6.使用touchesEnd方法清空数组

   //手势释放时，要做的事情
   //1.应当清空数组，
   //2.应当将所选中的按钮全部设置为selected == false 
   //3.重新绘制
   
           //遍历所有的数组，是他的select == false
        for index in 0 ..< btns.count
        {
           let btn = btns[index] as! UIButton
            btn.selected = false
        }
        btns.removeAllObjects()
        setNeedsDisplay()

6.1 给drawRect方法添加判空的条件

//算是优化吧，已经入drawRect方法，首先去判断一下是不是空的
        if btns.count == 0 {
            return
        }

6.2 重新绘制状态

    override func drawRect(rect: CGRect) {
        
        if btns.count == 0 {
            return
        }
        //使用UIBezierPath绘制路径
        let bezierPath = UIBezierPath()
       for index in 0 ..< btns.count
       {
                //获取每一个点
                let btn = btns[index]
                if index == 0 {
                    bezierPath.moveToPoint(btn.center)
                }else{
                   bezierPath.addLineToPoint(btn.center)
                }
        }
        bezierPath.lineWidth = 10
        bezierPath.lineJoinStyle = CGLineJoin.Round
        UIColor.blueColor().set()
        bezierPath.stroke()
    }

7.绘制最后一个按钮和手指移动的地点的连线

7.1 在touchesMoved方法中保存手指的所在的point

        /// 当前触摸点,默认是零
    private var currentPoint:CGPoint = CGPointZero

7.2 在drawRect方法中链接最后一个按钮和point

//drawRect方法中，可以这样实现
          bezierPath.addLineToPoint(currentPoint)

7.3 设置bezierPath的基本属性

        bezierPath.lineWidth = 10
        bezierPath.lineJoinStyle = CGLineJoin.Round
        UIColor.blueColor().set()

currentPoint一直没有清空，所以touchesBegin的时候，链接点都是过去的那个，只要清空就好

7.4 解决刚刚点击第一个按钮，但是连线到CGPointZore的bug（在TouchBegin中清空，在drawRect判断）

//添加最后一个线的和最后一个
        if (CGPointEqualToPoint(CGPointZero,currentPoint) == false) {
            bezierPath.addLineToPoint(currentPoint)
        }

8.减小触摸button的响应范围

现在的项目，你的鼠标刚刚到一个btn的边缘，就已经链接了线，这样的体验不好，我们想去设定当手势到了btn的圆心才连线（减小链接线的响应范围）

    /**
     判断是否选中的点的依据
     :param: point 当前点
     :returns: 所在的按钮，可能没有
     */
    private func buttonWithPoint(point:CGPoint) -> UIButton?
    {
        //遍历数组，看看是不是在9个按钮的里面
        for index in 0 ..< self.subviews.count
        {
            let b = self.subviews[index] as! UIButton
            let wh:CGFloat = 24
            let frameX = b.center.x - wh * 0.5
            let frameY = b.center.y - wh * 0.5
            
            let isIn = CGRectContainsPoint(CGRectMake(frameX, frameY, wh, wh), point)
//            let isIn = CGRectContainsPoint(b.frame, point)
            if isIn {
                return b
            }
        }
        return nil
    }

9.拼接用户的触摸路径

    //拼接字符串，保存用户的触摸路径
    private func appendCode()
    {
        
        let code = NSMutableString()
        for var btn in btns {
            code.appendString("\(btn.tag)")
        }
        print(code)
    }

10.添加代理方法，让外界知道用户的触摸路径（给代理添加IBOut）

protocol GULockViewDelegate: NSObjectProtocol{
  //获取用户的手势密码
  func lockViewWithUserCode(lockView:GULockView,code:String)
}

添加属性

    //代理
    weak var  delegate:GULockViewDelegate?

11.修改连线的具体颜色

你随意吧~