转载请注明出处：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 的约束如下：
两个按钮的点击事件连接到 VC 里：
<code ><span >@IBAction</span> func undo(<span >sender:</span> <span >UIbutton</span>) { <span >self</span>.board.undo()}<span >@IBAction</span> func <span >redo</span>(<span >sneder:</span> <span >UIbutton</span>) { <span >self</span>.board.<span >redo</span>()}</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li></ul> （此时的 Board 还没有 undo/redo 方法，你可以自行添加或者稍后再添加）
两个按钮本身也连接到 VC 里：
<code ><span >@IBOutlet</span> <span >var</span> undobutton: UIbutton!<span >var</span> redobutton: UIbutton!</code><ul ><li >1</li><li >2</li></ul>
更新我们原vIEwDIDLoad中的动画方法，使两个 button 也适时的隐藏及显示：
<code >...self<span >.board</span><span >.drawingStateChangedBlock</span> = {(state: DrawingState) -> () <span >in</span> if state != <span >.Moved</span> { UIVIEw<span >.beginAnimations</span>(nil,context: nil) if state == <span >.Began</span> { self<span >.topVIEwConstraintY</span><span >.constant</span> = -self<span >.topVIEw</span><span >.frame</span><span >.size</span><span >.height</span> self<span >.toolbarConstraintBottom</span><span >.toolbar</span><span >.height</span> self<span >.layoutIfNeeded</span>() self<span >.layoutIfNeeded</span>() self<span >.undobutton</span><span >.Alpha</span> = <span >0</span> // 新增 self<span >.redobutton</span><span >0</span> // 新增 } else if state == <span >.Ended</span> { UIVIEw<span >.setAnimationDelay</span>(<span >1.0</span>) self<span >.constant</span> = <span >0</span> self<span >0</span> self<span >1</span> // 新增 self<span >1</span> // 新增 } UIVIEw<span >.commitAnimations</span>() }}...</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li><li >8</li><li >9</li><li >10</li><li >11</li><li >12</li><li >13</li><li >14</li><li >15</li><li >16</li><li >17</li><li >18</li><li >19</li><li >20</li><li >21</li><li >22</li><li >23</li><li >24</li><li >25</li><li >26</li><li >27</li><li >28</li></ul> 更新 Board
Undo/Redo 真正的逻辑都在Board里面，我打算用图片栈保存 DrawingBoard 的每一张图，当 Undo/Redo 的时候直接把前一个状态取出并显示，为了分别存储 Undo/Redo *** 作所用的图片，我们要建立两个图片栈：
<code ><span >private</span> <span >var</span> undoImages = [UIImage]()<span >var</span> redoImages = [UIImage]()</code><ul > 然后加两个工具方法：canUndo和canRedo：<code >var</span> canUndo: Bool { get { <span >return</span> <span >self</span>.undoImages.count > <span >0</span> || <span >self</span>.image != nil }}<span >var</span> canRedo: Bool { get { <span >self</span>.redoImages.count > <span >0</span> }}</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li><li >8</li><li >9</li><li >10</li><li >11</li></ul>然后是 undo/redo 这两个主要方法：
然后在每次画新图的时候保存下当前状态：
<code >private func drawingImage() { <span >let</span> brush = <span >self</span>.brush { <span >// hook</span> <span >let</span> drawingStateChangedBlock = <span >self</span>.drawingStateChangedBlock { drawingStateChangedBlock(state: <span >self</span>.drawingState) } UIGraphicsBeginImageContext(<span >self</span>.bounds.size) <span >let</span> context = UIGraphicsGetCurrentContext() UIcolor.clearcolor().setFill() UIRectFill(<span >self</span>.bounds) CGContextSetlineCap(context,kCGlineCapRound) CGContextSetlinewidth(context,<span >self</span>.strokeWIDth) CGContextSetstrokecolorWithcolor(context,136); Box-sizing: border-Box;">self</span>.strokecolor.CGcolor) <span >let</span> realimage = <span >self</span>.realimage { realimage.drawInRect(<span >self</span>.bounds) } brush.strokeWIDth = <span >self</span>.strokeWIDth brush.drawInContext(context) CGContextstrokePath(context) <span >let</span> prevIEwImage = UIGraphicsGetimageFromCurrentimageContext() <span >self</span>.drawingState == .Ended || brush.supportedContinuousDrawing() { <span >self</span>.realimage = prevIEwImage } UIGraphicsEndImageContext() <span >// === 新增 ===</span> <span >self</span>.drawingState == .Began { <span >self</span>.redoImages = [] <span >self</span>.image != nil { <span >self</span>.image!) } } <span >// ======</span> <span >self</span>.image = prevIEwImage brush.lastPoint = brush.endPoint }}</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li><li >8</li><li >9</li><li >10</li><li >11</li><li >12</li><li >13</li><li >14</li><li >15</li><li >16</li><li >17</li><li >18</li><li >19</li><li >20</li><li >21</li><li >22</li><li >23</li><li >24</li><li >25</li><li >26</li><li >27</li><li >28</li><li >29</li><li >30</li><li >31</li><li >32</li><li >33</li><li >34</li><li >35</li><li >36</li><li >37</li><li >38</li><li >39</li><li >40</li><li >41</li><li >42</li><li >43</li><li >44</li><li >45</li><li >46</li><li >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 >CGContextSaveGState<span >...</span>for path <span >in</span> paths { CGContextSetlineCap(context,kCGlineCapRound) CGContextSetlinewidth(context,<span >self</span><span >.</span>strokeWIDth) CGContextSetstrokecolorWithcolor(context,102); Box-sizing: border-Box;">.</span>strokecolor<span >.</span>CGcolor) <span >/* Add path and drawing... */</span> CGContextRestoreGState<span >...</span>}</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li><li >8</li><li >9</li><li >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 总结以上是内存溢出为你收集整理的Swift 绘图板功能完善以及终极优化全部内容，希望文章能够帮你解决Swift 绘图板功能完善以及终极优化所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）