Swift 绘图板功能完善以及终极优化

原创 2015年04月30日 23:45:13

转载请注明出处:http://blog.csdn.net/zhangao0086/article/details/45289475


前文总结

接着这篇:Swift 全功能的绘图板开发,虽然在上一篇中我们已经完成了这些功能:

  • 支持铅笔绘图(画点)
  • 支持画直线
  • 支持一些简单的图形(矩形、圆形等)
  • 做一个真正的橡皮擦
  • 能设置画笔的粗细
  • 能设置画笔的颜色
  • 能设置背景色或者背景图

但是还有一个非常重要的功能没有实现,没错,那就是 Undo/Redo!我之所以把这个功能单独放出来是有原因的,一是因为上一篇已经篇幅太长,不适合继续往上加内容;二是因为为了实现 Undo/Redo 功能,我们需要对 DrawingBoard 进行一些重构,在这篇文章中,你能看到用另一种方式实现的绘图板。

实现的效果:
这里写图片描述


更新 ViewController

先添加两张按钮图:
这里写图片描述 这里写图片描述
黑底、50%的透明度,箭头用白色。
(PS:这可是我自己做的,别嫌弃这里写图片描述
图片放到 Images.xcasserts 里:
这里写图片描述
(再次PS:图嫌小的话,就放在2x上)
然后在 Storyboard 里添加两个 Button:
这里写图片描述
注意里面的红框,Button 与 Board 平级,并且在 Board 的上方。
Button 的约束如下:

  1. 分别为左、右的 Button 设置 Undo、Redo 的 Image
  2. 左边的 Undo 按钮离左 10px,顶部距离父视图 74px
  3. 右边的 Redo 按钮离右 10px,顶部与 Undo 相同
  4. 不要设置宽、高约束,应与 Image 一致

两个按钮的点击事件连接到 VC 里:

@IBAction func undo(sender: UIButton) {
    self.board.undo()
}

@IBAction func redo(sneder: UIButton) {
    self.board.redo()
}

(此时的 Board 还没有 undo/redo 方法,你可以自行添加或者稍后再添加)
两个按钮本身也连接到 VC 里:

@IBOutlet var undoButton: UIButton!
@IBOutlet var redoButton: UIButton!

更新我们原viewDidLoad中的动画方法,使两个 Button 也适时的隐藏及显示:

...
self.board.drawingStateChangedBlock = {(state: DrawingState) -> () in
    if state != .Moved {
        UIView.beginAnimations(nil, context: nil)
        if state == .Began {
            self.topViewConstraintY.constant = -self.topView.frame.size.height
            self.toolbarConstraintBottom.constant = -self.toolbar.frame.size.height

            self.topView.layoutIfNeeded()
            self.toolbar.layoutIfNeeded()

            self.undoButton.alpha = 0  // 新增
            self.redoButton.alpha = 0  // 新增
        } else if state == .Ended {
            UIView.setAnimationDelay(1.0)
            self.topViewConstraintY.constant = 0
            self.toolbarConstraintBottom.constant = 0

            self.topView.layoutIfNeeded()
            self.toolbar.layoutIfNeeded()

            self.undoButton.alpha = 1  // 新增
            self.redoButton.alpha = 1  // 新增
        }
        UIView.commitAnimations()
    }
}
...

更新 Board

Undo/Redo 真正的逻辑都在Board 里面,我打算用图片栈保存 DrawingBoard 的每一张图,当 Undo/Redo 的时候直接把前一个状态取出并显示,为了分别存储 Undo/Redo 操作所用的图片,我们要建立两个图片栈:

private var undoImages = [UIImage]()
private var redoImages = [UIImage]()

然后加两个工具方法:canUndocanRedo

var canUndo: Bool {
    get {
        return self.undoImages.count > 0 || self.image != nil
    }
}

var canRedo: Bool {
    get {
        return self.redoImages.count > 0
    }
}

然后是 undo/redo 这两个主要方法:

func undo() {
    if self.canUndo == false {
        return
    }

    if self.undoImages.count > 0 {
        self.redoImages.append(self.image!)

        let lastImage = self.undoImages.removeLast()
        self.image = lastImage

    } else if self.image != nil {
        self.redoImages.append(self.image!)
        self.image = nil
    }

    self.realImage = self.image
}

func redo() {
    if self.canRedo == false {
        return
    }

    if self.redoImages.count > 0 {
        if self.image != nil {
            self.undoImages.append(self.image!)
        }

        let lastImage = self.redoImages.removeLast()
        self.image = lastImage

        self.realImage = self.image
    }
}

然后在每次画新图的时候保存下当前状态:

private func drawingImage() {
    if let brush = self.brush {
        // hook
        if let drawingStateChangedBlock = self.drawingStateChangedBlock {
            drawingStateChangedBlock(state: self.drawingState)
        }

        UIGraphicsBeginImageContext(self.bounds.size)

        let context = UIGraphicsGetCurrentContext()

        UIColor.clearColor().setFill()
        UIRectFill(self.bounds)

        CGContextSetLineCap(context, kCGLineCapRound)
        CGContextSetLineWidth(context, self.strokeWidth)
        CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor)

        if let realImage = self.realImage {
            realImage.drawInRect(self.bounds)
        }

        brush.strokeWidth = self.strokeWidth
        brush.drawInContext(context)
        CGContextStrokePath(context)

        let previewImage = UIGraphicsGetImageFromCurrentImageContext()
        if self.drawingState == .Ended || brush.supportedContinuousDrawing() {
            self.realImage = previewImage
        }

        UIGraphicsEndImageContext()
        // === 新增 ===
        if self.drawingState == .Began {
            self.redoImages = []

            if self.image != nil {
                self.undoImages.append(self.image!)
            }
        }
        // ======

        self.image = previewImage

        brush.lastPoint = brush.endPoint
    }
}

这里面都有对 self.image 进行非空处理,其实原来不用这么麻烦,如果Swift 的数组支持插入Optional类型的话,我们直接把self.image插入到数组中,用的时候再取出来即可,因为 UIImageView 的 UIImage 是 Optional 类型的,赋一个 nil 给它没有问题,就当是 undo 到初始化状态了,但是偏偏 Swift的数组不支持插入Optional类型,这就导致我们不能记住 UIImageView 的初始化状态,只能通过判断它的image是否为 nil 来处理。

完成的逻辑很简单:当画图开始的时候,保存当前 image 到 undo 栈中,并清空 redo 栈,进行 undo 操作的时候,能一直 undo,并将 undo 的 image 存进 redo 栈中,直到 self.image 为 nil。从这个逻辑可以看出两点:redo 功能非常依赖 undo,毕竟没有撤消就没有重做;除此之外,当用户开始绘制新图的时候,我们也要清空 redo 栈,因为用户已经“回不去”了。

完成这些工作后,就能测试 Undo/Redo 功能了~
这里写图片描述


关于内存的使用

我们很快地就加上了 Undo/Redo 功能,是吧? 通过维护两个图片栈,在进行相应的操作的时候,直接对 self.image 进行赋值,但是这么做有一个很明显的弊端,就是内存使用毫无上限! 你可以很轻松地在 5s 上使内存使用达到 50M 甚至 100M,虽然我们做了一些处理,如当用户绘制新图时,清空 Redo 的图片栈,但是这并不能从根本上解决问题。

要从根本上解决问题有两种方式。


1. 用 CGPath 画图

假设换一种实现方式,不缓存图片,而是保存每一步,这样无疑会使内存使用量降低很多,取而代之的是在每次画图的时候需要有一个循环来重新画每一步(可以尝试用 clearsContextBeforeDrawing 属性来优化),我个人觉得这种方式可能会比较恶心,因为画的越多,性能就越差,我在前一篇里说过【为什么不用drawRect方法】:

为什么不用drawRect方法

其实我最开始也是使用drawRect方法来完成绘制,但是感觉限制很多,比如context无法保存,还是要每次重画(虽然可以保存到一个BitMapContext里,但是这样与保存到image里有什么区别呢?);后来用CALayer保存每一条CGPath,但是这样仍然不能避免每次重绘,因为需要考虑到橡皮擦和画笔属性之类的影响,这么一来还不如采用image的方式来保存最新绘图板。
既然定下了以image来保存绘图板,那么drawRect就不方便了,因为不能用UIGraphicsBeginImageContext方法来创建一个ImageContext。

如果决定要用 CGPath 来画图的话,你除了要暴露一个CGPathCGContext以外,你还需要用一个自定义的对象保存当前的绘图状态,如画笔颜色画笔粗细混合模式(Blend Mode)等(还会在后期遇到由于前期考虑不足的属性没有设置,然后才加上,这就破坏了“封闭-开放原则”),然后在每一个循环体中恢复当前的上下文,类似于这样:

CGContextSaveGState...
for path in paths {
    CGContextSetLineCap(context, kCGLineCapRound)
    CGContextSetLineWidth(context, self.strokeWidth)
    CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor)

    /* Add path and drawing... */

    CGContextRestoreGState...
}

从代码上来说,想换成用CGPath实现也很容易,只需要改两个地方:

  1. PaintBrush 协议,这个协议更新后,其所有的子类同步更新下即可
  2. BoarddrawingImage方法实现

我在 GitHub 里 DrawingBoard 工程里提交了这个分支:
DrawingBoard CGPath 分支
协议和drawingImage进行了适当的更新,绘图是以CGPath来实现的,但是依然采用的是图片栈的方式,感兴趣的同学可以尝试自己实现。


2. 优化图片所占用的内存

除了用CGPath来优化以外,我们还可以直接优化图片栈,用一个缓存或Undo控制器来控制所有的一切,在这个控制器里,将直接管理图片缓存(内存和文件)、Undo、Redo操作,使 Board 的逻辑进一步的封装。
不得不说,这才是我想要实现的方式,模块之间可以达到真正的解耦,我将 Board的代码去掉没有改动的方法和属性后贴在这里:

 class Board: UIImageView {

    // UndoManager,用于实现 Undo 操作和维护图片栈的内存
    private class DBUndoManager {
        class DBImageFault: UIImage {}  // 一个 Fault 对象,与 Core Data 中的 Fault 设计类似

        private static let INVALID_INDEX = -1
        private var images = [UIImage]()    // 图片栈
        private var index = INVALID_INDEX   // 一个指针,指向 images 中的某一张图

        var canUndo: Bool {
            get {
                return index != DBUndoManager.INVALID_INDEX
            }
        }

        var canRedo: Bool {
            get {
                return index + 1 < images.count
            }
        }

        func addImage(image: UIImage) {
            // 当往这个 Manager 中增加图片的时候,先把指针后面的图片全部清掉,
            // 这与我们之前在 drawingImage 方法中对 redoImages 的处理是一样的
            if index < images.count - 1 {
                images[index + 1 ... images.count - 1] = []
            }

            images.append(image)

            // 更新 index 的指向
            index = images.count - 1

            setNeedsCache()
        }

        func imageForUndo() -> UIImage? {
            if self.canUndo {
                --index
                if self.canUndo == false {
                    return nil
                } else {
                    setNeedsCache()
                    return images[index]
                }
            } else {
                return nil
            }
        }

        func imageForRedo() -> UIImage? {
            var image: UIImage? = nil
            if self.canRedo {
                image = images[++index]
            }
            setNeedsCache()
            return image
        }

        // MARK: - Cache

        private static let cahcesLength = 3 // 在内存中保存图片的张数,以 index 为中心点计算:cahcesLength * 2 + 1
        private func setNeedsCache() {
            if images.count >= DBUndoManager.cahcesLength {
                let location = max(0, index - DBUndoManager.cahcesLength)
                let length = min(images.count - 1, index + DBUndoManager.cahcesLength)
                for i in location ... length {
                    autoreleasepool {
                        var image = images[i]

                        if i > index - DBUndoManager.cahcesLength && i < index + DBUndoManager.cahcesLength {
                            setRealImage(image, forIndex: i) // 如果在缓存区域中,则从文件加载
                        } else {
                            setFaultImage(image, forIndex: i) // 如果不在缓存区域中,则置成 Fault 对象
                        }
                    }
                }
            }
        }

        private static var basePath: String = NSSearchPathForDirectoriesInDomains(.DocumentDirectory, .UserDomainMask, true).first as! String
        private func setFaultImage(image: UIImage, forIndex: Int) {
            if !image.isKindOfClass(DBImageFault.self) {
                let imagePath = DBUndoManager.basePath.stringByAppendingPathComponent("\(forIndex)")
                UIImagePNGRepresentation(image).writeToFile(imagePath, atomically: false)
                images[forIndex] = DBImageFault()
            }
        }

        private func setRealImage(image: UIImage, forIndex: Int) {
            if image.isKindOfClass(DBImageFault.self) {
                let imagePath = DBUndoManager.basePath.stringByAppendingPathComponent("\(forIndex)")
                images[forIndex] = UIImage(data: NSData(contentsOfFile: imagePath)!)!
            }
        }
    }

    private var boardUndoManager = DBUndoManager() // 缓存或Undo控制器

    // MARK: - Public methods

    var canUndo: Bool {
        get {
            return self.boardUndoManager.canUndo
        }
    }

    var canRedo: Bool {
        get {
            return self.boardUndoManager.canRedo
        }
    }

    // undo 和 redo 的逻辑都有所简化
    func undo() {
        if self.canUndo == false {
            return
        }

        self.image = self.boardUndoManager.imageForUndo()

        self.realImage = self.image
    }

    func redo() {
        if self.canRedo == false {
            return
        }

        self.image = self.boardUndoManager.imageForRedo()

        self.realImage = self.image
    }

    // MARK: - drawing

    private func drawingImage() {
        if let brush = self.brush {
            // hook
            if let drawingStateChangedBlock = self.drawingStateChangedBlock {
                drawingStateChangedBlock(state: self.drawingState)
            }

            UIGraphicsBeginImageContext(self.bounds.size)

            let context = UIGraphicsGetCurrentContext()

            UIColor.clearColor().setFill()
            UIRectFill(self.bounds)

            CGContextSetLineCap(context, kCGLineCapRound)
            CGContextSetLineWidth(context, self.strokeWidth)
            CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor)

            if let realImage = self.realImage {
                realImage.drawInRect(self.bounds)
            }

            brush.strokeWidth = self.strokeWidth
            brush.drawInContext(context)
            CGContextStrokePath(context)

            let previewImage = UIGraphicsGetImageFromCurrentImageContext()
            if self.drawingState == .Ended || brush.supportedContinuousDrawing() {
                self.realImage = previewImage
            }

            UIGraphicsEndImageContext()

            // 用 Ended 事件代替原先的 Began 事件
            if self.drawingState == .Ended {
                self.boardUndoManager.addImage(self.image!)
            }

            self.image = previewImage

            brush.lastPoint = brush.endPoint
        }
    }
}

以磁盘代替了内存,这里有一些关键点:

  1. Board不需要在对 self.image 的取值进行逻辑判断,DBUndoManager会在适当的时候返回nil,这无疑简化了逻辑
  2. 不需要维护两个图片栈:undoImages、redoImages,drawingImage方法不再需要在 Began 事件里做特殊处理,直接将刚画完的图“扔到” UndoManager 中即可
  3. undo、redo 方便得到了简化,适时调用UndoManager即可
  4. 由于在 UndoManager中只有一个图片栈,所以需要一个额外的指针来指向当前的状态,当前指针的取值(index)对应下图中的 i,两边的箭头分别是 undo、redo 对应的图以及索引:
    这里写图片描述
  5. Fault 对象是一种不错的设计模式,拿来做占位符挺合适的
  6. UndoManager会在三种情况下:addImage、undo、redo 对图片栈进行维护,使 images 里只有 index 两边的元素才真正加载 image到内存中,其他的元素用 Fault 对象代替
  7. 我为什么要用一个 cahcesLength 变量?这里其实还有进一步优化的余地,如只在读取到 Fault 对象时才更新图片栈

那么效果如何呢?我在 4s、Plus 都有进行测试,由于 4s 性能相对较差,我以 4s 为主要测试对象,在内存较少的 4s 上:

这里写图片描述

在反复绘图的情况下,内存也是毫无压力的~!那么读写文件的时候是否会有卡顿呢?在 4s 上我发现远未达到瓶颈:

这里写图片描述

(PS:4s 的闪存是C10级别)
cahcesLength 变量配合 index 可以进一步优化性能,在这里就不多做介绍了。

至此,DrawingBoard 就可以告一段落了。


GitHub

版权声明:如需转载,请注明出处,谢谢!

相关文章推荐

Swift 全功能的绘图板开发

转载请注明出处:http://blog.csdn.net/zhangao0086/article/details/43836789。 要做一个全功能的绘图板,至少要支持以下这些功能: 支持铅笔绘图(...

Swift 全功能的绘图板开发

要做一个全功能的绘图板,至少要支持以下这些功能: 支持铅笔绘图(画点) 支持画直线 支持一些简单的图形(矩形、圆形等) 做一个真正的橡皮擦 能...

Swift 全功能的绘图板开发

转载请注明出处:http://blog.csdn.net/zhangao0086/article/details/43836789。  要做一个全功能的绘图板,至少要支持以下这些功能: ...

功能完善的即时通讯+视频会议源码

语言:C/C++ 编程语言设计,VC++开发平台功能:◆:点对点聊天:◆邀请多人聊天、◆在线发送文件:用户为离线状态下,可以将文件发送到对方带密码的离线文件柜里,文件柜可以接受在线与离线文件,也可以回...

Flex哈希表代码,功能完善~

package hash.utils { import flash.utils.Dictionary; public class Hashtable { private var ke...

从拼图游戏开始(八)_功能完善

好几天没写博客了,今天继续扯拼图游戏。话说上次(从拼图游戏开始(七)_数据模块框架实现)实现了问题数据的持久化,任意长宽比图片的自动剪裁等功能。这次要完善以下功能: 1.添加自定义图片来...

拼图小游戏“ST--拼图”开发篇之后期功能完善

前面跟大家聊了拼图的滑动图片和过关判定等功能,接下来给大家聊一聊后期功能的完善 首先,咱们从Menu菜单开始 菜单的XML文件 <item android:id="@+...

Android网络:开发浏览器(四)——功能完善之长按网页图片菜单

Android网络内容比较杂乱,我们可以通过制作一个小型的浏览器来了解这些知识。当然,所制作的浏览器也是比较粗糙的。 现在,我们可以来想象我们的浏览器有哪些功能: 1. 最基本的浏览网页功能 2...

【深入了解cocos2d-x 3.x】一步一步通过ClippingNode实现一个功能完善的跑马灯公告(2)

本文的主要内容是根据跑马灯解析ClippingNode实现原理。本文涉及到cocos2dx 3.x的渲染机制以及部分opengl的知识。 首先看看上一篇文章中说到的跑马灯的简单实现: //设置...
内容举报
返回顶部
收藏助手
不良信息举报
您举报文章:深度学习:神经网络中的前向传播和反向传播算法推导
举报原因:
原因补充:

(最多只允许输入30个字)