Swift 全功能的绘图板开发

转载请注明出处：/article/1332880.html。







要做一个全功能的绘图板，至少要支持以下这些功能：

支持铅笔绘图（画点）

支持画直线

支持一些简单的图形（矩形、圆形等）

做一个真正的橡皮擦

能设置画笔的粗细

能设置画笔的颜色

能设置背景色或者背景图

能支持撤消与重做

…

我们先做一些基础性的工作，比如创建工程。

工程搭建

先创建一个

Single View Application

工程：




语言选择

Swift

：




为了最大程度的利用屏幕区域，我们完全隐藏掉状态栏，在

Info.plist

里修改或添加这两个参数：




然后进入到

Main.storyboard

，开始搭建我们的UI。

我们给已存在的

ViewController

的

View

添加一个

UIImageView

的子视图，背景色设为

Light Gray

，然后添加4个约束，由于要做一个全屏的画板，必须要让

Constraint to margins

保持没有选中的状态，否则左右两边会留下苹果建议的空白区域，最后把

User Interaction Enabled

打开：







然后我们回到

ViewController

的

View

上：

添加一个放工具栏的容器：

UIView

，为该View设置约束：




同样的不要选择

Contraint to margins

。

在该View里添加一个

UISegmentedControl

，并给SegmentedControl设置6个选项，分别是：

铅笔

直尺

虚线

矩形

圆形

橡皮擦

给这个SegmentedControl添加约束：




垂直居中，两边各留20，高度固定为28。

完整的UI及结构看起来像这样：




ImageView将会作为实际的绘制区域，顶部的SegmentedControl提供工具的选择。 到目前为止我们还没有写下一行代码，至此要开始编码了。



你可能会注意到Board有一部分被挡住了，这只是暂时的～

施工…

Board

我们创建一个

Board

类，继承自

UIImageView

，同时把这个类设置为

Main.storyboard

中

ImageView

的Class，这样当app启动的时候就会自动创建一个Board的实例了。

增加两个属性以及初始化方法：

var strokeWidth: CGFloat
var strokeColor: UIColor

override init() {
    self.strokeColor = UIColor.blackColor()
    self.strokeWidth = 1

    super.init()
}

required init(coder aDecoder: NSCoder) {
    self.strokeColor = UIColor.blackColor()
    self.strokeWidth = 1

    super.init(coder: aDecoder)
}

由于我们是依赖于touches方法来完成绘图过程，我们需要记录下每次touch的状态，比如

began

、

moved

、

ended

等，为此我们创建一个枚举，在touches方法中进行记录，并调用私有的绘图方法

drawingImage

：

enum DrawingState {
    case Began, Moved, Ended
}

class Board: UIImageView {

    private var drawingState: DrawingState!

    // 此处省略init方法与另外两个属性

    // MARK: - touches methods

    override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
        self.drawingState = .Began
        self.drawingImage()
    }

    override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
        self.drawingState = .Moved
        self.drawingImage()
    }

    override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
        self.drawingState = .Ended
        self.drawingImage()
    }

    // MARK: - drawing

    private func drawingImage() {
        // 暂时为空实现
    }
}

在我们实现drawingImage方法之前，我们先创建另外一个重要的组件：

BaseBrush

。

BaseBrush

顾名思义，

BaseBrush

将会作为一个绘图的基类而存在，我们会在它的基础上创建一系列的子类，以达到弹性的设计目的。为此，我们创建一个

BaseBrush

类，并实现一个

PaintBrush

接口：

import CoreGraphics

protocol PaintBrush {

    func supportedContinuousDrawing() -> Bool;

    func drawInContext(context: CGContextRef)
}

class BaseBrush : NSObject, PaintBrush {
    var beginPoint: CGPoint!
    var endPoint: CGPoint!
    var lastPoint: CGPoint?

    var strokeWidth: CGFloat!

    func supportedContinuousDrawing() -> Bool {
        return false
    }

    func drawInContext(context: CGContextRef) {
        assert(false, "must implements in subclass.")
    }
}

BaseBrush

实现了

PaintBrush

接口，

PaintBrush

声明了两个方法：

supportedContinuousDrawing，表示是否是连续不断的绘图

drawInContext，基于Context的绘图方法，子类必须实现具体的绘图

只要是实现了

PaintBrush

接口的类，我们就当作是一个绘图工具（如铅笔、直尺等），而

BaseBrush

除了实现

PaintBrush

接口以外，我们还为它增加了四个便利属性：

beginPoint，开始点的位置

endPoint，结束点的位置

lastPoint，最后一个点的位置（也可以称作是上一个点的位置）

strokeWidth，画笔的宽度

这么一来，子类也可以很方便的获取到当前的状态，并作一些深度定制的绘图方法。

lastPoint的意义：beginPoint和endPoint很好理解，beginPoint是手势刚识别时的点，只要手势不结束，那么beginPoint在手势识别期间是不会变的；endPoint总是表示手势最后识别的点；除了铅笔以外，其他的图形用这两个属性就够了，但是用铅笔在移动的时候，不能每次从beginPoint画到endPoint，如果是那样的话就是画直线了，而是应该从上一次画的位置（lastPoint）画到endPoint，这样才是连贯的线。

回到Board

我们实现了一个画笔的基类之后，就可以重新回到

Board

类了，毕竟我们之前的工作还没有做完，现在是时候完善

Board

类了。

我们用

Board

实际操纵

BaseBrush

，先为

Board

添加两个新的属性：

var brush: BaseBrush?

private var realImage: UIImage?

brush

对应到具体的画笔类，

realImage

保存当前的图形，重新修改touches方法，以便增加对

brush

属性的处理，完整的touches方法实现如下：

// MARK: - touches methods

override func touchesBegan(touches: NSSet, withEvent event: UIEvent) {
    if let brush = self.brush {
        brush.lastPoint = nil

        brush.beginPoint = touches.anyObject()!.locationInView(self)
        brush.endPoint = brush.beginPoint

        self.drawingState = .Began
        self.drawingImage()
    }
}

override func touchesMoved(touches: NSSet, withEvent event: UIEvent) {
    if let brush = self.brush {
        brush.endPoint = touches.anyObject()!.locationInView(self)

        self.drawingState = .Moved
        self.drawingImage()
    }
}

override func touchesCancelled(touches: NSSet!, withEvent event: UIEvent!) {
    if let brush = self.brush {
        brush.endPoint = nil
    }
}

override func touchesEnded(touches: NSSet, withEvent event: UIEvent) {
    if let brush = self.brush {
        brush.endPoint = touches.anyObject()!.locationInView(self)

        self.drawingState = .Ended

        self.drawingImage()
    }
}

我们需要防止

brush

为

nil

的情况，以及为

brush

设置好

beginPoint

和

endPoint

，之后我们就可以完善

drawingImage

方法了，实现如下：

private func drawingImage() {
    if let brush = self.brush {

        // 1.
        UIGraphicsBeginImageContext(self.bounds.size)

        // 2.
        let context = UIGraphicsGetCurrentContext()

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

        CGContextSetLineCap(context, kCGLineCapRound)
        CGContextSetLineWidth(context, self.strokeWidth)
        CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor)

        // 3.
        if let realImage = self.realImage {
            realImage.drawInRect(self.bounds)
        }

        // 4.
        brush.strokeWidth = self.strokeWidth
        brush.drawInContext(context);
        CGContextStrokePath(context)

        // 5.
        let previewImage = UIGraphicsGetImageFromCurrentImageContext()
        if self.drawingState == .Ended || brush.supportedContinuousDrawing() {
            self.realImage = previewImage
        }

        UIGraphicsEndImageContext()

        // 6.
        self.image = previewImage;

        brush.lastPoint = brush.endPoint
    }
}

步骤解析：

开启一个新的ImageContext，为保存每次的绘图状态作准备。

初始化context，进行基本设置（画笔宽度、画笔颜色、画笔的圆润度等）。

把之前保存的图片绘制进context中。

设置

brush

的基本属性，以便子类更方便的绘图；调用具体的绘图方法，并最终添加到context中。

从当前的context中，得到Image，如果是

ended

状态或者需要支持连续不断的绘图，则将Image保存到

realImage

中。

实时显示当前的绘制状态，并记录绘制的最后一个点。

这些工作完成以后，我们就可以开始写第一个工具了：铅笔工具。

铅笔工具

铅笔工具应该支持连续不断的绘图（不断的保存到realImage中），这也是我们给

PaintBrush

接口增加

supportedContinuousDrawing

方法的原因，考虑到用户的手指可能快速的移动，导致从一个点到另一个点有着跳跃性的动作，我们对铅笔工具采用画直线的方式来实现。

首先创建一个类，名为

PencilBrush

，继承自

BaseBrush

类，实现如下：

class PencilBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        if let lastPoint = self.lastPoint {
            CGContextMoveToPoint(context, lastPoint.x, lastPoint.y)
            CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
        } else {
            CGContextMoveToPoint(context, beginPoint.x, beginPoint.y)
            CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
        }
    }

    override func supportedContinuousDrawing() -> Bool {
        return true
    }
}

如果lastPoint为nil，则基于beginPoint画线，反之则基于lastPoint画线。

这样一来，一个铅笔工具就完成了，怎么样，很简单吧。

测试

到目前为止，我们的

ViewController

还保持着默认的状态，是时候先为铅笔工具写一些测试代码了。

在

ViewController

添加

board

属性，并与

Main.storyboard

中的Board关联起来；创建一个

brushes

属性，并为之赋值为：

var brushes = [PencilBrush()]

在

ViewController

中添加

switchBrush:

方法，并把

Main.storyboard

中的SegmentedControl的

ValueChanged

连接到

ViewController

的

switchBrush:

方法上，实现如下：

@IBAction func switchBrush(sender: UISegmentedControl) {
    assert(sender.tag < self.brushes.count, "!!!")

    self.board.brush = self.brushes[sender.selectedSegmentIndex]
}

最后在

viewDidLoad

方法中做一个初始化：

self.board.brush = brushes[0]

编译、运行，铅笔工具可以完美运行～！

其他的工具

接下来我们把其他的绘图工具也实现了。

其他的工具不像铅笔工具，不需要支持连续不断的绘图，所以也就不用覆盖

supportedContinuousDrawing

方法了。

直尺

创建一个

LineBrush

类，实现如下：

class LineBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextMoveToPoint(context, beginPoint.x, beginPoint.y)
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
    }
}

虚线

创建一个

DashLineBrush

类，实现如下：

class DashLineBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        let lengths: [CGFloat] = [self.strokeWidth * 3, self.strokeWidth * 3]
        CGContextSetLineDash(context, 0, lengths, 2);

        CGContextMoveToPoint(context, beginPoint.x, beginPoint.y)
        CGContextAddLineToPoint(context, endPoint.x, endPoint.y)
    }
}

这里我们就用到了

BaseBrush

的

strokeWidth

属性，因为我们想要创建一条动态的虚线。

矩形

创建一个

RectangleBrush

类，实现如下：

class RectangleBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextAddRect(context, CGRect(origin: CGPoint(x: min(beginPoint.x, endPoint.x), y: min(beginPoint.y, endPoint.y)),
            size: CGSize(width: abs(endPoint.x - beginPoint.x), height: abs(endPoint.y - beginPoint.y))))
    }
}

我们用到了一些计算，因为我们希望矩形的区域不是由beginPoint定死的。

圆形

创建一个

EllipseBrush

类，实现如下：

class EllipseBrush: BaseBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextAddEllipseInRect(context, CGRect(origin: CGPoint(x: min(beginPoint.x, endPoint.x), y: min(beginPoint.y, endPoint.y)),
            size: CGSize(width: abs(endPoint.x - beginPoint.x), height: abs(endPoint.y - beginPoint.y))))
    }
}

同样有一些计算，理由同上。

橡皮擦

从本文一开始就说过了，我们要做一个真正的橡皮擦，网上有很多的橡皮擦的实现其实就是把画笔颜色设置为背景色，但是如果背景色可以动态设置，甚至设置为一个渐变的图片时，这种方法就失效了，所以有些绘图app的背景色就是固定为白色的。

其实Apple的Quartz2D框架本身就是支持橡皮擦的，只用一个方法就可以完美实现。

让我们创建一个

EraserBrush

类，实现如下：

class EraserBrush: PencilBrush {

    override func drawInContext(context: CGContextRef) {
        CGContextSetBlendMode(context, kCGBlendModeClear);

        super.drawInContext(context)
    }
}

注意，与其他的工具不同，橡皮擦是继承自

PencilBrush

的，因为橡皮擦本身也是基于点的，而

drawInContext

里也只是加了一句：

CGContextSetBlendMode(context, kCGBlendModeClear);

加入这一句代码，一个真正的橡皮擦便实现了。

再次测试

现在我们的工程结构应该类似于这样：




我们修改下

ViewController

中的

brushes

属性的初始值：

var brushes = [PencilBrush(), LineBrush(), DashLineBrush(), RectangleBrush(), EllipseBrush(), EraserBrush()]

编译、运行：




除了橡皮擦擦除的范围太小以外，一切都很完美~!

设计思路

在继续完成剩下的功能之前，我想先对之前的代码进行些说明。

为什么不用drawRect方法

其实我最开始也是使用drawRect方法来完成绘制，但是感觉限制很多，比如context无法保存，还是要每次重画（虽然可以保存到一个BitMapContext里，但是这样与保存到image里有什么区别呢？）；后来用CALayer保存每一条CGPath，但是这样仍然不能避免每次重绘，因为需要考虑到橡皮擦和画笔属性之类的影响，这么一来还不如采用image的方式来保存最新绘图板。

既然定下了以image来保存绘图板，那么drawRect就不方便了，因为不能用

UIGraphicsBeginImageContext

方法来创建一个ImageContext。

ViewController与Board、BaseBrush之间的关系

在

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

方法上。

在

ViewController

里增加一个

toolar

属性，并把Xib中的

UIToolbar

连接到

toolbar

上。

UIToolbar配置好后，UI及视图层级如下：

RGBColorPicker

考虑到多个页面需要选取自定义的颜色，我们先创建一个工具类：

RGBColorPicker

，用于选择RGB颜色：

class RGBColorPicker: UIView {

    var colorChangedBlock: ((color: UIColor) -> Void)?

    private var sliders = [UISlider]()
    private var labels = [UILabel]()

    override init(frame: CGRect) {
        super.init(frame: frame)

        self.initial()
    }

    required init(coder aDecoder: NSCoder) {
        super.init(coder: aDecoder)

        self.initial()
    }

    private func initial() {
        self.backgroundColor = UIColor.clearColor()
        let trackColors = [UIColor.redColor(), UIColor.greenColor(), UIColor.blueColor()]

        for index in 1...3 {
            let slider = UISlider()
            slider.minimumValue = 0
            slider.value = 0
            slider.maximumValue = 255
            slider.minimumTrackTintColor = trackColors[index - 1]
            slider.addTarget(self, action: "colorChanged:", forControlEvents: .ValueChanged)
            self.addSubview(slider)
            self.sliders.append(slider)

            let label = UILabel()
            label.text = "0"
            self.addSubview(label)
            self.labels.append(label)
        }
    }

    override func layoutSubviews() {
        super.layoutSubviews()

        let sliderHeight = CGFloat(31)
        let labelWidth = CGFloat(29)
        let yHeight = self.bounds.size.height / CGFloat(sliders.count)

        for index in 0..<self.sliders.count {
            let slider = self.sliders[index]
            slider.frame = CGRect(x: 0, y: CGFloat(index) * yHeight, width: self.bounds.size.width - labelWidth - 5.0, height: sliderHeight)

            let label = self.labels[index]
            label.frame = CGRect(x: CGRectGetMaxX(slider.frame) + 5, y: slider.frame.origin.y, width: labelWidth, height: sliderHeight)
        }
    }

    override func intrinsicContentSize() -> CGSize {
        return CGSize(width: UIViewNoIntrinsicMetric, height: 107)
    }

    @IBAction private func colorChanged(slider: UISlider) {
        let color = UIColor(
            red: CGFloat(self.sliders[0].value / 255.0),
            green: CGFloat(self.sliders[1].value / 255.0),
            blue: CGFloat(self.sliders[2].value / 255.0),
            alpha: 1)

        let label = self.labels[find(self.sliders, slider)!]
        label.text = NSString(format: "%.0f", slider.value)

        if let colorChangedBlock = self.colorChangedBlock {
            colorChangedBlock(color: color)
        }
    }

    func setCurrentColor(color: UIColor) {
        var red: CGFloat = 0, green: CGFloat = 0, blue: CGFloat = 0
        color.getRed(&red, green: &green, blue: &blue, alpha: nil)
        let colors = [red, green, blue]

        for index in 0..<self.sliders.count {
            let slider = self.sliders[index]
            slider.value = Float(colors[index]) * 255

            let label = self.labels[index]
            label.text = NSString(format: "%.0f", slider.value)
        }
    }
}

这个工具类很简单，没有采用Auto Layout进行布局，因为

layoutSubviews

方法已经能很好的满足我们的需求了。当用户拖动任何一个

UISlider

的时候，我们能实时的通过

colorChangedBlock

回调给外部。它能展现一个这样的视图：




不过虽然该工具类本身没有采用Auto Layout进行布局，但是它还是支持Auto Layout的，当它被添加到某个Auto Layout的视图中的时候，Auto Layout布局系统可以通过

intrinsicContentSize

知道该视图的尺寸信息。

最后它还有一个

setCurrentColor

方法从外部接收一个UIColor，可以用于初始化。

画笔设置的UI

我打算在用户点击

画笔设置

的时候，从底部弹出一个控制面板（就像系统的

Control Center

那样），所以我们还要有一个像这样的设置UI：




具体的，创建一个

PaintingBrushSettingsView

类，同时创建一个

PaintingBrushSettingsView.xib

文件，并把xib中view的

Class

设为

PaintingBrushSettingsView

，设置view的背景色为透明：

放置一个title为“画笔粗细”的

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

PaintingBrushSettingsView

中添加

strokeColorPreview

属性，与之连接起来。

放置一个

UIView

，把它的Class改为

RGBColorPicker

，约束设为：left与顶部的UISlider相同，底部与superview的间距为0，右间距为10，与上一步中的UIView的垂直间距为5。

PaintingBrushSettingsView

类的完整代码如下：

class PaintingBrushSettingsView : UIView {

    var strokeWidthChangedBlock: ((strokeWidth: CGFloat) -> Void)?
    var strokeColorChangedBlock: ((strokeColor: UIColor) -> Void)?

    @IBOutlet private var strokeWidthSlider: UISlider!
    @IBOutlet private var strokeColorPreview: UIView!
    @IBOutlet private var colorPicker: RGBColorPicker!

    override func awakeFromNib() {
        super.awakeFromNib()

        self.strokeColorPreview.layer.borderColor = UIColor.blackColor().CGColor
        self.strokeColorPreview.layer.borderWidth = 1

        self.colorPicker.colorChangedBlock = {
            [unowned self] (color: UIColor) in

            self.strokeColorPreview.backgroundColor = color
            if let strokeColorChangedBlock = self.strokeColorChangedBlock {
                strokeColorChangedBlock(strokeColor: color)
            }
        }

        self.strokeWidthSlider.addTarget(self, action: "strokeWidthChanged:", forControlEvents: .ValueChanged)
    }

    func setBackgroundColor(color: UIColor) {
        self.strokeColorPreview.backgroundColor = color
        self.colorPicker.setCurrentColor(color)
    }

    func strokeWidthChanged(slider: UISlider) {
        if let strokeWidthChangedBlock = self.strokeWidthChangedBlock {
            strokeWidthChangedBlock(strokeWidth: CGFloat(slider.value))
        }
    }
}

strokeWidthChangedBlock

和

strokeColorChangedBlock

两个Block用于给外部传递状态。

setBackgroundColor

用于初始化。

关于 Swift 1.2

在 Swift 1.2里，不能用

setBackgroundColor

方法了，具体的，见Xcode 6.3的发布文档：Xcode 6.3 Release Notes，下面是用

didSet

代替原有的

setBackgroundColor

方法:

override var backgroundColor: UIColor? {
    didSet {
        self.strokeColorPreview.backgroundColor = self.backgroundColor
        self.colorPicker.setCurrentColor(self.backgroundColor!)

        super.backgroundColor = oldValue
    }
}

实现毛玻璃效果

在把

PaintingBrushSettingsView

显示出来之前，我们要先想一想以何种方式展现比较好，众所周知

Control Center

是有毛玻璃效果的，我们也想要这样的效果，而且不用自己实现。那如何产生效果? 答案是用

UIToolbar

就行了。

UIToolbar

本身就是带有毛玻璃效果的，只要你不设置背景色，并且

translucent

属性为true，“恰好”我们页面底部就有一个

UIToolbar

，我们把它拉高就可以插入展现

PaintingBrushSettingsView

了。

只要get到了这一点，毛玻璃效果就算实现了～～

测试画笔设置

我们在ViewController新增加几个属性：

var toolbarEditingItems: [UIBarButtonItem]?
var currentSettingsView: UIView?

@IBOutlet var toolbarConstraintHeight: NSLayoutConstraint!

toolbarConstraintHeight

连接到

Main.storyboard

中对应的约束上就行了。

toolbarEditingItems

能让我们在

UIToolbar

上显示不同的

items

，本来还需要一个

toolbarItems

属性的，因为

UIViewController

类本身就自带，我们便不用单独新增。

currentSettingsView

是用来保存当前展示的哪个设置页面，考虑到我们后面会增加

背景设置

，这个属性还是有必要的。

我们先写一个往toolbar上添加约束的工具方法：

func addConstraintsToToolbarForSettingsView(view: UIView) {
    view.setTranslatesAutoresizingMaskIntoConstraints(false)

    self.toolbar.addSubview(view)
    self.toolbar.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("H:|-0-[settingsView]-0-|",
        options: .DirectionLeadingToTrailing,
        metrics: nil,
        views: ["settingsView" : view]))
    self.toolbar.addConstraints(NSLayoutConstraint.constraintsWithVisualFormat("V:|-0-[settingsView(==height)]",
        options: .DirectionLeadingToTrailing,
        metrics: ["height" : view.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height],
        views: ["settingsView" : view]))
}

这个工具方法会把传入进来的view添加到toolbar上，同时添加相应的约束。注意高度的约束，我是通过

systemLayoutSizeFittingSize

方法计算出设置视图最佳的高度，这是为了达到更好的拓展性（背景设置与画笔设置所需要的高度很可能会不同）。

然后再增加一个

setupBrushSettingsView

方法：

func setupBrushSettingsView() {
    let brushSettingsView = UINib(nibName: "PaintingBrushSettingsView", bundle: nil).instantiateWithOwner(nil, options: nil).first as PaintingBrushSettingsView

    self.addConstraintsToToolbarForSettingsView(brushSettingsView)

    brushSettingsView.hidden = true
    brushSettingsView.tag = 1
    brushSettingsView.setBackgroundColor(self.board.strokeColor)

    brushSettingsView.strokeWidthChangedBlock = {
        [unowned self] (strokeWidth: CGFloat) -> Void in
        self.board.strokeWidth = strokeWidth
    }

    brushSettingsView.strokeColorChangedBlock = {
        [unowned self] (strokeColor: UIColor) -> Void in
        self.board.strokeColor = strokeColor
    }
}

我们在这个方法里实例化了一个

PaintingBrushSettingsView

，并添加到toolbar上，增加相应的约束，以及一些初始化设置和两个Block回调的处理。

然后修改

viewDidLoad

方法，增加以下行为：

//---
self.toolbarEditingItems = [
    UIBarButtonItem(barButtonSystemItem:.FlexibleSpace, target: nil, action: nil),
    UIBarButtonItem(title: "完成", style:.Plain, target: self, action: "endSetting")
]
self.toolbarItems = self.toolbar.items

self.setupBrushSettingsView()
//---

在

paintingBrushSettings

方法里响应点击：

@IBAction func paintingBrushSettings() {
    self.currentSettingsView = self.toolbar.viewWithTag(1)
    self.currentSettingsView?.hidden = false

    self.updateToolbarForSettingsView()
}

func updateToolbarForSettingsView() {
    self.toolbarConstraintHeight.constant = self.currentSettingsView!.systemLayoutSizeFittingSize(UILayoutFittingCompressedSize).height + 44

    self.toolbar.setItems(self.toolbarEditingItems, animated: true)
    UIView.beginAnimations(nil, context: nil)
    self.toolbar.layoutIfNeeded()
    UIView.commitAnimations()

    self.toolbar.bringSubviewToFront(self.currentSettingsView!)
}

updateToolbarForSettingsView

也是一个工具方法，用于更新toolbar的高度。

由于我们采用了Auto Layout进行布局，动画要通过调用

layoutIfNeeded

方法来实现。

响应点击“完成”按钮的

endSetting

方法：

@IBAction func endSetting() {
    self.toolbarConstraintHeight.constant = 44

    self.toolbar.setItems(self.toolbarItems, animated: true)

    UIView.beginAnimations(nil, context: nil)
    self.toolbar.layoutIfNeeded()
    UIView.commitAnimations()

    self.currentSettingsView?.hidden = true
}

这么一来画笔设置就做完了，代码应该还是比较好理解，编译、运行后，应该能看到：








完成度已经很高了^^！

背景设置

整体的框架基本上已经在之前的工作中搭好了，我们快速过掉这一节。

在

Main.storyboard

中增加了一个title为“背景设置”的

UIBarButtonItem

，并将action连接到

ViewController

的

backgroundSettings

方法上，你可以选择在插入“背景设置”之前，先插入一个

FlexibleSpace

的

UIBarButtonItem

。

创建

BackgroundSettingsVC

类，继承自

UIViewController

，这与画笔设置继承于

UIView

不同，我们希望背景设置可以在用户的相册中选择照片，而使用

UIImagePickerController

的前提是要实现

UIImagePickerControllerDelegate

、

UINavigationControllerDelegate

两个接口，如果让UIView来实现这两个接口会很奇怪。

创建一个

BackgroundSettingsVC.xib

文件：

放置一个title为“从相册中选择背景图”的UIButton，约束为：左、上边距为8，宽度固定为135，高度固定为30。

放置一个RGBColorPicker，约束为：左、右边距为8，与UIButton的垂直间距为20，底部与superview齐平。

把UIButton的

Touch Up Inside

事件连接到

BackgroundSettingsVC

的

pickImage

方法上；RGBColorPicker连接到

BackgroundSettingsVC

的

colorPicker

属性上。

看上去像这样：

BackgroundSettingsVC

类的完整代码：

class BackgroundSettingsVC : UIViewController, UIImagePickerControllerDelegate, UINavigationControllerDelegate {

    var backgroundImageChangedBlock: ((backgroundImage: UIImage) -> Void)?
    var backgroundColorChangedBlock: ((backgroundColor: UIColor) -> Void)?

    @IBOutlet private var colorPicker: RGBColorPicker!

    lazy private var pickerController: UIImagePickerController = {
        [unowned self] in
        let pickerController = UIImagePickerController()
        pickerController.delegate = self

        return pickerController
    }()

    override func awakeFromNib() {
        super.awakeFromNib()

        self.colorPicker.colorChangedBlock = {
            [unowned self] (color: UIColor) in
            if let backgroundColorChangedBlock = self.backgroundColorChangedBlock {
                backgroundColorChangedBlock(backgroundColor: color)
            }
        }
    }

    func setBackgroundColor(color: UIColor) {
        self.colorPicker.setCurrentColor(color)
    }

    @IBAction func pickImage() {
        self.presentViewController(self.pickerController, animated: true, completion: nil)
    }

    // MARK: UIImagePickerControllerDelegate Methods
    func imagePickerController(picker: UIImagePickerController, didFinishPickingMediaWithInfo info: [NSObject : AnyObject]) {
        let image = info[UIImagePickerControllerOriginalImage] as UIImage

        if let backgroundImageChangedBlock = self.backgroundImageChangedBlock {
            backgroundImageChangedBlock(backgroundImage: image)
        }

        self.dismissViewControllerAnimated(true, completion: nil)
    }

    // MARK: UINavigationControllerDelegate Methods
    func navigationController(navigationController: UINavigationController, willShowViewController viewController: UIViewController, animated: Bool) {
        UIApplication.sharedApplication().setStatusBarHidden(true, withAnimation: .None)
    }
}

同样用两个Block进行回调；

setBackgroundColor

公共方法用于设置内部的RGBColorPicker的初始颜色状态；在

UINavigationControllerDelegate

里隐藏系统默认显示的状态栏。

回到

ViewController

，我们对背景设置进行测试。

像

setupBrushSettingsView

方法一样，我们增加一个

setupBackgroundSettingsView

方法：

func setupBackgroundSettingsView() {
    let backgroundSettingsVC = UINib(nibName: "BackgroundSettingsVC", bundle: nil).instantiateWithOwner(nil, options: nil).first as BackgroundSettingsVC

    self.addConstraintsToToolbarForSettingsView(backgroundSettingsVC.view)

    backgroundSettingsVC.view.hidden = true
    backgroundSettingsVC.view.tag = 2
    backgroundSettingsVC.setBackgroundColor(self.board.backgroundColor!)

    self.addChildViewController(backgroundSettingsVC)

    backgroundSettingsVC.backgroundImageChangedBlock = {
        [unowned self] (backgroundImage: UIImage) in
        self.board.backgroundColor = UIColor(patternImage: backgroundImage)
    }

    backgroundSettingsVC.backgroundColorChangedBlock = {
        [unowned self] (backgroundColor: UIColor) in
        self.board.backgroundColor = backgroundColor
    }
}

修改viewDidLoad方法：

self.toolbarEditingItems = [
    UIBarButtonItem(barButtonSystemItem:.FlexibleSpace, target: nil, action: nil),
    UIBarButtonItem(title: "完成", style:.Plain, target: self, action: "endSetting")
]
self.toolbarItems = self.toolbar.items

self.setupBrushSettingsView()
self.setupBackgroundSettingsView() // Added~!!!

实现

backgroundSettings

方法：

@IBAction func backgroundSettings() {
    self.currentSettingsView = self.toolbar.viewWithTag(2)
    self.currentSettingsView?.hidden = false

    self.updateToolbarForSettingsView()
}

编译、运行，现在你可以用不同的背景色（或背景图）了！

全屏绘图

到目前为止，

Board

一直显示不全（事实上，我很早就实现了全屏绘图，但是优先级一直被我排在最后

），现在是时候来解决它了。

解决思路是这样的：当用户开始绘图的时候，我们把顶部和底部两个View隐藏；当用户结束绘图的时候，再让两个View显示。

为了获取用户的绘图状态，我们需要在

Board

里加个“钩子”：

// 增加一个Block回调
var drawingStateChangedBlock: ((state: DrawingState) -> ())?

private func drawingImage() {
    if let brush = self.brush {
        // hook
        if let drawingStateChangedBlock = self.drawingStateChangedBlock {
            drawingStateChangedBlock(state: self.drawingState)
        }
        UIGraphicsBeginImageContext(self.bounds.size)
        // ...

这样一来用户绘图的状态就在ViewController掌握中了。

ViewController想要控制两个View的话，还需要增加几个属性：

@IBOutlet var topView: UIView!
@IBOutlet var topViewConstraintY: NSLayoutConstraint!
@IBOutlet var toolbarConstraintBottom: NSLayoutConstraint!

然后在viewDidLoad方法里增加对“钩子”的处理：

self.board.drawingStateChangedBlock = {(state: DrawingState) -> () in
    if state != .Moved {
        UIView.beginAnimations(nil, context: nil)
        if state == .Began {
            self.topViewConstraintY.constant = -self.topView.frame.size.height
            self.toolbarConstraintBottom.constant = -self.toolbar.frame.size.height

            self.topView.layoutIfNeeded()
            self.toolbar.layoutIfNeeded()
        } else if state == .Ended {
            UIView.setAnimationDelay(1.0)
            self.topViewConstraintY.constant = 0
            self.toolbarConstraintBottom.constant = 0

            self.topView.layoutIfNeeded()
            self.toolbar.layoutIfNeeded()
        }
        UIView.commitAnimations()
    }
}

只有当状态为开始或结束的时候我们才需要更新UI状态，而且我们在结束的事件里延迟了1秒钟，这样用户可以暂时预览下全图。

依靠Auto Layout布局系统以及我们在钩子里对高度的处理，用户在设置页面绘图时也能完美运行。

保存到图库

最后一个功能：保存到图库！

在toolbar上插入一个title为“保存到图库”的

UIBarButtonItem

，还是可以先插入一个

FlexibleSpace

的

UIBarButtonItem

，然后把action连接到ViewController的

saveToAlbumy

方法上：

@IBAction func saveToAlbum() {
    UIImageWriteToSavedPhotosAlbum(self.board.takeImage(), self, "image:didFinishSavingWithError:contextInfo:", nil)
}

我为

Board

添加一个新的公共方法：takeImage：

func takeImage() -> UIImage {
    UIGraphicsBeginImageContext(self.bounds.size)

    self.backgroundColor?.setFill()
    UIRectFill(self.bounds)

    self.image?.drawInRect(self.bounds)

    let image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()

    return image
}

然后是一个方法指针的回调：

func image(image: UIImage, didFinishSavingWithError error: NSError?, contextInfo:UnsafePointer<Void>) {
    if let err = error {
        UIAlertView(title: "错误", message: err.localizedDescription, delegate: nil, cancelButtonTitle: "确定").show()
    } else {
        UIAlertView(title: "提示", message: "保存成功", delegate: nil, cancelButtonTitle: "确定").show()
    }
}

旅行到终点了～！

感谢一路的陪伴！

看了下，有些小长，文本+代码有2w3+，全部代码去除空行和空格有1w4+，直接贴代码会简单很多，但我始终觉得让代码完成功能并不是全部目的，代码背后隐藏的问题定义、设计、构建更有意义，毕竟软件开发完成“后”比完成“前”所花费的时间永远更多（除非是一个只有10行代码或者“一次性”的程序）。

希望与大家多多交流。

最后吐槽下CSDN新的Markdown编辑器，代码样式丑且不能自定义，而且有些代码高亮都无法识别。不过感觉草稿箱比以前更方便，问题主要还是集中在样式上，希望以后能不断改进，会一如既往的支持。

更新——撤消与重做功能

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

GitHub地址

DrawingBoard