[swift] Draw Image Tutorial: 그림 그리는 앱 만들기

Version: Swift 4.2, Xcode 10, iOS 12

UIKit을 활용해 화면 터치로 간단한 그림 그리는 앱을 만들겠습니다. iOS의 UIKit에는 이미 그림 그리기 관련 API가 많기 때문에 그냥 적절히 활용하면 쉽게 드로잉앱을 만들 수 있습니다.

이 튜토리얼에서 다룰 주제는 선그리기, 선의 속성 정하기, 지우기 등 입니다.

준비사항

전체 코드가 담겨있는 프로젝트는 첨부파일로 확인할 수 있습니다. 현재 여러가지 기능이 있는 복잡한 앱을 만드는게 아니기 때문에 ‘Single View App’ 템플릿으로 프로젝트를 생성합니다. 프로젝트 생성이 성공했으면 Project Navigator에서 Main.storyboard를 선택하고 다음 이미지처럼 연필과 지우개 버튼, UIImageView를 만듭니다.

UIImageView에 canvas라는 이름으로 outlet을 연결하고 각각의 버튼에 Touch Up Inside 이벤트로 action을 연결해줍니다. 각 action의 이름은 touchUpPencil, touchUpEraser로 했습니다. 필요에 따라 색상 선택 버튼, 기능 버튼 등을 추가할 수 있고 Assets에 이미지를 등록하여 예쁘게 만들 수도 있습니다.

선 그리기

간단히 검정색 선을 그려보겠습니다. ViewController.swift를 열어서 다음의 프로퍼티를 추가합니다.

var brushColor = UIColor.black var brushWidth: CGFloat = 10.0

추가한 프로퍼티의 용도는 다음과 같습니다.

• brushColor: 그림을 그릴 선의 색상 지정
• brushWidth: 선의 두께를 지정

일단 임의의 위치에 선을 그리려면 선의 색이나 두께같은 속성과 함께 선을 그릴 시작점과 끝점이 필요합니다. 이 요구에 맞춰 선을 그리려면 시작점과 끝점을 파라미터로 가지는 메소드를 하나 만드는 것이 좋을거라 판단됩니다.

func drawLine(from: CGPoint, to: CGPoint) { // 1 UIGraphicsBeginImageContext(canvas.frame.size) guard let context = UIGraphicsGetCurrentContext() else { return } canvas.image?.draw(in: canvas.bounds) // 2 context.setLineWidth(brushWidth) context.setStrokeColor(brushColor) // 3 context.move(to: from) context.addLine(to: to) // 4 context.strokePath() // 5 canvas.image = UIGraphicsGetImageFromCurrentImageContext() UIGraphicsEndImageContext() }

이 메소드의 내용은 다음과 같습니다.

1. 그림을 그리는 대략적인 흐름은 그래픽 컨텍스트를 만들고 -> 그 컨텍스트에 원하는 드로잉을 하고 -> 그래픽 컨텍스트의 이미지 데이터를 우리가 원하는 객체에 할당하는 순서로 이루어집니다. image.draw는 drawLine 메소드를 반복적으로 호출 할 경우 기존 그림에 새 그림을 누적시키기 위해 사용합니다.
2. 가장 기본이되는 속성인 선의 굵기와 색을 지정했습니다. 이 두가지 속성 이외에도 선의 끝부분 처리, 블랜드모드 등 여러 속성 설정을 할 수 있습니다.
3. 속성과 더불에 선 그리기의 기본이 되는 요소인 시작점과 끝점을 설정 했습니다. 좌표를 바꿔가며 반복적으로 이 메소드를 호출하면 마치 자유 드로잉을 하는 듯한 효과를 낼 수 있습니다.
4. 이제 설정된 값을 바탕으로 컨텍스트에 페인팅을 합니다.
5. 현재 컨텍스트에 그려진 이미지 데이터를 우리가 원하는 UIImage 객체에 할당합니다.

손가락 따라 그리기

이제 앞에서 만든 선그리기 메소드를 이용해 터치한 화면에 그림을 그리는 코드를 작성하겠습니다. 이번에도 관련 프로퍼티를 주가합니다.

var lastPoint = CGPoint.zero var isDrawing = false

프로퍼티의 용도는 이름 그대로 터치한 마지막 좌표를 기억하는 부분과 현재 드로잉 중인지를 기억하는 것 입니다. 드로잉 중인지를 기억하는 이유는 화면 터치 후 움직임 없이 손을 뗄 경우에도 그림을 그리도록 하기위함입니다.

화면 터치에 따른 그림을 그리려면 터치에 대한 정보를 받아야 하는데, 이는 UIViewController가 상속받은 부모 클래스 UIResponder의 기능을 override 하여 사용하면 됩니다.

// 1 override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) { isDrawing = false if let touch = touches.first { lastPoint = touch.location(in: canvas) } } // 2 override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) { isDrawing = true if let touch = touches.first { let currentPoint = touch.location(in: canvas) drawLine(from: lastPoint, to: currentPoint) lastPoint = currentPoint } } // 3 override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) { if !isDrawing { drawLine(from: lastPoint, to: lastPoint) } isDrawing = false }

화면 터치에 대한 알림은 크게 세가지로 나눕니다. 처음 화면에 손이 닿았을 때, 닿은 상태에서 움직였을 때, 화면에서 손을 뗏을 때 각각에 대해 이벤트가 호출됩니다.

1. 최초 터치 했을 때 아직 그림그리는 상황은 아니므로 isDrawing을 false로 초기화 하고 이미지 뷰 상의 좌표를 마지막 좌표로 기억합니다.
2. 터치 후 움직일 때 drawLine 메소드를 통해 최초 터치한 좌표에서 움직인 좌표까지의 선을 그립니다. 이후 계속 움직인다면 이동 이벤트가 지속적으로 발생하기 때문에 이동한 좌표를 마지막 좌표로 기억하게 합니다. 짧은 선을 연속적으로 그림 으로서 자유 드로잉하는 효과를 볼 수 있습니다.
3. 터치가 끝난 경우 선을 그리지 않았다면 점을 찍도록 합니다.

기본적인 코드는 모두 작성했습니다. 빌드 후 앱을 구동하여 화면을 터치하면 검정색 두꺼운 그림이 그려지는 것을 확인할 수 있습니다. 천천히 그리면 자연스러운 곡선이 그려지지만 빠르게 움직이면 선을 연속적으로 그린 것이 확인됩니다. 이는 선 끝을 부드럽게하는 속성을 추가하여 어느정도 보완할 수 있습니다.

지우개 만들기

그림을 그렸으면 수정하고 싶을 때가 있습니다. 단순히 canvas.image에 nil을 할당하면 그린 모든 그림이 싹 사라지지만 일부만 지우고 싶은 경우 컨텍스트 설정 중 블랜드 모드를 활용해 그리기와 동일하게 지우기가 가능합니다.

먼저 isPen 이라는 Bool 속성의 프로퍼티를 추가하여 현재 그리기모드인지 지우기모드인지 기억하게 하고 맨 처음 준비했던 버튼 액션에서 이 프로퍼티의 값을 변경하도록 코드를 작성합니다.

func drawLine(from: CGPoint, to: CGPoint) { ... if isPen { context.setBlendMode(.normal) } else { context.setBlendMode(.clear) } ...

위와 같은 코드를 컨텍스트 설정의 적당한 위치에 넣으면 내가 그리는 선이 그림 그리는 선인지 지우는 선인지 구분하도록 할 수 있습니다.

마치며

지금까지 만든 그리기, 지우기 기능 이외에도 색상 바꾸기 기능, 선 굵기 변경 기능 등 아이디어에 따라 무한히 기능을 확장할 수 있습니다. 애플의 Core Graphics를 활용해 선 그리기 이외에도 원, 사각형, 곡선, 패턴 등 다양한 효과도 추가할 수 있으니 확인해보기 바랍니다.

바로 실행 가능한 프로젝트는 첨부파일을 다운로드하여 확인할 수 있습니다.

Tutorial Drawing.zip