[Do it!] 그림 그리기 앱

Do it! 스위프트로 아이폰 앱 만들기
16장 코어 그래픽스로 화면에 그림 그리기

📱 실행 화면 📱

---

💻 Step 1. 기본 환경 구성하기

• 빈 스토리보드에 Horizontal Stack View 배치하기
  • [Add New Constraints] 에서
    위:0, 왼쪽:16, 오른쪽:16, 아래:0 으로 설정하기
• 세로 스택 뷰 안에 Image View 배치하기
• 이미지 뷰 상단에 Vertical Stack View 배치하기
• 가로 스택 뷰 안에 버튼 5개 배치하기
• 5개 버튼을 선택하고 [Add New Constraints] -> [Height] = 40 으로 설정하기
• 가로 스택 뷰를 선택하고 [Attributes inspector] -> [Distribution] -> [Fill Equally] 로 설정하기

💻 Step 2. Outlet 변수와 Action 함수 추가하기

💻 Step 3. 기능 구현하기

@IBAction func btnDrawLine(_ sender: UIButton) {
    UIGraphicsBeginImageContext(imgView.frame.size)    //그림 그리기 위한 context 생성
    let context = UIGraphicsGetCurrentContext()!    //context 정보 로드
    
    //선 그리기
    context.setLineWidth(2.0)    //선의 굵기 설정
    context.setStrokeColor(UIColor.red.cgColor)    //선의 색상 설정
    
    context.move(to: CGPoint(x: 70, y: 50))    //커서 이동
    context.addLine(to: CGPoint(x: 270, y: 250))    //커서 위치를 기준으로 해당 좌표까지 선 추가
    
    context.strokePath()    //추가한 경로를 context에 그리기
    
    //삼각형 그리기
    context.setLineWidth(4.0)
    context.setStrokeColor(UIColor.blue.cgColor)
    
    context.move(to: CGPoint(x: 170, y: 200))
    context.addLine(to: CGPoint(x: 270, y: 350))
    context.addLine(to: CGPoint(x: 70, y: 350))
    context.addLine(to: CGPoint(x: 170, y: 200))
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()    //context에 그려진 그림을 이미지 뷰에 나타내기
    UIGraphicsEndImageContext()    //그림 그리기 종료
}

'선' 버튼 코드

@IBAction func btnDrawRectangle(_ sender: UIButton) {
    UIGraphicsBeginImageContext(imgView.frame.size)
    let context = UIGraphicsGetCurrentContext()!
    
    context.setLineWidth(2.0)
    context.setStrokeColor(UIColor.red.cgColor)
    
    context.addRect(CGRect(x: 70, y: 100, width: 200, height: 200))
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

'사각형' 버튼 코드

@IBAction func btnDrawCircle(_ sender: UIButton) {
    UIGraphicsBeginImageContext(imgView.frame.size)
    let context = UIGraphicsGetCurrentContext()!
    
    //타원 그리기
    context.setLineWidth(2.0)
    context.setStrokeColor(UIColor.red.cgColor)
    
    context.addEllipse(in: CGRect(x: 70, y: 50, width: 200, height: 100))
    context.strokePath()
    
    //원 그리기
    context.setLineWidth(5.0)
    context.setStrokeColor(UIColor.green.cgColor)
    
    context.addEllipse(in: CGRect(x: 70, y: 200, width: 200, height: 200))
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

'원' 버튼 코드

@IBAction func btnDrawArc(_ sender: UIButton) {
    UIGraphicsBeginImageContext(imgView.frame.size)
    let context = UIGraphicsGetCurrentContext()!
    
    context.setLineWidth(5.0)
    context.setStrokeColor(UIColor.red.cgColor)
    
    context.move(to: CGPoint(x: 100, y: 50))
    context.addArc(tangent1End: CGPoint(x: 250, y: 50), tangent2End: CGPoint(x: 250, y: 200), radius: CGFloat(50))
    context.addLine(to: CGPoint(x: 250, y: 200))
    
    context.move(to: CGPoint(x: 100, y: 250))
    context.addArc(tangent1End: CGPoint(x: 270, y: 250), tangent2End: CGPoint(x: 100, y: 400), radius: CGFloat(20))
    context.addLine(to: CGPoint(x: 100, y: 400))
    
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

'호' 버튼 코드

@IBAction func btnDrawFill(_ sender: UIButton) {
    UIGraphicsBeginImageContext(imgView.frame.size)
    let context = UIGraphicsGetCurrentContext()!
    
    //사각형 채우기
    context.setLineWidth(1.0)
    context.setStrokeColor(UIColor.red.cgColor)
    context.setFillColor(UIColor.red.cgColor)
    
    let rect = CGRect(x: 70, y: 50, width: 200, height: 100)
    context.addRect(rect)
    context.fill(rect)
    context.strokePath()
    
    //원 채우기
    context.setLineWidth(1.0)
    context.setStrokeColor(UIColor.blue.cgColor)
    context.setFillColor(UIColor.blue.cgColor)
    
    let circle = CGRect(x: 70, y: 200, width: 200, height: 100)
    context.addEllipse(in: circle)
    context.fillEllipse(in: circle)
    context.strokePath()
    
    //삼각형 채우기
    context.setLineWidth(1.0)
    context.setStrokeColor(UIColor.green.cgColor)
    context.setFillColor(UIColor.green.cgColor)
    
    context.move(to: CGPoint(x: 170, y: 350))
    context.addLine(to: CGPoint(x: 270, y: 450))
    context.addLine(to: CGPoint(x: 70, y: 450))
    context.addLine(to: CGPoint(x: 170, y: 350))
    context.fillPath()
    context.strokePath()
    
    imgView.image = UIGraphicsGetImageFromCurrentImageContext()
    UIGraphicsEndImageContext()
}

'채우기' 버튼 코드

💻 Final Step. 전체 소스 코드

import UIKit

class ViewController: UIViewController {

    @IBOutlet var imgView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    @IBAction func btnDrawLine(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)    //그림 그리기 위한 context 생성
        let context = UIGraphicsGetCurrentContext()!    //context 정보 로드
        
        //선 그리기
        context.setLineWidth(2.0)    //선의 굵기 설정
        context.setStrokeColor(UIColor.red.cgColor)    //선의 색상 설정
        
        context.move(to: CGPoint(x: 70, y: 50))    //커서 이동
        context.addLine(to: CGPoint(x: 270, y: 250))    //커서 위치를 기준으로 해당 좌표까지 선 추가
        
        context.strokePath()    //추가한 경로를 context에 그리기
        
        //삼각형 그리기
        context.setLineWidth(4.0)
        context.setStrokeColor(UIColor.blue.cgColor)
        
        context.move(to: CGPoint(x: 170, y: 200))
        context.addLine(to: CGPoint(x: 270, y: 350))
        context.addLine(to: CGPoint(x: 70, y: 350))
        context.addLine(to: CGPoint(x: 170, y: 200))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()    //context에 그려진 그림을 이미지 뷰에 나타내기
        UIGraphicsEndImageContext()    //그림 그리기 종료
    }
    @IBAction func btnDrawRectangle(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)
        
        context.addRect(CGRect(x: 70, y: 100, width: 200, height: 200))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    @IBAction func btnDrawCircle(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        //타원 그리기
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)
        
        context.addEllipse(in: CGRect(x: 70, y: 50, width: 200, height: 100))
        context.strokePath()
        
        //원 그리기
        context.setLineWidth(5.0)
        context.setStrokeColor(UIColor.green.cgColor)
        
        context.addEllipse(in: CGRect(x: 70, y: 200, width: 200, height: 200))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    @IBAction func btnDrawArc(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        context.setLineWidth(5.0)
        context.setStrokeColor(UIColor.red.cgColor)
        
        context.move(to: CGPoint(x: 100, y: 50))
        context.addArc(tangent1End: CGPoint(x: 250, y: 50), tangent2End: CGPoint(x: 250, y: 200), radius: CGFloat(50))
        context.addLine(to: CGPoint(x: 250, y: 200))
        
        context.move(to: CGPoint(x: 100, y: 250))
        context.addArc(tangent1End: CGPoint(x: 270, y: 250), tangent2End: CGPoint(x: 100, y: 400), radius: CGFloat(20))
        context.addLine(to: CGPoint(x: 100, y: 400))
        
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    @IBAction func btnDrawFill(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        //사각형 채우기
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.red.cgColor)
        context.setFillColor(UIColor.red.cgColor)
        
        let rect = CGRect(x: 70, y: 50, width: 200, height: 100)
        context.addRect(rect)
        context.fill(rect)
        context.strokePath()
        
        //원 채우기
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.blue.cgColor)
        context.setFillColor(UIColor.blue.cgColor)
        
        let circle = CGRect(x: 70, y: 200, width: 200, height: 100)
        context.addEllipse(in: circle)
        context.fillEllipse(in: circle)
        context.strokePath()
        
        //삼각형 채우기
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.green.cgColor)
        context.setFillColor(UIColor.green.cgColor)
        
        context.move(to: CGPoint(x: 170, y: 350))
        context.addLine(to: CGPoint(x: 270, y: 450))
        context.addLine(to: CGPoint(x: 70, y: 450))
        context.addLine(to: CGPoint(x: 170, y: 350))
        context.fillPath()
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    
}

---

💻 도전! Mission 꽃 모양 그리기

import UIKit

class ViewController: UIViewController {

    @IBOutlet var imgView: UIImageView!
    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
        
        drawFlower()
    }

    func drawFlower() {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.green.cgColor)
        context.setFillColor(UIColor.green.cgColor)
        
        context.move(to: CGPoint(x: 170, y: 200))
        context.addLine(to: CGPoint(x: 200, y: 450))
        context.addLine(to: CGPoint(x: 140, y: 450))
        context.addLine(to: CGPoint(x: 170, y: 200))
        
        context.fillPath()
        context.strokePath()
        
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.systemPink.cgColor)
        
        context.addEllipse(in: CGRect(x: 120, y: 150, width: 100, height: 100))
        context.addEllipse(in: CGRect(x: 170, y: 150, width: 100, height: 100))
        context.addEllipse(in: CGRect(x: 70, y: 150, width: 100, height: 100))
        context.addEllipse(in: CGRect(x: 120, y: 100, width: 100, height: 100))
        context.addEllipse(in: CGRect(x: 120, y: 200, width: 100, height: 100))
        
        context.strokePath()

        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }

}