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

转载请注明出处：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]()

然后加两个工具方法：canUndo 和 canRedo ：

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 来画图的话，你除了要暴露一个CGPath和CGContext以外，你还需要用一个自定义的对象保存当前的绘图状态，如画笔颜色、画笔粗细、混合模式（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. Board 的drawingImage方法实现

我在 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

时间： 2024-04-08 21:48:48

Swift 绘图板功能完善以及终极优化的相关文章

一个功能完善的专栏管理的程序-&amp;gt;这是asp.net的第二个应用(一)

一个功能完善的专栏管理的程序->这是asp.net的第二个应用(一)/*豆腐制作,都是精品http://www.asp888.net 豆腐技术站如转载,请保留完整版权信息*/ 前言:前面豆腐将过一个asp.net 版本的留言版的程序,今天在这里 再 参照实例我们来学习一个asp.net 版本的专栏管理程序,专栏现在几乎已经成为技术站点的一个保留栏目,豆腐在开始建站的时候本来想 突破传统,但是 但是最后发现 的确还是 专栏这种形式的 程序 对于 技术类站点来说是合适的 通过前面的留言版的 文章,很

外贸英文SEO终极优化之路 创造利润的最大化

接触英文SEO这个行业已经有4年多了,特别是对于Google的研究有了自己的一些看法. 2010年那会做外贸确实是非常好做的.随便发一些外链就会拥有很好的排名.但进入2011年以来,做外贸就越来越难做了,因为Google算法调整以及一些政治原因,导致很多外贸公司纷纷倒闭,很多外贸网站能短时间做上去,但在首页待不了多久就会掉下去,这是什么原因呢,笔者下面就开始具体分析了. 前一段时间有个外国人分析了咱国人做外贸仿品站的一些情况,选择了几个行业作为案例,分析描述了这些外贸站是如何排在Google首页

从SOSO预览功能看站内优化

目前除了百度外,大多数搜索引擎都有一个预览功能,包括谷歌,搜狗,有道,SOSO等.预览功能与快照不同,快照是网页在搜索引擎服务器上的存档, 以应对页面打不开时,用户仍能通过快照查看该页面的文字性内容;预览则是在不脱离搜索引擎的搜索结果页面的情况下,提前查看网页内容. 不同搜索引擎预览功能略有不同,最明显的就是谷歌了,谷歌预览功展示的是网页的截图,当然还有其它细节,有兴趣可以自己去看看.而国产的SOSO,搜狗和有道等搜索引擎的预览功能基本一致,都是展现了页面的核心内容,而不像快照那样展示全部内容.

现场直击：中国人的数据库分支AliSQL开放源代码下载 功能新增秒杀场景优化、TokuDB

Mysql之父和Alisql 之父的碰撞 北京时间10月14日消息,阿里云研究员褚霸在云栖大会<开发者技术峰会--开源技术专场>分论坛上,和MySQL之父.Maria DB CTO Michael Wideneus共同启动AliSQL开放下载仪式,并现场放出AliSQL二维码下载地址(GitHub地址:点此进入 ). 正式下载的版本号和9月份内测时一致,都是5.6.32,但功能上稍有不同,正式下载版新增了两个功能:秒杀场景优化.TokuDB. 根据9月份的测试结果显示,AliSQL5.6.32

AgentWeb是基于Android WebView一个功能完善小型浏览器库

本文讲的是AgentWeb是基于Android WebView一个功能完善小型浏览器库,AgentWeb是一个高度封装的 Android WebView ,简单易用 , 带有进度条 . 支持文件上传 . 下载 . 简化 Javascript 通信 . 链式调用 . 加强 Web 安全的库 .让你几行代码集成一个小型浏览器在你的应用 . App 下载体验 前言 WebView 可谓是每个应用必备的一个控件了 ,但是谈起它的使用 ,让很多人都不是那么喜欢它 ,比如说每个 Web 页面都需要各种一大推

基于Android平台的手机的功能完善方面或者是创新性设想？

问题描述 基于Android平台的手机的功能完善方面或者是创新性设想?或者是你还想让你的手机具有什么功能?你现在的手机哪些地方用起来不方便?

Linux系统配置功能完善的Web服务器

http://www.aliyun.com/zixun/aggregation/17117.html">Web服务器是指驻留在互联网内某种计算机上的程序.当Web浏览器连接到服务器上并请求文件时,服务器将处理该请求,并将该文件发送到该浏览器上,附带的信息会告诉浏览器如何查看该文件.服务器使用HTTP进行信息交流,这就是人们常把它称为HTTPD服务器的原因.Web服务器不仅能够存储信息,还能够在用户通过Web浏览器提供的信息基础上运行脚本和程序.接下来,小编就给大家介绍一下如何在Linux系

英文SEO终极优化,外贸行业盈利惊人

接触英文SEO这个行业已经有4年多了,特别是对于Google的研究有了自己的一些看法. 2010年那会做外贸确实是非常好做的.随便发一些外链就会拥有很好的排名.但进入2011年以来,做外贸就越来越难做了,因为Google算法调整以及一些政治原因,导致很多外贸公司纷纷倒闭,很多外贸网站能短时间做上去,但在首页待不了多久就会掉下去,这是什么原因呢,笔者下面就开始具体分析了. 前一段时间有个外国人分析了咱国人做外贸仿品站的一些情况,选择了几个行业作为案例,分析描述了这些外贸站是如何排在Google首页

代码生成工具Database2Sharp功能功能完善及更新

好久没有更新代码生成工具了,因为很多功能基本上能够应付日常的开发工作了,如C#代码生成.数据库文档导出.Sql脚本生成,但用户在使用过程中也发现了一些需要完善的地方,因此继续完善,以求更加实用方便.现更新了下面几个问题,希望给大家做软件开发的时候有一个启示.1. 所有的模板支持C#2.0的架构,方便转换为高版本的VS格式.    虽然现在很多时候用VS2008来做开发了,但是我们一般来说还是基于C#2.0来进行开发:本次更新考虑有些用户可能还是使用VS2005的开发工具,因此只做了基于VS200