[Swift][iOS] 그림판 앱 간단하게 만들어보기

문득 iOS 개발을 하고싶어져서 오랜만에 XCode를 켰다.

뭐를 만들까? 하다가 이전에 사이드 플젝으로 해야지 했던 서비스의 기능 중 기본적인 기능인 그림판을 만들어보기로 했다!

이 기능을 만들어보기 전까지는 너무너무 어려워 보였지만 검색해보니 레퍼런스들이 꽤 있어서 차근차근 따라해보았다!!

 

그럼 순서대로 개발해보자😎

 

0. 프로젝트 하나를 만든다.

플젝 이름은 SketchApplication으로 설정해두었다.

 

1. 화면을 간단하게 만든다.

화면은 UIImageView를 상단에 위치시키고, 그 아래에 지우기 버튼을 위치시켜 구성하였다.

 

2. 스토리보드의 컴포넌트를 ViewController와 연결시켜준다.

1) 스토리보드에 있는 UIImageView를 ViewController로 가져와 canvas라는 이름으로 지정해주었다.

2) 스토리보드에 있는 지우기 버튼의 액션을 clearImage라는 메소드로 지정해주고,

해당 액션을 canvas에 그려져있는 이미지를 지우도록 정의했다.

 

3. 캔버스에 그리게 될 연필과 위치를 지정할 변수를 선언한다.

연필의 색상은 검정색, 너비는 2.0으로 지정해주었다. (다른 색상, 다른 너비 지정도 가능하다)

 

4. 화면을 터치했을 때의 기본 메소드를 재정의 한다.

1) 처음 터치했을 때의 메소드 재정의

2) 터치한 손가락을 움직였을 때의 메소드 재정의

3) 화면에서 손가락을 떼었을 때의 메소드 재정의

 

5. 실행을 시켜본다.

잘 그려지는데 이렇게 흐려?지는 이유는 아직 모르겠다.

 

 

요렇게 매우매우 간단하게 그림판 앱을 만들어보았다!!

 

전체 코드

import UIKit

class ViewController: UIViewController {

    @IBOutlet weak var canvas: UIImageView!
    
    @IBAction func clearImage(_ sender: Any) {
        canvas.image = nil
    }
    
    var brushColor = UIColor.black.cgColor
    var brushWidth: CGFloat = 2.0
    var lastPoint: CGPoint!
    
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }
    
//    처음 터치했을 때의 메소드 재정의
    override func touchesBegan(_ touches: Set<UITouch>, with event: UIEvent?) {
        let touch = touches.first! as UITouch
        lastPoint = touch.location(in: canvas)
    }
    
//    터치한 손가락을 움직였을 때의 메소드 재정의
    override func touchesMoved(_ touches: Set<UITouch>, with event: UIEvent?) {
        UIGraphicsBeginImageContext(canvas.frame.size)
//        연필의 색상과 너비 지정
        UIGraphicsGetCurrentContext()?.setStrokeColor(brushColor)
        UIGraphicsGetCurrentContext()?.setLineWidth(brushWidth)
        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        
        let touch = touches.first! as UITouch
        let currentPoint = touch.location(in: canvas)
        
        canvas.image?.draw(in: CGRect(x: 0, y: 0, width: canvas.frame.size.width, height: canvas.frame.size.height))
        
//        시작 위치를 첫 터치 지점으로 이동
        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
//        현재 위치까지 선을 추가
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: currentPoint.x, y: currentPoint.y))
        UIGraphicsGetCurrentContext()?.strokePath()
        
        canvas.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
        
//        마지막 터치 지점을 현위치로 변경
        lastPoint = currentPoint
    }
    
//    화면에서 손가락을 떼었을 때의 메소드 재정의
    override func touchesEnded(_ touches: Set<UITouch>, with event: UIEvent?) {
        UIGraphicsBeginImageContext(canvas.frame.size)
//        연필의 색상과 너비 지정
        UIGraphicsGetCurrentContext()?.setStrokeColor(brushColor)
        UIGraphicsGetCurrentContext()?.setLineWidth(brushWidth)
        UIGraphicsGetCurrentContext()?.setLineCap(CGLineCap.round)
        
        canvas.image?.draw(in: CGRect(x: 0, y: 0, width: canvas.frame.size.width, height: canvas.frame.size.height))
        
        UIGraphicsGetCurrentContext()?.move(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
//        현재 위치까지 선을 추가
        UIGraphicsGetCurrentContext()?.addLine(to: CGPoint(x: lastPoint.x, y: lastPoint.y))
        UIGraphicsGetCurrentContext()?.strokePath()
        
        canvas.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }

}

 

출처🙏 : https://bite-sized-learning.tistory.com/507