使用CAShaperLayer做一个高性能的画板

之前写过一篇文章通过CAShaperLayer把UIView做成镂空效果，如果大家没看过可以看一下，说不定那天也会遇到类似的情况。那么，这次小编给大家介绍一下通过CAShpaerLayer与UIBezierPath结合来做一个高性能的画板。

先看下效果

运行后的效果

思路分解

先不管删除、撤销、恢复这些功能，首先我们要实现一个画板，要想实现画画，那么我们要获取用户移动的所有点，这个好做func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?)这个方法就行了，然后把这些点连起来就成线了，这个使用UIBezierPath就行了，把路径绘制在CAShpaerLayer上就成一条线了，要想画多条，直接把CAShpaerLayer放进数组就行了。
在touchesBegan方法中添加起点，并且把CAShpaerLayer放进数组

   func initStartPath(startPoint: CGPoint) {
        let path = UIBezierPath()
        path.lineWidth = 2
        // 线条拐角
        path.lineCapStyle = .Round
        // 终点处理
        path.lineJoinStyle = .Round
        // 设置起点
        path.moveToPoint(startPoint)
        lastPath = path
        
        let shaperLayer = CAShapeLayer()
        shaperLayer.path = path.CGPath
        shaperLayer.fillColor = UIColor.clearColor().CGColor
        shaperLayer.lineCap = kCALineCapRound
        shaperLayer.lineJoin = kCALineJoinRound
        shaperLayer.strokeColor = UIColor.redColor().CGColor
        shaperLayer.lineWidth = path.lineWidth
        self.layer.addSublayer(shaperLayer)
        lastLayer = shaperLayer
        layers.append(shaperLayer)
    }
    
    // MARK: - response events
    override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let point = self.pointWithTouches(touches)
        if event?.allTouches()?.count == 1 {
            initStartPath(point)
        }
    }

用户移动的时候连接所有的点

    override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
        let point = self.pointWithTouches(touches)
        if event?.allTouches()?.count == 1 {
            // 终点
            lastPath.addLineToPoint(point)
            lastLayer.path = lastPath.CGPath
        }
    }

获取点

   // 获取点
    func pointWithTouches(touches: Set<UITouch>) -> CGPoint {
        let touch = (touches as NSSet).anyObject()
        return (touch?.locationInView(self))!
    }

以上，是基本功能，删除、撤销、恢复都好做，也就是数组删除、添加、更新UI，下面是这些代码：

    // 删除
    func remove() {
        if layers.count == 0 {
            return
        }
        for slayer in layers {
            slayer.removeFromSuperlayer()
        }
        layers.removeAll()
        cancelLayers.removeAll()
    }
    
    // 撤销
    func cancel() {
       
        if layers.count == 0 {
            return
        }
        layers.last?.removeFromSuperlayer()
        cancelLayers.append(layers.last!)
        layers.removeLast()
    }
    
    // 恢复
    func redo() {
        if cancelLayers.count == 0 {
            return
        }
        self.layer.addSublayer(cancelLayers.last!)
        layers.append(cancelLayers.last!)
        cancelLayers.removeLast()
    }

总结一下

之前我用过UIView的drawRect来做画板，但是内存升的很快；现在改用CAShapeLayer内存基本上在30左右，很节省性能，因为UIView的drawRect是用的CoreGraphics框架，走的是手机的CPU动画渲染，性能消耗大，而CAShapeLayer用的是CoreAnimation，走的是手机GPU动画渲染，节省性能。
在这里下载代码，欢迎大家给我Star。