[스위프트]화면 터치해서 그리는 스케치 앱 만들기

iOS 프로그래밍(스위프트) 예제_화면 터치해서 그리는 스케치 앱 만들기

 

이번에는 아이폰 화면을 터치하여 그림을 그리는 스케치 앱을 만들어볼 것입니다. 그림을 그리기 위해 이미지뷰(Image View) 객체를 추가하고, 화면 삭제를 위한 버튼도 아래에 배치합니다. 완성한 후 시뮬레이터를 돌리면 마우스 커서로 그릴 수 있고, 실물 폰에서 앱을 실행시키면 직접 터치할 수 있습니다. 그럼 프로젝트를 만들고, 스토리보드에서 화면 구성부터 해보겠습니다.

 

 

 

▶ 새 프로젝트 만드는 방법

[스위프트] Xcode 새 프로젝트 만들기

 

 

 

---

 

■ 화면구성하기

STEP 1 스토리보드에 스택뷰(Vertical Stack View) 추가합니다. 

 

STEP 2 스택뷰의 제약조건을 설정합니다. 

 

STEP 3 이미지뷰(Image View)를 설정합니다. 

 

STEP 4 버튼(Button)를 설정합니다. 

이미지뷰 아래로 드래그앤드롭합니다. 

 

 

STEP 5 버튼의 제약조건을 설정합니다. 

 

---

■ 코드 작성하기 

STEP 6 이미지뷰의 아울엣 변수와 버튼의 액션 함수 추가합니다. 

 

STEP 7 필요한 변수들을 이미지뷰 변수 아래에 입력합니다. 

 

 

STEP 8 터치 이벤트 메서드 재정의합니다. 

메서드명 일부만 적으면 자동완성 창이 뜹니다. 그 중 touchesBegan, touchesEnded, touchesMoved를 사용합니다. 

재정의란 부모 클래스에서 생성해 놓은 메서드에게 할 일을 새로 부여한다는 의미입니다. 즉, 터치 이벤트가 발생했을 때 호출되는 메서드가 정해져 있는데, 해당 메서드가 무슨 일을 할지 정의한다는 의미입니다. 

 

 

이제 각 기능을 구현할 수 있도록 메서드 내용을 작성해보겠습니다.

전체 코드는 이 글 맨 아래있지만, 참고용으로만 보세요. 

시간이 걸리는 것 같지만 코드를 직접 손으로 한줄씩 입력해봐야 빨리 배울 수 있습니다. 

 

STEP 9 touchesBegan 메서드 구현합니다.

첫번째로 터치하면 스케치를 시작하도록 하는 메서드입니다.

 

코드

 

 

STEP 10 touchesMoved 메서드 구현합니다.

두 번째로 사용자가 터치한 손가락을 움직이면 스케치도 따라서 움직이도록 하는 메서드입니다.

 

 

코드

 

 

STEP 11 touchesEnded 메서드 구현합니다.

세 번째로 사용자가 화면에서 손가락을 떼었을 때 스케치도 끝나도록 하는 메서드입니다. 

 

 

코드

 

STEP 12 앱 실행

좌측 최상단에 ▶버튼을 클릭합니다. 

어플리케이션을 실행할 기기를 시뮬레이터가 아니라 실물기기로 변경하고 싶다면 iphone기기명이 적혀있는 부분을 클릭하여 선택하면 됩니다. 

 

완성

 

 

 

전체코드

import UIKit

 

class ViewController: UIViewController {

    @IBOutlet var imgView: UIImageView!

    

    var lastPoint: CGPoint! //바로 전에 터치하거나 이동한 위치

    var lineSize:CGFloat = 5.0 //선의 두께

    var lineColor = UIColor.green.cgColor //선의 색상

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

    }

 

    @IBAction func clearImgView(_ sender: UIButton) {

        imgView.image = nil

    }

    

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트 가지고 옵니다.

        lastPoint = touch.location(in: imgView) // 터치된 위치를 lastPoint라는 변수에 저장합니다.

    }

    

    // 두 번째로 사용자가 터치한 손가락을 움직이면 스케치도 따라서 움직이도록

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

        UIGraphicsBeginImageContext(imgView.frame.size)

        UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)

        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)

        UIGraphicsGetCurrentContext()?.setLineWidth(lineSize) //라인의 끝 모양을 라운드로 설정합니다.

        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트를 가져옵니다.

        let currPoint = touch.location(in: imgView)

        

        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) //이전에 이동된 위치인 lastPoint로 시작 위치를 이동시킵니다.

        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currPoint.x, y: currPoint.y)) // lastPoint에서 현재 위치는 currentPoint까지 선을 추가합니다.

        UIGraphicsGetCurrentContext()?.strokePath()

        

        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

        

        lastPoint = currPoint//현재 터치된 위치를 lastPoint라는 변수에 할당합니다.

    }

    

    // 세 번째로 사용자가 화면에서 손가락을 떼었을 때 스케치도 끝나도록

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

        UIGraphicsBeginImageContext(imgView.frame.size)

        UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)

        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)

        UIGraphicsGetCurrentContext()?.setLineWidth(lineSize) //라인의 끝 모양을 라운드로 설정합니다.

       

        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) //이전에 이동된 위치인 lastPoint로 시작 위치를 이동시킵니다.

        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) // lastPoint에서 현재 위치는 currentPoint까지 선을 추가합니다.

        UIGraphicsGetCurrentContext()?.strokePath()

        

        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

    }

 

}

import UIKit

 

class ViewController: UIViewController {

    @IBOutlet var imgView: UIImageView!

    

    var lastPoint: CGPoint! //바로 전에 터치하거나 이동한 위치

    var lineSize:CGFloat = 5.0 //선의 두께

    var lineColor = UIColor.green.cgColor //선의 색상

    

    override func viewDidLoad() {

        super.viewDidLoad()

        // Do any additional setup after loading the view.

    }

 

    @IBAction func clearImgView(_ sender: UIButton) {

        imgView.image = nil

    }

    

    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {

        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트 가지고 옵니다.

        lastPoint = touch.location(in: imgView) // 터치된 위치를 lastPoint라는 변수에 저장합니다.

    }

    

    // 두 번째로 사용자가 터치한 손가락을 움직이면 스케치도 따라서 움직이도록

    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {

        UIGraphicsBeginImageContext(imgView.frame.size)

        UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)

        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)

        UIGraphicsGetCurrentContext()?.setLineWidth(lineSize) //라인의 끝 모양을 라운드로 설정합니다.

        let touch = touches.first! as UITouch //현재 발생한 터치 이벤트를 가져옵니다.

        let currPoint = touch.location(in: imgView)

        

        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) //이전에 이동된 위치인 lastPoint로 시작 위치를 이동시킵니다.

        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currPoint.x, y: currPoint.y)) // lastPoint에서 현재 위치는 currentPoint까지 선을 추가합니다.

        UIGraphicsGetCurrentContext()?.strokePath()

        

        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

        

        lastPoint = currPoint//현재 터치된 위치를 lastPoint라는 변수에 할당합니다.

    }

    

    // 세 번째로 사용자가 화면에서 손가락을 떼었을 때 스케치도 끝나도록

    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {

        UIGraphicsBeginImageContext(imgView.frame.size)

        UIGraphicsGetCurrentContext()?.setStrokeColor(lineColor)

        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)

        UIGraphicsGetCurrentContext()?.setLineWidth(lineSize) //라인의 끝 모양을 라운드로 설정합니다.

       

        imgView.image?.draw(in: CGRect(x: 0, y: 0, width: imgView.frame.size.width, height: imgView.frame.size.height))

        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) //이전에 이동된 위치인 lastPoint로 시작 위치를 이동시킵니다.

        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y)) // lastPoint에서 현재 위치는 currentPoint까지 선을 추가합니다.

        UIGraphicsGetCurrentContext()?.strokePath()

        

        imgView.image = UIGraphicsGetImageFromCurrentImageContext()

        UIGraphicsEndImageContext()

    }

 

}

 

--------------------------

iOS프로그래밍 학습을 위해

더 많은 예제 보러가기 

--------------------------