以前住在上海，冬天冷的時候常常到 0～2度之間，還記得小時候會在窗戶上吐氣弄出一團霧，然後在上面畫個笑臉，透過笑臉可以看到外面的景色。

這個效果和刮刮卡很像，在可見物上面在塗一層東西，當去掉這層東西後，就可以看到底下的內容了，這次就在 iOS 做一個看看吧。

Scratch Card

就如同上面的動畫，要做到：

• 通過手指在畫面上移動的時候，可以擦拭藍色漸層的畫面，而顯示出背後的人像圖片。
• 而當我們點最上方的橡皮擦時，可以還原。

Mask

要實現上面的方法可能很多，但這次要利用 mask 來實現這個功能。

因為有了 mask 的，要顯示某一張圖的部分內容就顯得特別的方便，尤其是不規則的形狀。

比如下面的圖，我們的 mask 是原型又或者是星星，這張圖片圖片就能呈現出不同的形狀。

有了 mask 我們也能實現我們要的刮刮卡功能了

• cover 就是我們的遮擋層
• content 是去掉遮擋層後能看到的內容
• mask 是 content 的 mask 也就是只有 mask 和 content 重疊的部分我們才能夠看到內容。

View Hierarchy

我們在畫面上依次放入 cover / content / mask

這時候會發現畫面上只會看到一篇橘色。

而當 content 設定 mask 以後，就變成只能看見那張圖片，因為 mask 和圖片完整的重疊到了。

但如果我們將 mask 的背景色改為 clear 以後呢？就會變成只看得見藍色漸層的畫面。

重點來了，因為 mask 上有多少內容，就能看到多少圖片，而圖片是在 cover 之上的，所以圖片能顯示多少，就會改掉多少藍色漸層的畫面，

從而達到了視覺上的「刮掉藍色漸層」的效果。

SKScratchCardView

建立一個繼承於 UIView 的 SKScratchCardView 對外提供設定 contentView 和 coverView 的方法。

拿到 contentView & coverView 以後，設定 frame 並且設定 UIPanGesture.

func setupWith(coverView:UIView, contentView:UIView) {
    // cover view
    self.coverView = coverView
    
    // content view
    self.contentView = contentView
    
    // maskView
    self.contentMaskView.frame = coverView.frame
    self.contentMaskView.backgroundColor = UIColor.clear
    self.contentMaskView.strokeWidth = 40.0

    // addSubviews
    addSubviewFullscreen(self.coverView)
    addSubviewFullscreen(self.contentView)
    addSubviewFullscreen(self.contentMaskView)
    
    // set mask
    self.contentView.mask = self.contentMaskView

    // add gesture
    setupPanGesture()
}

當使用者在 SKScratchCardView 滑動的時候，我們將滑動的事件交給 Mask (SKScratchCardMaskView)

SKScratchCardMaskView

當拿到 panGestureRecognizer 的時候，我們開始在 mask 上面畫線。

@objc func panGestureRecognizer(_ recognizer:UIPanGestureRecognizer) {
    let location = recognizer.location(in: self)
    
    switch recognizer.state {
        case .began:
            beginPath(at: location)
        
        case .changed:
            addLine(to: location)
        
        default:
            closePath()
    }
}

通過 CGMutablePath 來一次完整的畫畫過程（手指按下到拿起）

並將每一次畫好的內容都存在 paths 中

fileprivate var paths: [CGMutablePath] = []

紀錄畫面上滑過的路線

public func beginPath(at point: CGPoint) {
    currentPath = CGMutablePath()
    currentPath?.move(to: point)
    setNeedsDisplay()
}

public func addLine(to point: CGPoint) {
    currentPath?.addLine(to: point)
    setNeedsDisplay()
}

public func closePath() {
    if let currentPath = currentPath {
        paths.append(currentPath)
    }
    currentPath = nil
    setNeedsDisplay()
}

畫的過程或結束時，通過 setNeedsDisplay 方法來觸發 Draw

draw 方法會將已經畫過 ( paths ) 和最後畫的 (contentPath) 的內容畫在畫面上。

override func draw(_ rect: CGRect) {
    let context = UIGraphicsGetCurrentContext()
    context?.setStrokeColor(strokeColor.cgColor)
    context?.setLineWidth(strokeWidth)
    context?.setLineCap(.round)
    
    for path in paths + [currentPath].flatMap({$0}) {
        context?.addPath(path)
        context?.strokePath()
    }
}

如果要清除畫好的內容，也只需要清空 paths 然後在通過 setNeedsDisplay 觸發 draw 方法達到畫面上沒內容，從而看不到人像圖片。

public func clearCanvas() {
    paths.removeAll()
    setNeedsDisplay()
}

參考

• 官方文件 - CGMutablePath
• 可以到 Github 上看對應的 Source Code 會更好理解。
• 本文同步轉載自 Scratch Card - 刮刮樂的做法