转载请注明出处:http://www.jb51.cc/article/p-yoqsxumy-ber.html。
前文总结
接着这篇:Swift 全功能的绘图板开发,虽然在上一篇中我们已经完成了这些功能:
- 支持铅笔绘图(画点)
- 支持画直线
- 支持一些简单的图形(矩形、圆形等)
- 做一个真正的橡皮擦
- 能设置画笔的粗细
- 能设置画笔的颜色
- 能设置背景色或者背景图
但是还有一个非常重要的功能没有实现,没错,那就是 Undo/Redo!我之所以把这个功能单独放出来是有原因的,一是因为上一篇已经篇幅太长,不适合继续往上加内容;二是因为为了实现 Undo/Redo 功能,我们需要对 DrawingBoard 进行一些重构,在这篇文章中,你能看到用另一种方式实现的绘图板。
实现的效果:
更新 ViewController
先添加两张按钮图:
黑底、50%的透明度,箭头用白色。
(PS:这可是我自己做的,别嫌弃)
图片放到 Images.xcasserts 里:
(再次PS:图嫌小的话,就放在2x上)
然后在 Storyboard 里添加两个 Button:
注意里面的红框,Button 与 Board 平级,并且在 Board 的上方。
Button 的约束如下:
- 分别为左、右的 Button 设置 Undo、Redo 的 Image
- 左边的 Undo 按钮离左 10px,顶部距离父视图 74px
- 右边的 Redo 按钮离右 10px,顶部与 Undo 相同
- 不要设置宽、高约束,应与 Image 一致
两个按钮的点击事件连接到 VC 里:
(此时的 Board 还没有 undo/redo 方法,你可以自行添加或者稍后再添加)
两个按钮本身也连接到 VC 里:
<code class="language-swift hljs scala has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-annotation" style="color: rgb(155,133,157); box-sizing: border-box;">@IBOutlet</span> <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">var</span> undoButton: UIButton! <span class="hljs-annotation" style="color: rgb(155,136); box-sizing: border-box;">var</span> redoButton: UIButton!</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li></ul>
更新我们原viewDidLoad
中的动画方法,使两个 Button 也适时的隐藏及显示:
<code class="language-swift hljs avrasm has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">... self<span class="hljs-preprocessor" style="color: rgb(68,68,68); box-sizing: border-box;">.board</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.drawingStateChangedBlock</span> = {(state: DrawingState) -> () <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">in</span> if state != <span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.Moved</span> { UIView<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.beginAnimations</span>(nil,context: nil) if state == <span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.Began</span> { self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.topViewConstraintY</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.constant</span> = -self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.topView</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.frame</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.size</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.height</span> self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.toolbarConstraintBottom</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.toolbar</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.height</span> self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.layoutIfNeeded</span>() self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.layoutIfNeeded</span>() self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.undoButton</span><span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.alpha</span> = <span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">0</span> // 新增 self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.redoButton</span><span class="hljs-preprocessor" style="color: rgb(68,102); box-sizing: border-box;">0</span> // 新增 } else if state == <span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.Ended</span> { UIView<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.setAnimationDelay</span>(<span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">1.0</span>) self<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.constant</span> = <span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">0</span> self<span class="hljs-preprocessor" style="color: rgb(68,102); box-sizing: border-box;">0</span> self<span class="hljs-preprocessor" style="color: rgb(68,102); box-sizing: border-box;">1</span> // 新增 self<span class="hljs-preprocessor" style="color: rgb(68,102); box-sizing: border-box;">1</span> // 新增 } UIView<span class="hljs-preprocessor" style="color: rgb(68,68); box-sizing: border-box;">.commitAnimations</span>() } } ...</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li></ul>
更新 Board
Undo/Redo 真正的逻辑都在Board
里面,我打算用图片栈保存 DrawingBoard 的每一张图,当 Undo/Redo 的时候直接把前一个状态取出并显示,为了分别存储 Undo/Redo 操作所用的图片,我们要建立两个图片栈:
<code class="language-swift hljs cs has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"><span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">private</span> <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">var</span> undoImages = [UIImage]() <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">var</span> redoImages = [UIImage]()</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,85); font-family:'microsoft yahei'; font-size:14px; line-height:35px"> 然后加两个工具方法:canUndo
和canRedo
:<code class="language-swift hljs php has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',136); box-sizing: border-box;">var</span> canUndo: Bool { get { <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">return</span> <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.undoImages.count > <span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">0</span> || <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.image != nil } } <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">var</span> canRedo: Bool { get { <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.redoImages.count > <span class="hljs-number" style="color: rgb(0,102); box-sizing: border-box;">0</span> } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li></ul>然后是 undo/redo 这两个主要方法:
然后在每次画新图的时候保存下当前状态:
<code class="language-swift hljs rust has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">private func drawingImage() { <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">let</span> brush = <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.brush { <span class="hljs-comment" style="color: rgb(136,0); box-sizing: border-box;">// hook</span> <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">let</span> drawingStateChangedBlock = <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.drawingStateChangedBlock { drawingStateChangedBlock(state: <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.drawingState) } UIGraphicsBeginImageContext(<span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.bounds.size) <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">let</span> context = UIGraphicsGetCurrentContext() UIColor.clearColor().setFill() UIRectFill(<span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.bounds) CGContextSetLineCap(context,kCGLineCapRound) CGContextSetLineWidth(context,<span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.strokeWidth) CGContextSetStrokeColorWithColor(context,136); box-sizing: border-box;">self</span>.strokeColor.CGColor) <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">let</span> realImage = <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.realImage { realImage.drawInRect(<span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.bounds) } brush.strokeWidth = <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.strokeWidth brush.drawInContext(context) CGContextStrokePath(context) <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">let</span> previewImage = UIGraphicsGetImageFromCurrentImageContext() <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.drawingState == .Ended || brush.supportedContinuousDrawing() { <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.realImage = previewImage } UIGraphicsEndImageContext() <span class="hljs-comment" style="color: rgb(136,0); box-sizing: border-box;">// === 新增 ===</span> <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.drawingState == .Began { <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.redoImages = [] <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.image != nil { <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.image!) } } <span class="hljs-comment" style="color: rgb(136,0); box-sizing: border-box;">// ======</span> <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">self</span>.image = previewImage brush.lastPoint = brush.endPoint } }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li><li style="box-sizing: border-box; padding: 0px 5px;">11</li><li style="box-sizing: border-box; padding: 0px 5px;">12</li><li style="box-sizing: border-box; padding: 0px 5px;">13</li><li style="box-sizing: border-box; padding: 0px 5px;">14</li><li style="box-sizing: border-box; padding: 0px 5px;">15</li><li style="box-sizing: border-box; padding: 0px 5px;">16</li><li style="box-sizing: border-box; padding: 0px 5px;">17</li><li style="box-sizing: border-box; padding: 0px 5px;">18</li><li style="box-sizing: border-box; padding: 0px 5px;">19</li><li style="box-sizing: border-box; padding: 0px 5px;">20</li><li style="box-sizing: border-box; padding: 0px 5px;">21</li><li style="box-sizing: border-box; padding: 0px 5px;">22</li><li style="box-sizing: border-box; padding: 0px 5px;">23</li><li style="box-sizing: border-box; padding: 0px 5px;">24</li><li style="box-sizing: border-box; padding: 0px 5px;">25</li><li style="box-sizing: border-box; padding: 0px 5px;">26</li><li style="box-sizing: border-box; padding: 0px 5px;">27</li><li style="box-sizing: border-box; padding: 0px 5px;">28</li><li style="box-sizing: border-box; padding: 0px 5px;">29</li><li style="box-sizing: border-box; padding: 0px 5px;">30</li><li style="box-sizing: border-box; padding: 0px 5px;">31</li><li style="box-sizing: border-box; padding: 0px 5px;">32</li><li style="box-sizing: border-box; padding: 0px 5px;">33</li><li style="box-sizing: border-box; padding: 0px 5px;">34</li><li style="box-sizing: border-box; padding: 0px 5px;">35</li><li style="box-sizing: border-box; padding: 0px 5px;">36</li><li style="box-sizing: border-box; padding: 0px 5px;">37</li><li style="box-sizing: border-box; padding: 0px 5px;">38</li><li style="box-sizing: border-box; padding: 0px 5px;">39</li><li style="box-sizing: border-box; padding: 0px 5px;">40</li><li style="box-sizing: border-box; padding: 0px 5px;">41</li><li style="box-sizing: border-box; padding: 0px 5px;">42</li><li style="box-sizing: border-box; padding: 0px 5px;">43</li><li style="box-sizing: border-box; padding: 0px 5px;">44</li><li style="box-sizing: border-box; padding: 0px 5px;">45</li><li style="box-sizing: border-box; padding: 0px 5px;">46</li><li style="box-sizing: border-box; padding: 0px 5px;">47</li></ul>这里面都有对
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)
等(还会在后期遇到由于前期考虑不足的属性没有设置,然后才加上,这就破坏了“封闭-开放原则”),然后在每一个循环体中恢复
当前的上下文,类似于这样:<code class="language-swift hljs lasso has-numbering" style="display: block; padding: 0px; color: inherit; box-sizing: border-box; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">CGContextSaveGState<span class="hljs-attribute" style="box-sizing: border-box;">...</span> for path <span class="hljs-keyword" style="color: rgb(0,136); box-sizing: border-box;">in</span> paths { CGContextSetLineCap(context,kCGLineCapRound) CGContextSetLineWidth(context,<span class="hljs-built_in" style="color: rgb(102,102); box-sizing: border-box;">self</span><span class="hljs-built_in" style="color: rgb(102,102); box-sizing: border-box;">.</span>strokeWidth) CGContextSetStrokeColorWithColor(context,102); box-sizing: border-box;">.</span>strokeColor<span class="hljs-built_in" style="color: rgb(102,102); box-sizing: border-box;">.</span>CGColor) <span class="hljs-comment" style="color: rgb(136,0); box-sizing: border-box;">/* Add path and drawing... */</span> CGContextRestoreGState<span class="hljs-attribute" style="box-sizing: border-box;">...</span> }</code><ul class="pre-numbering" style="box-sizing: border-box; position: absolute; width: 50px; top: 0px; left: 0px; margin: 0px; padding: 6px 0px 40px; border-right-width: 1px; border-right-style: solid; border-right-color: rgb(221,238);"><li style="box-sizing: border-box; padding: 0px 5px;">1</li><li style="box-sizing: border-box; padding: 0px 5px;">2</li><li style="box-sizing: border-box; padding: 0px 5px;">3</li><li style="box-sizing: border-box; padding: 0px 5px;">4</li><li style="box-sizing: border-box; padding: 0px 5px;">5</li><li style="box-sizing: border-box; padding: 0px 5px;">6</li><li style="box-sizing: border-box; padding: 0px 5px;">7</li><li style="box-sizing: border-box; padding: 0px 5px;">8</li><li style="box-sizing: border-box; padding: 0px 5px;">9</li><li style="box-sizing: border-box; padding: 0px 5px;">10</li></ul>从代码上来说,想换成用
CGPath
实现也很容易,只需要改两个地方:
PaintBrush
协议,这个协议更新后,其所有的子类同步更新下即可Board
的drawingImage
方法实现我在 GitHub 里 DrawingBoard 工程里提交了这个分支:
DrawingBoard CGPath 分支
协议和drawingImage
进行了适当的更新,绘图是以CGPath
来实现的,但是依然采用的是图片栈的方式,感兴趣的同学可以尝试自己实现。
2. 优化图片所占用的内存
除了用
CGPath
来优化以外,我们还可以直接优化图片栈,用一个缓存或Undo控制器来控制所有的一切,在这个控制器里,将直接管理图片缓存(内存和文件)、Undo、Redo操作,使 Board 的逻辑进一步的封装。
不得不说,这才是我想要实现的方式,模块之间可以达到真正的解耦,我将Board
的代码去掉没有改动的方法和属性后贴在这里:以磁盘代替了内存,这里有一些关键点:
Board不需要在对
self.image
的取值进行逻辑判断,DBUndoManager
会在适当的时候返回nil,这无疑简化了逻辑- 不需要维护两个图片栈:undoImages、redoImages,
drawingImage
方法不再需要在 Began 事件里做特殊处理,直接将刚画完的图“扔到” UndoManager 中即可- undo、redo 方便得到了简化,适时调用
UndoManager
即可- 由于在
UndoManager
中只有一个图片栈,所以需要一个额外的指针来指向当前的状态,当前指针的取值(index)对应下图中的 i,两边的箭头分别是 undo、redo 对应的图以及索引:
- Fault 对象是一种不错的设计模式,拿来做占位符挺合适的
UndoManager
会在三种情况下:addImage、undo、redo 对图片栈进行维护,使 images 里只有 index 两边的元素才真正加载 image到内存中,其他的元素用 Fault 对象代替- 我为什么要用一个 cahcesLength 变量?这里其实还有进一步优化的余地,如只在读取到 Fault 对象时才更新图片栈
那么效果如何呢?我在 4s、Plus 都有进行测试,由于 4s 性能相对较差,我以 4s 为主要测试对象,在内存较少的 4s 上:
在反复绘图的情况下,内存也是毫无压力的~!那么读写文件的时候是否会有卡顿呢?在 4s 上我发现远未达到瓶颈:
(PS:4s 的闪存是C10级别)
cahcesLength 变量配合 index 可以进一步优化性能,在这里就不多做介绍了。至此,DrawingBoard 就可以告一段落了。
GitHub
版权声明:本文内容由互联网用户自发贡献,该文观点与技术仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 dio@foxmail.com 举报,一经查实,本站将立刻删除。