iOS 實現電子簽名

CuiXgの博客

實現原理

1. 使用拖動手勢記錄獲取用戶簽名路徑.
2. 當用戶初次接觸屏幕,生成一個新的UIBezierPath,並加入數組中.設置接觸點爲起點.在手指拖動過程當中爲UIBezierPath添加線條,並從新繪製,生成連續的線.
3. 手指滑動中不斷的從新繪製,造成簽名效果.
4. 簽名完成,轉化爲UIImage保存.

實現代碼

class CXGSignView: UIView {

    var path: UIBezierPath?
    var pathArray: [UIBezierPath] = []

    override init(frame: CGRect) {
        super.init(frame: frame)
        self.backgroundColor = UIColor.gray
        setupSubviews()
    }


    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    }


    func setupSubviews() {

        let panGestureRecognizer = UIPanGestureRecognizer(target: self, action: #selector(panGestureRecognizerAction(_:)))
        self.addGestureRecognizer(panGestureRecognizer)

    }

    @objc func panGestureRecognizerAction(_ sender: UIPanGestureRecognizer) {
        // 獲取當前點
        let currentPoint = sender.location(in: self)

        if sender.state == .began {
            self.path = UIBezierPath()
            path?.lineWidth = 2
            path?.move(to: currentPoint)
            pathArray.append(path!)
        }else if sender.state == .changed {
            path?.addLine(to: currentPoint)
        }
        self.setNeedsDisplay()
    }

    // 根據 UIBezierPath 從新繪製
    override func draw(_ rect: CGRect) {

        for path in pathArray {
            // 簽名顏色
            UIColor.black.set()
            path.stroke()
        }
    }

    // 清空
    func clearSign() {
        pathArray.removeAll()
        self.setNeedsDisplay()
    }

    // 撤銷
    func undoSign() {
        guard pathArray.count > 0 else {
        return
    }
    pathArray.removeLast()
        self.setNeedsDisplay()
    }

    /// 簽名轉化爲圖片
    func saveSignToImage() -> UIImage? {
        UIGraphicsBeginImageContextWithOptions(self.bounds.size, false, UIScreen.main.scale)
        guard let context = UIGraphicsGetCurrentContext() else {
            return nil
        }
        self.layer.render(in: context)
        let image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        return image
    }
}
複製代碼