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

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

先看下效果

使用CAShaperLayer做一个高性能的画板_第1张图片
运行后的效果

思路分解

先不管删除、撤销、恢复这些功能,首先我们要实现一个画板,要想实现画画,那么我们要获取用户移动的所有点,这个好做func touchesMoved(touches: Set, 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, withEvent event: UIEvent?) {
        let point = self.pointWithTouches(touches)
        if event?.allTouches()?.count == 1 {
            initStartPath(point)
        }
    }

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

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

获取点

   // 获取点
    func pointWithTouches(touches: Set) -> 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()
    }

总结一下

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

你可能感兴趣的:(使用CAShaperLayer做一个高性能的画板)