前言

突然看到支付寶的刮刮卡功能坤次，閑來無事步鉴，寫了一個小demo揪胃。

步驟及思路

• 1. UI布局；
• 2. 獲取觸摸位置在圖片上的坐標氛琢；
• 3. 默認是去創(chuàng)建一個透明的視圖喊递；
• 4. 獲取上下文(畫板)；
• 5. 將圖片渲染在上下文中阳似；
• 6. 設置清除點的大猩Э薄；
• 7. 清除劃過的區(qū)域；
• 8. 獲取通過上下文合成圖片俏讹；
• 9. 關(guān)閉上下文当宴；
• 10. 將合成的圖片添加在imageView上；

效果

示例代碼

Swift版demo地址
OC版demo地址

import UIKit

class ViewController: UIViewController {
    
    lazy var imageView: UIImageView = {
        let imageView = UIImageView(frame: CGRect.zero)
        imageView.image = UIImage(named: "gray")
        return imageView
    }()
    
    override func viewDidLoad() {
        super.viewDidLoad()
        
        setupView()
    }
    
    func setupView() {
        // 下面的圖片
        let belowImg = UIImage(named: "ten")
        let belowImgView = UIImageView(image: belowImg)
        belowImgView.frame = CGRect(x: 0, y: 0, width: belowImg?.size.width ?? 0, height: belowImg?.size.height ?? 0)
        belowImgView.center = view.center
        view.addSubview(belowImgView)
        
        // 灰色圖片
        imageView.frame = belowImgView.frame
        view.addSubview(imageView)
    }
    
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first
        // 觸摸位置在圖片上的坐標
        let cententPoint = touch?.location(in: imageView) ?? CGPoint.zero
        // 設置清除點的大小
        let rect = CGRect(x: cententPoint.x, y: cententPoint.y, width: 30.0, height: 30.0)
        // 默認是去創(chuàng)建一個透明的視圖
        UIGraphicsBeginImageContextWithOptions(imageView.bounds.size, false, 0)
        // 獲取上下文(畫板)
        guard let ref = UIGraphicsGetCurrentContext() else {
            return
        }
        // 把imageView的layer映射到上下文中
        imageView.layer.render(in: ref)
        
        // 清除劃過的區(qū)域
        ref.clear(rect)
        
        // 獲取圖片
        let image = UIGraphicsGetImageFromCurrentImageContext()
        
        // 結(jié)束圖片的畫板, (意味著圖片在上下文中消失)
        UIGraphicsEndImageContext()
        imageView.image = image
    }
}

Author

如果你有什么建議泽疆，可以關(guān)注我户矢，直接留言，留言必回殉疼。