[swift] SnapKit으로 그리기 기능 구현하기

15 Nov 2023

swift

SnapKit은 iOS 개발을 위한 Auto Layout 라이브러리로, 코드로 UI를 그리고 배치할 수 있게 도와줍니다. 이번 글에서는 SnapKit을 사용하여 그리기 기능을 구현하는 방법에 대해 알아보겠습니다.

Step 1: 프로젝트 설정

Xcode에서 새로운 프로젝트를 생성합니다.
필요한 경우 SnapKit을 프로젝트에 추가하고, 프로젝트의 의존성을 설정합니다.
AppDelegate.swift 파일을 열고, 필요한 기능을 import 합니다.

import SnapKit

Step 2: 그리기 기능 구현하기

ViewController.swift 파일을 열고, 그리기 기능을 구현할 View를 생성합니다.

let drawView = UIView()
drawView.backgroundColor = UIColor.white
self.view.addSubview(drawView)
drawView.snp.makeConstraints { make in
    make.edges.equalToSuperview()
}

그리기 기능을 위한 필요한 변수들을 추가합니다.

var lastPoint: CGPoint!
var color: UIColor = UIColor.black
var brushWidth: CGFloat = 5.0

터치 이벤트를 처리하는 함수를 추가합니다.

override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        lastPoint = touch.location(in: self.view)
    }
}
 
override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let newPoint = touch.location(in: self.view)
        drawLine(fromPoint: lastPoint, toPoint: newPoint)
        lastPoint = newPoint
    }
}
 
override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
    if let touch = touches.first {
        let newPoint = touch.location(in: self.view)
        drawLine(fromPoint: lastPoint, toPoint: newPoint)
    }
}

실제로 선을 그리는 함수를 추가합니다.

func drawLine(fromPoint: CGPoint, toPoint: CGPoint) {
    UIGraphicsBeginImageContext(self.view.frame.size)
    let context = UIGraphicsGetCurrentContext()
    drawView.image?.draw(in: CGRect(x: 0, y: 0, width: self.view.frame.size.width, height: self.view.frame.size.height))
 
    context?.move(to: CGPoint(x: fromPoint.x, y: fromPoint.y))
    context?.addLine(to: CGPoint(x: toPoint.x, y: toPoint.y))
 
    context?.setLineCap(.round)
    context?.setLineWidth(brushWidth)
    context?.setStrokeColor(color.cgColor)
    context?.setBlendMode(.normal)
 
    context?.strokePath()
 
    drawView.image = UIGraphicsGetImageFromCurrentImageContext()
    drawView.alpha = 1.0
 
    UIGraphicsEndImageContext()
}

Step 3: 그리기 기능 테스트하기

앱을 실행하여, 화면을 터치하고 드래그하여 선을 그려보세요. 지우개 기능이 필요하다면, 적절한 버튼을 추가하여 지워지는 로직을 구현할 수 있습니다.

이제 SnapKit을 사용하여 iOS 앱에서 간단한 그리기 기능을 구현할 수 있게 되었습니다!

참고 자료

SnapKit 공식 문서: https://github.com/SnapKit/SnapKit