转载请注明出处：http://www.jb51.cc/article/p-htigfqxi-ber.html。
要做一个全功能的绘图板，至少要支持以下这些功能：
支持铅笔绘图（画点） 支持画直线 支持一些简单的图形（矩形、圆形等） 做一个真正的橡皮擦 能设置画笔的粗细 能设置画笔的颜色 能设置背景色或者背景图 能支持撤消与重做 … 我们先做一些基础性的工作，比如创建工程。
工程搭建
先创建一个Single VIEw Application工程：
语言选择Swift：
为了最大程度的利用屏幕区域，我们完全隐藏掉状态栏，在Info.pList里修改或添加这两个参数：
然后进入到Main.storyboard，开始搭建我们的UI。
我们给已存在的VIEwController的VIEw添加一个UIImageVIEw的子视图，背景色设为light Gray，然后添加4个约束，由于要做一个全屏的画板，必须要让Constraint to margins保持没有选中的状态，否则左右两边会留下苹果建议的空白区域，最后把User Interaction Enabled打开：
然后我们回到VIEw上：
UIVIEw，为该VIEw设置约束：同样的不要选择
Contraint to margins。 在该VIEw里添加一个UISegmentedControl，并给SegmentedControl设置6个选项，分别是：
垂直居中，两边各留20，高度固定为28。
完整的UI及结构看起来像这样：
ImageVIEw将会作为实际的绘制区域，顶部的SegmentedControl提供工具的选择。 到目前为止我们还没有写下一行代码，至此要开始编码了。
你可能会注意到Board有一部分被挡住了，这只是暂时的～
施工… Board
我们创建一个Board类，继承自UIImageVIEw，同时把这个类设置为Main.storyboard中ImageVIEw的Class，这样当app启动的时候就会自动创建一个Board的实例了。
增加两个属性以及初始化方法：
<code >var strokeWIDth: <span >CGfloat</span>var strokecolor: <span >UIcolor</span>overrIDe init() { <span >self</span><span >.strokecolor</span> = <span >UIcolor</span><span >.blackcolor</span>() <span >.strokeWIDth</span> = <span >1</span> <span >super</span><span >.init</span>()}required init(coder aDecoder: NSCoder) { <span >.init</span>(coder: aDecoder)}</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></ul> 由于我们是依赖于touches方法来完成绘图过程，我们需要记录下每次touch的状态，比如began、moved、ended等，为此我们创建一个枚举，在touches方法中进行记录，并调用私有的绘图方法drawingImage：
<code ><span >enum</span> DrawingState { <span >case</span> Began,Moved,Ended}class Board: UIImageVIEw { <span >private</span> <span >var</span> drawingState: DrawingState! // 此处省略init方法与另外两个属性 // MARK: - touches methods <span >overrIDe</span> func <span >touchesBegan</span>(touches: NSSet,withEvent <span >event</span>: UIEvent) { self.drawingState = .Began self.drawingImage() } <span >overrIDe</span> func touchesMoved(touches: NSSet,136); Box-sizing: border-Box;">event</span>: UIEvent) { self.drawingState = .Moved self.drawingImage() } <span >overrIDe</span> func touchesEnded(touches: NSSet,136); Box-sizing: border-Box;">event</span>: UIEvent) { self.drawingState = .Ended self.drawingImage() } <span >// MARK: - drawing</span> <span >private</span> func <span >drawingImage</span>() { <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><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></ul> 在我们实现drawingImage方法之前，我们先创建另外一个重要的组件：BaseBrush。
顾名思义，BaseBrush将会作为一个绘图的基类而存在，我们会在它的基础上创建一系列的子类，以达到d性的设计目的。为此，我们创建一个BaseBrush类，并实现一个PaintBrush接口：
<code >import</span> CoreGraphicsprotocol PaintBrush { <span >func</span> supportedContinuousDrawing() -> Bool; <span >func</span> drawInContext(context: CGContextRef)}class BaseBrush : NSObject,PaintBrush { <span >var</span> beginPoint: CGPoint! <span >var</span> endPoint: CGPoint! <span >var</span> lastPoint: CGPoint? <span >var</span> strokeWIDth: CGfloat! <span >func</span> supportedContinuousDrawing() -> Bool { <span >return</span> <span >false</span> } <span >func</span> drawInContext(context: CGContextRef) { assert(<span >false</span>,<span >"must implements in subclass."</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></ul> BaseBrush实现了PaintBrush接口，PaintBrush声明了两个方法：
只要是实现了PaintBrush接口的类，我们就当作是一个绘图工具（如铅笔、直尺等），而BaseBrush除了实现PaintBrush接口以外，我们还为它增加了四个便利属性：
这么一来，子类也可以很方便的获取到当前的状态，并作一些深度定制的绘图方法。
回到BoardlastPoint的意义：beginPoint和endPoint很好理解，beginPoint是手势刚识别时的点，只要手势不结束，那么beginPoint在手势识别期间是不会变的；endPoint总是表示手势最后识别的点；除了铅笔以外，其他的图形用这两个属性就够了，但是用铅笔在移动的时候，不能每次从beginPoint画到endPoint，如果是那样的话就是画直线了，而是应该从上一次画的位置（lastPoint）画到endPoint，这样才是连贯的线。
我们实现了一个画笔的基类之后，就可以重新回到Board类了，毕竟我们之前的工作还没有做完，现在是时候完善Board类了。
我们用Board实际 *** 纵BaseBrush，先为Board添加两个新的属性：
brush对应到具体的画笔类，realimage保存当前的图形，重新修改touches方法，以便增加对brush属性的处理，完整的touches方法实现如下：<code >// MARK: - touches methodsoverrIDe func touchesBegan(touches: NSSet,withEvent event: UIEvent) { if let brush = self<span >.brush</span> { brush<span >.lastPoint</span> = nil brush<span >.beginPoint</span> = touches<span >.anyObject</span>()!<span >.locationInVIEw</span>(self) brush<span >.endPoint</span> = brush<span >.beginPoint</span> self<span >.drawingState</span> = <span >.Began</span> self<span >.drawingImage</span>() }}overrIDe func touchesMoved(touches: NSSet,68); Box-sizing: border-Box;">.endPoint</span> = touches<span >.locationInVIEw</span>(self) self<span >.Moved</span> self<span >.drawingImage</span>() }}overrIDe func touchesCancelled(touches: NSSet!,withEvent event: UIEvent!) { if let brush = self<span >.endPoint</span> = nil }}overrIDe func touchesEnded(touches: NSSet,68); Box-sizing: border-Box;">.Ended</span> self<span >.drawingImage</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><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></ul>我们需要防止
brush为nil的情况，以及为brush设置好beginPoint和endPoint，之后我们就可以完善drawingImage方法了，实现如下：<code >private</span> func drawingImage() { <span >if</span> <span >let</span> brush <span >=</span> <span >self</span><span >.</span>brush { <span >// 1.</span> UIGraphicsBeginImageContext(<span >.</span>bounds<span >.</span>size) <span >// 2.</span> <span >let</span> context <span >=</span> UIGraphicsGetCurrentContext() UIcolor<span >.</span>clearcolor()<span >.</span>setFill() UIRectFill(<span >.</span>bounds) CGContextSetlineCap(context,kCGlineCapRound) CGContextSetlinewidth(context,<span >.</span>strokeWIDth) CGContextSetstrokecolorWithcolor(context,102); Box-sizing: border-Box;">.</span>strokecolor<span >.</span>CGcolor) <span >// 3.</span> <span >let</span> realimage <span >.</span>realimage { realimage<span >.</span>drawInRect(<span >.</span>bounds) } <span >// 4.</span> brush<span >.</span>strokeWIDth <span >.</span>strokeWIDth brush<span >.</span>drawInContext(context); CGContextstrokePath(context) <span >// 5.</span> <span >let</span> prevIEwImage <span >=</span> UIGraphicsGetimageFromCurrentimageContext() <span >if</span> <span >.</span>drawingState <span >==</span> <span >.</span>Ended <span >||</span> brush<span >.</span>supportedContinuousDrawing() { <span >.</span>realimage <span >=</span> prevIEwImage } UIGraphicsEndImageContext() <span >// 6.</span> <span >.</span>image <span >=</span> prevIEwImage; brush<span >.</span>lastPoint <span >=</span> brush<span >.</span>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></ul>步骤解析：
开启一个新的ImageContext，为保存每次的绘图状态作准备。 初始化context，进行基本设置（画笔宽度、画笔颜色、画笔的圆润度等）。 把之前保存的图片绘制进context中。 设置brush的基本属性，以便子类更方便的绘图；调用具体的绘图方法，并最终添加到context中。 从当前的context中，得到Image，如果是ended状态或者需要支持连续不断的绘图，则将Image保存到realimage中。 实时显示当前的绘制状态，并记录绘制的最后一个点。这些工作完成以后，我们就可以开始写第一个工具了：铅笔工具。
铅笔工具
铅笔工具应该支持连续不断的绘图（不断的保存到realimage中），这也是我们给
PaintBrush接口增加supportedContinuousDrawing方法的原因，考虑到用户的手指可能快速的移动，导致从一个点到另一个点有着跳跃性的动作，我们对铅笔工具采用画直线的方式来实现。
首先创建一个类，名为PencilBrush，继承自BaseBrush类，实现如下：如果lastPoint为nil，则基于beginPoint画线，反之则基于lastPoint画线。
这样一来，一个铅笔工具就完成了，怎么样，很简单吧。
测试到目前为止，我们的
VIEwController还保持着默认的状态，是时候先为铅笔工具写一些测试代码了。
在VIEwController添加board属性，并与Main.storyboard中的Board关联起来；创建一个brushes属性，并为之赋值为：<code ><span >var brushes </span>=<span > [PencilBrush()]</span></code><ul ><li >1</li></ul>在
VIEwController中添加switchBrush:方法，并把Main.storyboard中的SegmentedControl的ValueChanged连接到switchBrush:方法上，实现如下：最后在
vIEwDIDLoad方法中做一个初始化：
self.board.brush = brushes[0]
编译、运行，铅笔工具可以完美运行～！
其他的工具接下来我们把其他的绘图工具也实现了。
直尺
其他的工具不像铅笔工具，不需要支持连续不断的绘图，所以也就不用覆盖supportedContinuousDrawing方法了。创建一个
lineBrush类，实现如下：<code ><span ><span >class</span> <span >lineBrush</span>: <span >BaseBrush</span> { overrIDe func drawInContext<span >(<span >context</span>: <span >CGContextRef</span>)</span> { <span >CGContextMovetoPoint</span><span >(<span >context</span>,<span >beginPoint</span>.<span >x</span>,102);">y</span>)</span> <span >CGContextAddlinetoPoint</span><span >(<span >endPoint</span>.<span >y</span>)</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></ul>虚线创建一个
DashlineBrush类，实现如下：这里我们就用到了
矩形BaseBrush的strokeWIDth属性，因为我们想要创建一条动态的虚线。创建一个
RectangleBrush类，实现如下：我们用到了一些计算，因为我们希望矩形的区域不是由beginPoint定死的。
圆形创建一个
EllipseBrush类，实现如下：同样有一些计算，理由同上。
橡皮擦从本文一开始就说过了，我们要做一个真正的橡皮擦，网上有很多的橡皮擦的实现其实就是把画笔颜色设置为背景色，但是如果背景色可以动态设置，甚至设置为一个渐变的图片时，这种方法就失效了，所以有些绘图app的背景色就是固定为白色的。
其实Apple的Quartz2D框架本身就是支持橡皮擦的，只用一个方法就可以完美实现。
让我们创建一个EraserBrush类，实现如下：注意，与其他的工具不同，橡皮擦是继承自
PencilBrush的，因为橡皮擦本身也是基于点的，而drawInContext里也只是加了一句：<code >CGContextSetBlendMode(<span >context</span>,kCGBlendModeClear);</code><ul ><li >1</li></ul>加入这一句代码，一个真正的橡皮擦便实现了。
再次测试现在我们的工程结构应该类似于这样：
我们修改下VIEwController中的brushes属性的初始值：编译、运行：
除了橡皮擦擦除的范围太小以外，一切都很完美~!
设计思路在继续完成剩下的功能之前，我想先对之前的代码进行些说明。
为什么不用drawRect方法其实我最开始也是使用drawRect方法来完成绘制，但是感觉限制很多，比如context无法保存，还是要每次重画（虽然可以保存到一个BitMapContext里，但是这样与保存到image里有什么区别呢？）；后来用CALayer保存每一条CGPath，但是这样仍然不能避免每次重绘，因为需要考虑到橡皮擦和画笔属性之类的影响，这么一来还不如采用image的方式来保存最新绘图板。
VIEwController与Board、BaseBrush之间的关系
既然定下了以image来保存绘图板，那么drawRect就不方便了，因为不能用UIGraphicsBeginImageContext方法来创建一个ImageContext。在
策略设计模式VIEwController、Board和BaseBrush这三者之间，虽然VC要知道另外两个组件，但是仅限于选择对应的工具给Board，Board本身并不知道当前的brush是哪个brush，也不需要知道其内部实现，只管调用对应的brush就行了；BaseBrush（及其子类）也并不知道自己将会被用于哪，它们只需要实现自己的算法即可。类似于这样的图：
实际上这里包含了两个设计模式。
策略设计模式的UML图：
策略设计模式在iOS中也应用广泛，如AFNetworking的AFhttpRequestSerializer和AFhttpResponseSerializer的设计，通过在运行时动态的改变委托对象，变换行为，使程序模块之间解耦、提高应变能力。
以我们的绘图板为例，输出不同的图形就意味着不同的算法，用户可根据不同的需求来选择某一种算法，即BaseBrush及其子类做具体的封装，这样的好处是每一个子类只关心自己的算法，达到了高聚合的原则，高级模块（Board）不用关心具体实现。
想象一下，如果是让Board里自身来处理这些算法，那代码中无疑会充斥很多与算法选择相关的逻辑，而且每增加一个算法都需要重新修改Board类，这又与代码应该对拓展开放、对修改关闭原则有了冲突，而且每个类也应该只有一个责任。
通过采用策略模式我们实现了一个好维护、易拓展的程序（妈妈再也不用担心工具栏不够用了^^）。策略模式的定义：定义一个算法群，把每一个算法分别封装起来，让它们之间可以互相替换，使算法的变化独立于使用它的用户之上。
模板方法在传统的策略模式中，每一个算法类都独自完成整个算法过程，例如一个网络解析程序，可能有一个算法用于解析
JsON，有另一个算法用于解析XML等（另外一个例子是压缩程序，用ZIP或RAR算法），独自完成整个算法对灵活性更好，但免不了会有重复代码，在DrawingBoard里我们做一个折中，尽量保证灵活性，又最大限度地避免重复代码。
我们将BaseBrush的角色提升为算法的基类，并提供一些便利的属性（如beginPoint、endPoint、strokeWIDth等），然后在Board的drawingImage方法里对BaseBrush的接口进行调用，而BaseBrush不会知道自己的接口是如何联系起来的，虽然supportedContinuousDrawing（这是一个“钩子”）甚至影响了算法的流程（铅笔需要实时绘图）。
我们用drawingImage搭建了一个算法的骨架，看起来像是模板方法的UML图：
图中右边的方框代表模板方法。
BaseBrush通过提供抽象方法(drawInContext)、具体方法或钩子方法(supportedContinuousDrawing)来对应算法的每一个步骤，让其子类可以重定义或实现这些步骤。同时，让模板方法（即dawingImage）定义一个算法的骨架，模板方法不仅可以调用在抽象类中实现的基本方法，也可以调用在抽象类的子类中实现的基本方法，还可以调用其他对象中的方法。
除了对算法的封装以外，模板方法还能防止“循环依赖”，即高层组件依赖低层组件，反过来低层组件也依赖高层组件。想像一下，如果既让Board选择具体的算法子类，又让算法类直接调用drawingImage方法（不提供钩子，直接把Board的事件下发下去），那到时候就热闹了，这些类串在一起难以理解，又不好维护。模板方法的定义：在一个方法中定义一个算法的骨架，而将一些步骤延迟到子类中。模板方法使得子类可以在不改变算法结构的情况下，重新定义算法中的某些步骤。
其实模式都很简单，很多人在工作中会思考如何让自己的代码变得更好，“情不自禁”地就会慢慢实现这些原则，了解模式的设计意图，有助于在遇到需要折中的地方更加明白如何在设计上取舍。
以上就是我设计时的思路，说完了，接下来还要完成的工作有：
提供对画笔颜色、粗细的设置 背景设置 全屏绘图（不能让Board一直显示不全）先从画笔开始，Let’s go!
画笔设置不管是画笔还是背景设置，我们都要有一个能提供设置的工具栏。
设置工具栏所以我们往
拖一个Board上再盖一个UIToolbar，与顶部的VIEw类似：UIToolbar到Board的父类上，与Board的视图层级平级。 设置UIToolbar的约束：左、右、下间距为0，高为44：
往UIToolbar上拖一个UIbarbuttonItem，Title就写：画笔设置。 在VIEwController里增加一个paintingBrushSettings方法，并把UIbarbuttonItem的action连接paintingBrushSettings方法上。 在toolar属性，并把Xib中的UIToolbar连接到toolbar上。UIToolbar配置好后，UI及视图层级如下：
RGBcolorPicker
考虑到多个页面需要选取自定义的颜色，我们先创建一个工具类：
RGBcolorPicker，用于选择RGB颜色：这个工具类很简单，没有采用auto Layout进行布局，因为
画笔设置的UIlayoutSubvIEws方法已经能很好的满足我们的需求了。当用户拖动任何一个UiSlider的时候，我们能实时的通过colorChangedBlock回调给外部。它能展现一个这样的视图：
不过虽然该工具类本身没有采用auto Layout进行布局，但是它还是支持auto Layout的，当它被添加到某个auto Layout的视图中的时候，auto Layout布局系统可以通过intrinsicContentSize知道该视图的尺寸信息。
最后它还有一个setCurrentcolor方法从外部接收一个UIcolor，可以用于初始化。我打算在用户点击
放置一个Title为“画笔粗细”的画笔设置的时候，从底部d出一个控制面板（就像系统的Control Center那样），所以我们还要有一个像这样的设置UI：
具体的，创建一个PaintingBrushSettingsVIEw类，同时创建一个PaintingBrushSettingsVIEw.xib文件，并把xib中vIEw的Class设为PaintingBrushSettingsVIEw，设置vIEw的背景色为透明：UILabel，约束设为：宽度固定为68，高度固定为21，左和上边距为8。 放置一个Title为“1”的UILabel，“1”与“画笔粗细”的垂直间距为10，宽度固定为10，高度固定为21，与supervIEw的左边距为10。 放置一个UiSlider，用于调节画笔的粗细，与“1”的水平间距为5，并与“1”垂直居中，高度固定为30，宽度暂时不设，在PaintingBrushSettingsVIEw中添加strokeWIDthSlIDer属性，与之连接起来。 放置一个Title为“20”的UILabel，约束设为：宽度固定为20，高度固定为21，top与“1”相同，与supervIEw的右间距为10。并把上一步中的UiSlider的右间距设为与“20”相隔5。 放置一个Title为“画笔颜色”的UILabel，宽、高、left与“画笔粗细”相同，与上面UiSlider的垂直间距设为12。 放置一个UIVIEw至“画笔颜色”下方（上图中被选中的那个UIVIEw），宽度固定为50，高度固定为30，left与“画笔颜色”相同，并且与“画笔颜色”的垂直间距为5，在strokecolorPrevIEw属性，与之连接起来。 放置一个UIVIEw，把它的Class改为RGBcolorPicker，约束设为：left与顶部的UiSlider相同，底部与supervIEw的间距为0，右间距为10，与上一步中的UIVIEw的垂直间距为5。
PaintingBrushSettingsVIEw类的完整代码如下：关于 Swift 1.2
strokeWIDthChangedBlock和strokecolorChangedBlock两个Block用于给外部传递状态。setBackgroundcolor用于初始化。在 Swift 1.2里，不能用
setBackgroundcolor方法了，具体的，见Xcode 6.3的发布文档：Xcode 6.3 Release Notes，下面是用dIDSet代替原有的setBackgroundcolor方法:实现毛玻璃效果在把
测试画笔设置PaintingBrushSettingsVIEw显示出来之前，我们要先想一想以何种方式展现比较好，众所周知Control Center是有毛玻璃效果的，我们也想要这样的效果，而且不用自己实现。那如何产生效果? 答案是用UIToolbar就行了。
UIToolbar本身就是带有毛玻璃效果的，只要你不设置背景色，并且translucent属性为true，“恰好”我们页面底部就有一个UIToolbar，我们把它拉高就可以插入展现PaintingBrushSettingsVIEw了。
只要get到了这一点，毛玻璃效果就算实现了～～
我们在VIEwController新增加几个属性：
<code >var</span> toolbarEditingItems: [UIbarbuttonItem]?<span >var</span> currentSettingsVIEw: UIVIEw?<span >@IBOutlet</span> <span >var</span> toolbarConstraintHeight: NSLayoutConstraint!</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li></ul>
toolbarConstraintHeight连接到Main.storyboard中对应的约束上就行了。toolbarEditingItems能让我们在UIToolbar上显示不同的items，本来还需要一个toolbaritems属性的，因为UIVIEwController类本身就自带，我们便不用单独新增。currentSettingsVIEw是用来保存当前展示的哪个设置页面，考虑到我们后面会增加背景设置，这个属性还是有必要的。
我们先写一个往toolbar上添加约束的工具方法：这个工具方法会把传入进来的vIEw添加到toolbar上，同时添加相应的约束。注意高度的约束，我是通过
systemLayoutSizefittingSize方法计算出设置视图最佳的高度，这是为了达到更好的拓展性（背景设置与画笔设置所需要的高度很可能会不同）。
然后再增加一个setupBrushSettingsVIEw方法：我们在这个方法里实例化了一个
PaintingBrushSettingsVIEw，并添加到toolbar上，增加相应的约束，以及一些初始化设置和两个Block回调的处理。
然后修改vIEwDIDLoad方法，增加以下行为：在
paintingBrushSettings方法里响应点击：
updatetoolbarForSettingsVIEw也是一个工具方法，用于更新toolbar的高度。
由于我们采用了auto Layout进行布局，动画要通过调用layoutIfNeeded方法来实现。
响应点击“完成”按钮的endSetting方法：这么一来画笔设置就做完了，代码应该还是比较好理解，编译、运行后，应该能看到：
完成度已经很高了^^！
背景设置整体的框架基本上已经在之前的工作中搭好了，我们快速过掉这一节。
放置一个Title为“从相册中选择背景图”的UIbutton，约束为：左、上边距为8，宽度固定为135，高度固定为30。 放置一个RGBcolorPicker，约束为：左、右边距为8，与UIbutton的垂直间距为20，底部与supervIEw齐平。 把UIbutton的
在Main.storyboard中增加了一个Title为“背景设置”的UIbarbuttonItem，并将action连接到backgroundSettings方法上，你可以选择在插入“背景设置”之前，先插入一个FlexibleSpace的UIbarbuttonItem。
创建BackgroundSettingsVC类，继承自UIVIEwController，这与画笔设置继承于UIVIEw不同，我们希望背景设置可以在用户的相册中选择照片，而使用UIImagePickerController的前提是要实现UIImagePickerControllerDelegate、UINavigationControllerDelegate两个接口，如果让UIVIEw来实现这两个接口会很奇怪。
创建一个BackgroundSettingsVC.xib文件：touch Up InsIDe事件连接到BackgroundSettingsVC的pickImage方法上；RGBcolorPicker连接到colorPicker属性上。看上去像这样：
BackgroundSettingsVC类的完整代码：同样用两个Block进行回调；
setBackgroundcolor公共方法用于设置内部的RGBcolorPicker的初始颜色状态；在UINavigationControllerDelegate里隐藏系统默认显示的状态栏。
回到VIEwController，我们对背景设置进行测试。
像setupBrushSettingsVIEw方法一样，我们增加一个setupBackgroundSettingsVIEw方法：修改vIEwDIDLoad方法：
实现
backgroundSettings方法：<code ><span >@IBAction</span> func backgroundSettings() { <span >self</span>.currentSettingsVIEw = <span >self</span>.toolbar.vIEwWithTag(<span >2</span>) <span >self</span>.currentSettingsVIEw?.hIDden = <span >false</span> <span >self</span>.updatetoolbarForSettingsVIEw()}</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li></ul>编译、运行，现在你可以用不同的背景色（或背景图）了！
全屏绘图到目前为止，
Board一直显示不全（事实上，我很早就实现了全屏绘图，但是优先级一直被我排在最后），现在是时候来解决它了。
解决思路是这样的：当用户开始绘图的时候，我们把顶部和底部两个VIEw隐藏；当用户结束绘图的时候，再让两个VIEw显示。
为了获取用户的绘图状态，我们需要在Board里加个“钩子”：这样一来用户绘图的状态就在VIEwController掌握中了。
VIEwController想要控制两个VIEw的话，还需要增加几个属性：然后在vIEwDIDLoad方法里增加对“钩子”的处理：
只有当状态为开始或结束的时候我们才需要更新UI状态，而且我们在结束的事件里延迟了1秒钟，这样用户可以暂时预览下全图。
依靠auto Layout布局系统以及我们在钩子里对高度的处理，用户在设置页面绘图时也能完美运行。
保存到图库最后一个功能：保存到图库！
在toolbar上插入一个Title为“保存到图库”的UIbarbuttonItem，还是可以先插入一个UIbarbuttonItem，然后把action连接到VIEwController的savetoAlbumy方法上：<code ><span >@<span >IBAction</span> func <span >savetoAlbum()</span> </span>{ <span >UIImageWritetoSavedPhotosAlbum</span>(<span >self</span><span >.board</span><span >.takeImage</span>(),<span >self</span>,"<span >image</span><span >:dIDFinishSavingWithError</span><span >:contextInfo</span><span >:"</span>,0); Box-sizing: border-Box;">nil</span>)}</code><ul ><li >1</li><li >2</li><li >3</li></ul>我为
Board添加一个新的公共方法：takeImage：然后是一个方法指针的回调：
<code >func image(image: UIImage,dIDFinishSavingWithError <span >error</span>: NSError?,contextInfo:UnsafePointer<VoID>) { <span >let</span> <span >err</span> = <span >error</span> { UIAlertVIEw(Title: <span >"错误"</span>,message: <span >err</span>.localizedDescription,delegate: nil,cancelbuttonTitle: <span >"确定"</span>).show() } <span >else</span> { UIAlertVIEw(Title: <span >"提示"</span>,message: <span >"保存成功"</span>,0); Box-sizing: border-Box;">"确定"</span>).show() }}</code><ul ><li >1</li><li >2</li><li >3</li><li >4</li><li >5</li><li >6</li><li >7</li></ul>
旅行到终点了～！
感谢一路的陪伴！看了下，有些小长，文本+代码有2w3+，全部代码去除空行和空格有1w4+，直接贴代码会简单很多，但我始终觉得让代码完成功能并不是全部目的，代码背后隐藏的问题定义、设计、构建更有意义，毕竟软件开发完成“后”比完成“前”所花费的时间永远更多（除非是一个只有10行代码或者“一次性”的程序）。
希望与大家多多交流。最后吐槽下CSDN新的Markdown编辑器，代码样式丑且不能自定义，而且有些代码高亮都无法识别。不过感觉草稿箱比以前更方便，问题主要还是集中在样式上，希望以后能不断改进，会一如既往的支持。
更新——撤消与重做功能Swift 绘图板功能完善以及终极优化
GitHub地址DrawingBoard
总结以上是内存溢出为你收集整理的Swift 全功能的绘图板开发全部内容，希望文章能够帮你解决Swift 全功能的绘图板开发所遇到的程序开发问题。
如果觉得内存溢出网站内容还不错，欢迎将内存溢出网站推荐给程序员好友。
欢迎分享，转载请注明来源：内存溢出
微信扫一扫
支付宝扫一扫
评论列表（0条）