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

2023-08-03 原文

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

<code class="language-swift hljs ruby 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-variable" style="color: rgb(102,102); Box-sizing: border-Box;">@IBAction</span> func undo(<span class="hljs-symbol" style="color: rgb(0,102,102); Box-sizing: border-Box;">sender:</span> <span class="hljs-constant" style="Box-sizing: border-Box;">UIButton</span>) {
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.board.undo()
}

<span class="hljs-variable" style="color: rgb(102,102); Box-sizing: border-Box;">@IBAction</span> func <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">redo</span>(<span class="hljs-symbol" style="color: rgb(0,102); Box-sizing: border-Box;">sneder:</span> <span class="hljs-constant" style="Box-sizing: border-Box;">UIButton</span>) {
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.board.<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">redo</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,221,221); list-style: none; text-align: right; background-color: rgb(238,238,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></ul>

（此时的 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 这两个主要方法： 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;">func undo() {
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.canUndo == <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">false</span> {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span>
    }

    <span class="hljs-keyword" 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>.redoImages.append(<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image!)

        let lastimage = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.undoImages.removeLast()
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image = lastimage

    } <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">else</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image != <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">nil</span> {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image!)
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">nil</span>
    }

    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.realImage = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image
}

func <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">redo</span>() {
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.canRedo == <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">nil</span> {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.undoImages.append(<span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image!)
        }

        let lastimage = <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.redoImages.removeLast()
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image = lastimage

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">self</span>.image
    }
}</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></ul> 
 然后在每次画新图的时候保存下当前状态： 
<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的代码去掉没有改动的方法和属性后贴在这里： 
Nowrap; word-wrap: break-word; Box-sizing: border-Box; margin-top: 0px; margin-bottom: 1.1em; font-family: 'Source Code Pro',monospace;font-size:undefined; white-space: pre; border-radius: 0px; word-wrap: normal; background: transparent;"> class Board: UIImageView {

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// UndoManager，用于实现 Undo 操作和维护图片栈的内存</span>
    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">class</span> DBUndoManager {
        class DBImageFault: UIImage {}  <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 一个 Fault 对象，与 Core Data 中的 Fault 设计类似</span>

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">static</span> <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> INVALID_INDEX = -<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span>
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> images = [UIImage]()    <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;">var</span> index = INVALID_INDEX   <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 一个指针，指向 images 中的某一张图</span>

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> canUndo: Bool {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">get</span> {
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> index != DBUndoManager.INVALID_INDEX
            }
        }

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> canRedo: Bool {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> index + <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span> < images.count
            }
        }

        func addImage(image: UIImage) {
            <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 当往这个 Manager 中增加图片的时候，先把指针后面的图片全部清掉，</span>
            <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 这与我们之前在 drawingImage 方法中对 redoImages 的处理是一样的</span>
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> index < images.count - <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span> {
                images[index + <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span> ... images.count - <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span>] = []
            }

            images.append(image)

            <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 更新 index 的指向</span>
            index = images.count - <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span>

            setNeedsCache()
        }

        func imageForUndo() -> UIImage? {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> self.canUndo {
                --index
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> self.canUndo == <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">false</span> {
                    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> nil
                } <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">else</span> {
                    setNeedsCache()
                    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> images[index]
                }
            } <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">else</span> {
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> nil
            }
        }

        func imageForRedo() -> UIImage? {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> image: UIImage? = nil
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> self.canRedo {
                image = images[++index]
            }
            setNeedsCache()
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> image
        }

        <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// MARK: - Cache</span>

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> cahcesLength = <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">3</span> <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 在内存中保存图片的张数，以 index 为中心点计算：cahcesLength * 2 + 1</span>
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">private</span> func <span class="hljs-title" style="Box-sizing: border-Box;">setNeedsCache</span>() {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> images.count >= DBUndoManager.cahcesLength {
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> location = max(<span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">0</span>,index - DBUndoManager.cahcesLength)
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> length = min(images.count - <span class="hljs-number" style="color: rgb(0,102); Box-sizing: border-Box;">1</span>,index + DBUndoManager.cahcesLength)
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">for</span> i <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">in</span> location ... length {
                    autoreleasepool {
                        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> image = images[i]

                        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> i > index - DBUndoManager.cahcesLength && i < index + DBUndoManager.cahcesLength {
                            setRealImage(image,forIndex: i) <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;">else</span> {
                            setFaultimage(image,0); Box-sizing: border-Box;">// 如果不在缓存区域中，则置成 Fault 对象</span>
                        }
                    }
                }
            }
        }

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> basePath: String = NSSearchPathForDirectoriesInDomains(.DocumentDirectory,.UserDomainMask,136); Box-sizing: border-Box;">true</span>).first <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">as</span>! String
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">private</span> func <span class="hljs-title" style="Box-sizing: border-Box;">setFaultimage</span>(image: UIImage,forIndex: Int) {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> !image.isKindOfClass(DBImageFault.self) {
                <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> imagePath = DBUndoManager.basePath.stringByAppendingPathComponent(<span class="hljs-string" style="color: rgb(0,136,0); Box-sizing: border-Box;">"\(forIndex)"</span>)
                UIImagePNGRepresentation(image).writetoFile(imagePath,atomically: <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">false</span>)
                images[forIndex] = DBImageFault()
            }
        }

        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">private</span> func <span class="hljs-title" style="Box-sizing: border-Box;">setRealImage</span>(image: UIImage,136); Box-sizing: border-Box;">if</span> image.isKindOfClass(DBImageFault.self) {
                <span class="hljs-keyword" style="color: rgb(0,0); Box-sizing: border-Box;">"\(forIndex)"</span>)
                images[forIndex] = UIImage(data: NSData(contentsOfFile: imagePath)!)!
            }
        }
    }

    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> boardUndoManager = DBUndoManager() <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 缓存或Undo控制器</span>

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// MARK: - Public methods</span>

    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> canUndo: Bool {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">get</span> {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> self.boardUndoManager.canUndo
        }
    }

    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">var</span> canRedo: Bool {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span> self.boardUndoManager.canRedo
        }
    }

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// undo 和 redo 的逻辑都有所简化</span>
    func undo() {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">false</span> {
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span>
        }

        self.image = self.boardUndoManager.imageForUndo()

        self.realImage = self.image
    }

    func redo() {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> self.canRedo == <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">return</span>
        }

        self.image = self.boardUndoManager.imageForRedo()

        self.realImage = self.image
    }

    <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// MARK: - drawing</span>

    <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">private</span> func <span class="hljs-title" style="Box-sizing: border-Box;">drawingImage</span>() {
        <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> brush = self.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 = self.drawingStateChangedBlock {
                drawingStateChangedBlock(state: self.drawingState)
            }

            UIGraphicsBeginImageContext(self.bounds.size)

            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> context = UIGraphicsGetCurrentContext()

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

            CGContextSetLineCap(context,kCGLineCapRound)
            CGContextSetlinewidth(context,self.strokeWidth)
            CGContextSetstrokeColorWithColor(context,self.strokeColor.CGColor)

            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">let</span> realImage = self.realImage {
                realImage.drawInRect(self.bounds)
            }

            brush.strokeWidth = self.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;">if</span> self.drawingState == .Ended || brush.supportedContinuousDrawing() {
                self.realImage = previewImage
            }

            UIGraphicsEndImageContext()

            <span class="hljs-comment" style="color: rgb(136,0); Box-sizing: border-Box;">// 用 Ended 事件代替原先的 Began 事件</span>
            <span class="hljs-keyword" style="color: rgb(0,136); Box-sizing: border-Box;">if</span> self.drawingState == .Ended {
                self.boardUndoManager.addImage(self.image!)
            }

            self.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><li style="Box-sizing: border-Box; padding: 0px 5px;">48</li><li style="Box-sizing: border-Box; padding: 0px 5px;">49</li><li style="Box-sizing: border-Box; padding: 0px 5px;">50</li><li style="Box-sizing: border-Box; padding: 0px 5px;">51</li><li style="Box-sizing: border-Box; padding: 0px 5px;">52</li><li style="Box-sizing: border-Box; padding: 0px 5px;">53</li><li style="Box-sizing: border-Box; padding: 0px 5px;">54</li><li style="Box-sizing: border-Box; padding: 0px 5px;">55</li><li style="Box-sizing: border-Box; padding: 0px 5px;">56</li><li style="Box-sizing: border-Box; padding: 0px 5px;">57</li><li style="Box-sizing: border-Box; padding: 0px 5px;">58</li><li style="Box-sizing: border-Box; padding: 0px 5px;">59</li><li style="Box-sizing: border-Box; padding: 0px 5px;">60</li><li style="Box-sizing: border-Box; padding: 0px 5px;">61</li><li style="Box-sizing: border-Box; padding: 0px 5px;">62</li><li style="Box-sizing: border-Box; padding: 0px 5px;">63</li><li style="Box-sizing: border-Box; padding: 0px 5px;">64</li><li style="Box-sizing: border-Box; padding: 0px 5px;">65</li><li style="Box-sizing: border-Box; padding: 0px 5px;">66</li><li style="Box-sizing: border-Box; padding: 0px 5px;">67</li><li style="Box-sizing: border-Box; padding: 0px 5px;">68</li><li style="Box-sizing: border-Box; padding: 0px 5px;">69</li><li style="Box-sizing: border-Box; padding: 0px 5px;">70</li><li style="Box-sizing: border-Box; padding: 0px 5px;">71</li><li style="Box-sizing: border-Box; padding: 0px 5px;">72</li><li style="Box-sizing: border-Box; padding: 0px 5px;">73</li><li style="Box-sizing: border-Box; padding: 0px 5px;">74</li><li style="Box-sizing: border-Box; padding: 0px 5px;">75</li><li style="Box-sizing: border-Box; padding: 0px 5px;">76</li><li style="Box-sizing: border-Box; padding: 0px 5px;">77</li><li style="Box-sizing: border-Box; padding: 0px 5px;">78</li><li style="Box-sizing: border-Box; padding: 0px 5px;">79</li><li style="Box-sizing: border-Box; padding: 0px 5px;">80</li><li style="Box-sizing: border-Box; padding: 0px 5px;">81</li><li style="Box-sizing: border-Box; padding: 0px 5px;">82</li><li style="Box-sizing: border-Box; padding: 0px 5px;">83</li><li style="Box-sizing: border-Box; padding: 0px 5px;">84</li><li style="Box-sizing: border-Box; padding: 0px 5px;">85</li><li style="Box-sizing: border-Box; padding: 0px 5px;">86</li><li style="Box-sizing: border-Box; padding: 0px 5px;">87</li><li style="Box-sizing: border-Box; padding: 0px 5px;">88</li><li style="Box-sizing: border-Box; padding: 0px 5px;">89</li><li style="Box-sizing: border-Box; padding: 0px 5px;">90</li><li style="Box-sizing: border-Box; padding: 0px 5px;">91</li><li style="Box-sizing: border-Box; padding: 0px 5px;">92</li><li style="Box-sizing: border-Box; padding: 0px 5px;">93</li><li style="Box-sizing: border-Box; padding: 0px 5px;">94</li><li style="Box-sizing: border-Box; padding: 0px 5px;">95</li><li style="Box-sizing: border-Box; padding: 0px 5px;">96</li><li style="Box-sizing: border-Box; padding: 0px 5px;">97</li><li style="Box-sizing: border-Box; padding: 0px 5px;">98</li><li style="Box-sizing: border-Box; padding: 0px 5px;">99</li><li style="Box-sizing: border-Box; padding: 0px 5px;">100</li><li style="Box-sizing: border-Box; padding: 0px 5px;">101</li><li style="Box-sizing: border-Box; padding: 0px 5px;">102</li><li style="Box-sizing: border-Box; padding: 0px 5px;">103</li><li style="Box-sizing: border-Box; padding: 0px 5px;">104</li><li style="Box-sizing: border-Box; padding: 0px 5px;">105</li><li style="Box-sizing: border-Box; padding: 0px 5px;">106</li><li style="Box-sizing: border-Box; padding: 0px 5px;">107</li><li style="Box-sizing: border-Box; padding: 0px 5px;">108</li><li style="Box-sizing: border-Box; padding: 0px 5px;">109</li><li style="Box-sizing: border-Box; padding: 0px 5px;">110</li><li style="Box-sizing: border-Box; padding: 0px 5px;">111</li><li style="Box-sizing: border-Box; padding: 0px 5px;">112</li><li style="Box-sizing: border-Box; padding: 0px 5px;">113</li><li style="Box-sizing: border-Box; padding: 0px 5px;">114</li><li style="Box-sizing: border-Box; padding: 0px 5px;">115</li><li style="Box-sizing: border-Box; padding: 0px 5px;">116</li><li style="Box-sizing: border-Box; padding: 0px 5px;">117</li><li style="Box-sizing: border-Box; padding: 0px 5px;">118</li><li style="Box-sizing: border-Box; padding: 0px 5px;">119</li><li style="Box-sizing: border-Box; padding: 0px 5px;">120</li><li style="Box-sizing: border-Box; padding: 0px 5px;">121</li><li style="Box-sizing: border-Box; padding: 0px 5px;">122</li><li style="Box-sizing: border-Box; padding: 0px 5px;">123</li><li style="Box-sizing: border-Box; padding: 0px 5px;">124</li><li style="Box-sizing: border-Box; padding: 0px 5px;">125</li><li style="Box-sizing: border-Box; padding: 0px 5px;">126</li><li style="Box-sizing: border-Box; padding: 0px 5px;">127</li><li style="Box-sizing: border-Box; padding: 0px 5px;">128</li><li style="Box-sizing: border-Box; padding: 0px 5px;">129</li><li style="Box-sizing: border-Box; padding: 0px 5px;">130</li><li style="Box-sizing: border-Box; padding: 0px 5px;">131</li><li style="Box-sizing: border-Box; padding: 0px 5px;">132</li><li style="Box-sizing: border-Box; padding: 0px 5px;">133</li><li style="Box-sizing: border-Box; padding: 0px 5px;">134</li><li style="Box-sizing: border-Box; padding: 0px 5px;">135</li><li style="Box-sizing: border-Box; padding: 0px 5px;">136</li><li style="Box-sizing: border-Box; padding: 0px 5px;">137</li><li style="Box-sizing: border-Box; padding: 0px 5px;">138</li><li style="Box-sizing: border-Box; padding: 0px 5px;">139</li><li style="Box-sizing: border-Box; padding: 0px 5px;">140</li><li style="Box-sizing: border-Box; padding: 0px 5px;">141</li><li style="Box-sizing: border-Box; padding: 0px 5px;">142</li><li style="Box-sizing: border-Box; padding: 0px 5px;">143</li><li style="Box-sizing: border-Box; padding: 0px 5px;">144</li><li style="Box-sizing: border-Box; padding: 0px 5px;">145</li><li style="Box-sizing: border-Box; padding: 0px 5px;">146</li><li style="Box-sizing: border-Box; padding: 0px 5px;">147</li><li style="Box-sizing: border-Box; padding: 0px 5px;">148</li><li style="Box-sizing: border-Box; padding: 0px 5px;">149</li><li style="Box-sizing: border-Box; padding: 0px 5px;">150</li><li style="Box-sizing: border-Box; padding: 0px 5px;">151</li><li style="Box-sizing: border-Box; padding: 0px 5px;">152</li><li style="Box-sizing: border-Box; padding: 0px 5px;">153</li><li style="Box-sizing: border-Box; padding: 0px 5px;">154</li><li style="Box-sizing: border-Box; padding: 0px 5px;">155</li><li style="Box-sizing: border-Box; padding: 0px 5px;">156</li><li style="Box-sizing: border-Box; padding: 0px 5px;">157</li><li style="Box-sizing: border-Box; padding: 0px 5px;">158</li><li style="Box-sizing: border-Box; padding: 0px 5px;">159</li><li style="Box-sizing: border-Box; padding: 0px 5px;">160</li><li style="Box-sizing: border-Box; padding: 0px 5px;">161</li><li style="Box-sizing: border-Box; padding: 0px 5px;">162</li><li style="Box-sizing: border-Box; padding: 0px 5px;">163</li><li style="Box-sizing: border-Box; padding: 0px 5px;">164</li><li style="Box-sizing: border-Box; padding: 0px 5px;">165</li><li style="Box-sizing: border-Box; padding: 0px 5px;">166</li><li style="Box-sizing: border-Box; padding: 0px 5px;">167</li><li style="Box-sizing: border-Box; padding: 0px 5px;">168</li><li style="Box-sizing: border-Box; padding: 0px 5px;">169</li><li style="Box-sizing: border-Box; padding: 0px 5px;">170</li><li style="Box-sizing: border-Box; padding: 0px 5px;">171</li><li style="Box-sizing: border-Box; padding: 0px 5px;">172</li><li style="Box-sizing: border-Box; padding: 0px 5px;">173</li><li style="Box-sizing: border-Box; padding: 0px 5px;">174</li><li style="Box-sizing: border-Box; padding: 0px 5px;">175</li><li style="Box-sizing: border-Box; padding: 0px 5px;">176</li><li style="Box-sizing: border-Box; padding: 0px 5px;">177</li><li style="Box-sizing: border-Box; padding: 0px 5px;">178</li><li style="Box-sizing: border-Box; padding: 0px 5px;">179</li><li style="Box-sizing: border-Box; padding: 0px 5px;">180</li><li style="Box-sizing: border-Box; padding: 0px 5px;">181</li></ul> 
 以磁盘代替了内存，这里有一些关键点： 
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 绘图板功能完善以及终极优化的更多相关文章

HTML5拖拽功能实现的拼图游戏

本文通过实例代码给大家介绍了HTML5拖拽功能实现的拼图游戏，代码简单易懂，非常不错，具有一定的参考借鉴价值，需要的朋友参考下吧
使用Html5多媒体实现微信语音功能

这篇文章主要介绍了使用Html5多媒体实现微信语音功能,需要的朋友可以参考下
基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能

这篇文章主要介绍了基于Html5 canvas实现裁剪图片和马赛克功能及又拍云上传图片功能,需要的朋友可以参考下
html5中canvas图表实现柱状图的示例

本篇文章主要介绍了html5中canvas图表实现柱状图的示例，本文使用canvas来实现一个图表，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
有关HTML5页面在iPhoneX适配问题

这篇文章主要介绍了有关HTML5页面在iPhoneX适配问题,需要的朋友可以参考下
Html5 页面适配iPhoneX(就是那么简单)

这篇文章主要介绍了Html5 页面适配iPhoneX(就是那么简单),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
HTML5 图片悬停放大的实现代码示例

这篇文章主要介绍了HTML5 图片悬停放大的实现代码示例，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
H5页面适配iPhoneX(就是那么简单)

这篇文章主要介绍了H5页面适配iPhoneX(就是那么简单),文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
iOS 8 autolayout,VFL和margin等于或大于

这是一个错误还是我做错了？
ios – Multiline UILabel？

我需要插入UILabel多行文本.我做以下事情：arrEx由两个项组成,因此它应该是两个字符串.但是UITableViewCell只包含第一个字符串.在IB中,我将UILabelcell.exsInfoLabel的行数设置为0.解决方法试试这个：

随机推荐

Swift UITextField,UITextView,UISegmentedControl,UISwitch

下面我们通过一个demo来简单的实现下这些控件的功能.首先,我们拖将这几个控件拖到storyboard,并关联上相应的属性和动作.如图:关联上属性和动作后,看看实现的代码:
swift UISlider,UIStepper

我们用两个label来显示slider和stepper的值.再用张图片来显示改变stepper值的效果.首先,这三个控件需要全局变量声明如下然后,我们对所有的控件做个简单的布局:最后,当slider的值改变时,我们用一个label来显示值的变化,同样,用另一个label来显示stepper值的变化,并改变图片的大小:实现效果如下:
preferredFontForTextStyle字体设置之更改

即：
Swift没有异常处理，遇到功能性错误怎么办？

本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容，请发送邮件至dio@foxmail.com举报，一经查实，本站将立刻删除。
字典实战和UIKit初探

ios中数组和字典的应用Applicationschedule类别子项类别名称优先级数据包contactsentertainment接触UIKit学习用Swift调用CocoaTouchimportUIKitletcolors=[]varbackView=UIView(frame:CGRectMake(0.0,0.0,320.0,CGFloat(colors.count*50)))backView
swift语言IOS8开发战记21 Core Data2

上一话中我们简单地介绍了一些coredata的基本知识，这一话我们通过编程来实现coredata的使用。还记得我们在coredata中定义的那个Model么，上面这段代码会加载这个Model。定义完方法之后，我们对coredata的准备都已经完成了。最后强调一点，coredata并不是数据库，它只是一个框架，协助我们进行数据库操作，它并不关心我们把数据存到哪里。
swift语言IOS8开发战记22 Core Data3

上一话我们定义了与coredata有关的变量和方法，做足了准备工作，这一话我们来试试能不能成功。首先打开上一话中生成的Info类，在其中引用头文件的地方添加一个@objc，不然后面会报错，我也不知道为什么。
swift实战小程序1天气预报

在有一定swift基础的情况下，让我们来做一些小程序练练手，今天来试试做一个简单地天气预报。然后在btnpressed方法中依旧增加loadWeather方法.在loadWeather方法中加上信息的显示语句：运行一下看看效果，如图：虽然显示出来了，但是我们的text是可编辑状态的，在storyboard中勾选Editable，再次运行：大功告成，而且现在每次单击按钮，就会重新请求天气情况，大家也来试试吧。
【iOS学习01】swift ? and ! 的学习

如果不初始化就会报错。
swift语言IOS8开发战记23 Core Data4

接着我们需要把我们的Rest类变成一个被coredata管理的类，点开Rest类，作如下修改：关键字@NSManaged的作用是与实体中对应的属性通信，BinaryData对应的类型是NSData，CoreData没有布尔属性，只能用0和1来区分。进行如下操作，输入类名：建立好之后因为我们之前写的代码有些地方并不适用于coredata，所以编译器会报错，现在来一一解决。