本文內容參考自 傳送門。原文是用 OC 寫的，我把它改成了 Swift 的。

我們先來看看效果圖：

第一幅圖是我們畫了一個 “iOS” 的影象，第二幅圖是我們點選儲存成功，第三幅圖是可以在相簿中看到我們剛才畫的圖。

感覺很不錯有木有？接下來我們就來說說是怎麼實現的。

我們分兩部分來說：上半部分的畫圖板和下半部分的控制區。

上半部分的畫圖板是我們自定義的 view，我們設定如下屬性：

class MyView: UIView {
    var color = UIColor.redColor() // 線條顏色
    var lineWidth : Float = 1.0 // 線條寬度
    private var allLine: [Dictionary<String, AnyObject>] = [] // 儲存已有的線條
    private var cancelLine: [Dictionary<String, AnyObject>] = [] // 儲存被撤銷的線條
    private var bezier = UIBezierPath() // 貝賽爾曲線
}
 

其中線條的顏色和寬度在 controller 中要用到，其餘的三個不需要所以我們設定成私有的 private。

先說說後退功能，它其實非常簡單。

allLine 和 cancelLine 這兩個陣列就相當於兩個棧。後退時，讓已有的一條線出棧，進入到撤銷線條的棧中。

具體的程式碼其實只有短短數行：

func backImage() { // 兩個陣列相當於兩個棧。後退時，讓已有的一條線出棧，進入到撤銷線條的棧中。
    if allLine.isEmpty == false { // 如果陣列不為空才執行
        cancelLine.append(allLine.last!) // 入棧
        allLine.removeLast() // 出棧
        setNeedsDisplay() // 重繪介面
    }
}
 

前進功能正好和後退相反。前進時，讓被撤銷的一條線出棧，進入到已有線條的棧中。

func forwardImage() { // 前進時正好與後退相反，讓被撤銷的一條線條出棧，進入到已有線條的棧中。
    if cancelLine.isEmpty == false { // 如果陣列不為空才執行
        allLine.append(cancelLine.last!) // 入棧
        cancelLine.removeLast() // 出棧
        setNeedsDisplay() // 重繪介面
    }
}

接下來說說貝賽爾曲線。對於本例，簡單來說就是：

1。在每次開始觸控時新建一個貝賽爾曲線並存入陣列中，記錄下觸控的座標作為貝賽爾曲線的當前座標。

2。在滑動時記錄每一瞬時的座標，更新貝賽爾曲線的當前座標為這個新座標。

3。重新繪製介面。

4。執行第二步。直到這次觸控結束為止。

開始觸控時的程式碼如下：

override func touchesBegan(touches: Set<UITouch>, withEvent event: UIEvent?) {
    bezier = UIBezierPath() // 新建貝塞爾曲線
    let point = touches.first!.locationInView(self) // 獲取觸控的點
    bezier.moveToPoint(point) // 把剛觸控的點設定為bezier的起點
    var tmpDic = Dictionary<String, AnyObject>()
    tmpDic["color"] = color
    tmpDic["lineWidth"] = lineWidth
    tmpDic["line"] = bezier
    allLine.append(tmpDic) // 把線存入陣列中
}

觸控滑動時的程式碼如下（沒錯，就三行，哈哈）:

override func touchesMoved(touches: Set<UITouch>, withEvent event: UIEvent?) {
    let point = touches.first!.locationInView(self) // 獲取觸控的點
    bezier.addLineToPoint(point) // 把移動的座標存到貝賽爾曲線中
    setNeedsDisplay() // 重繪介面
}

重繪介面的程式碼如下（注意：不要直接呼叫 drawRect: 方法，如果想重繪的話，呼叫 setNeedsDisplay() 方法）：

override func drawRect(rect: CGRect) {
    for i in 0..<allLine.count {
        let tmpDic = allLine[i]
        let tmpColor = tmpDic["color"] as! UIColor
        let tmpWidth = tmpDic["lineWidth"] as! CGFloat
        let tmpPath = tmpDic["line"] as! UIBezierPath
        tmpColor.setStroke()
        tmpPath.lineWidth = tmpWidth
        tmpPath.stroke()
    }
}

以上幾乎就是畫圖板的全部內容，並不多，而且不難理解。

下面我們來說說如何使用它。在 controller 中建立一個 MyView 的例項，MyView 就是上面所說的畫圖板。

class ViewController: UIViewController {
    private let drawingBoard = MyView() // 自定義view，也就是畫圖板部分
    private let mySlider = UISlider() // 滑動條，控制線條寬度
    private let mySegment = UISegmentedControl(items: ["紅", "黑", "綠"]) // 分段控制器，控制線條顏色
    private let backBtn = UIButton(type: .Custom)
    private let saveBtn = UIButton(type: .Custom)
    private let forwardBtn = UIButton(type: .Custom)
}

這些 UI 控制元件的屬性設定沒啥好說的，無非就是設定 frame、text、title、titleColor、backgroundColor 之類的，不贅述。

我們來說說這些控制元件的響應事件即可，其實也很簡單。

滑動條的響應事件：

func onClickSlider(slider: UISlider) {
    drawingBoard.lineWidth = slider.value
}

分段控制器的響應事件：

func onClickSegment(segment: UISegmentedControl) {
    switch segment.selectedSegmentIndex {
    case 0:
        drawingBoard.color = UIColor.redColor()
    case 1:
        drawingBoard.color = UIColor.blackColor()
    case 2:
        drawingBoard.color = UIColor.greenColor()
    default:
        drawingBoard.color = UIColor.redColor()
    }
}

後退和前進按鈕的響應事件：

func onClickBack(button: UIButton) {
    drawingBoard.backImage()
}

func onClickForward(button: UIButton) {
    drawingBoard.forwardImage()
}

最後來說儲存到相簿的功能。

func onClickSave(button: UIButton) {
    UIGraphicsBeginImageContext(drawingBoard.bounds.size) // 開始擷取畫圖板
    view.layer.renderInContext(UIGraphicsGetCurrentContext()!)
    let img : UIImage = UIGraphicsGetImageFromCurrentImageContext() // 擷取到的影象
    UIGraphicsEndImageContext() // 結束擷取
    UIImageWriteToSavedPhotosAlbum(img, nil, nil, nil) // 把擷取到的影象儲存到相簿中
    // 最後提示使用者儲存成功即可
    let alert = UIAlertView.init(title: "儲存照片成功",
                                 message: "您已將照片儲存於圖片庫中，開啟照片程式即可檢視。",
                                 delegate: self,
                                 cancelButtonTitle: "OK")
    alert.show()
}

也許有的同學不知道怎麼新增響應事件？那我們就拿後退按鈕的響應事件舉個栗子：

backBtn.addTarget(self, action: Selector("onClickBack:"), forControlEvents: .TouchUpInside)