[iOS/swift] 코어 그래픽스(Core Graphics) 화면에 그림 그리기 앱 만들기

Xcode(버전11.3)를 코어 그래픽스(Core Graphics) 그림 그리기 앱을 만든다:D

코어 그래픽스(Core Graphics)는 아이폰과 아이패드에서 2차원 그래픽을 그릴 수 있도록 제공하는 그래픽 라이브러리이다.

코어 그래픽스는 애플이 제공하는 '쿼츠(Quartz)'라는 그래픽 라이브러리 안에 포함되어 있다.

쿼츠(Quartz)는 하나의 라이브러리가 아니라 코어 그래픽(Core Grapic)과 코어 애니메이션(Core Animation)으로 구성되어 있다.

 

 

 

- 스토리보드 화면 구성

1) Button

'선', '사각형', '원', '호', '채우기' Button 추가

 

 

 

- 스토리보드 화면 구성

2) Image View 추가

 

 

 

- 아웃렛 변수 추가

ImageView -> 'imgView'

 

 

 

- 액션 함수 추가

'선' Button -> 'btnDrawLine'

'사각형' Button -> 'btnDrawRectangle'

'원' Button -> 'btnDrawCircle'

'호' Button -> 'btnDrawArc'

'채우기' Button -> 'btnDrawFill'

 

 

 

전체 소스 보기

//
//  ViewController.swift
//  day200101_DrawGraphics
//
//  Created by 무니 on 2020/01/01.
//  Copyright © 2020 com.mooni. All rights reserved.
//

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)
        // 생성된 콘텍스트 정보 획득
        let context = UIGraphicsGetCurrentContext()!
        
        // Draw Line
        // 선 굵기를 2.0으로 설정
        context.setLineWidth(2.0)
        // 선 색상을 빨간색으로 설정
        context.setStrokeColor(UIColor.red.cgColor)
        
        // 커서의 위치를 (50,50)으로 이동
        context.move(to: CGPoint(x: 50, y: 50))
        // 시작 위치에서 (250,250)까지 선 추가
        context.addLine(to: CGPoint(x: 250, y: 250))
        // 추가하 선을 콘텍스트에 그림
        context.strokePath()
        
        // Draw Triangle
        // 선 굵기를 4.0으로 설정
        context.setLineWidth(4.0)
        // 선 색상을 파란색으로 설정
        context.setStrokeColor(UIColor.blue.cgColor)
        
        // 커서의 위치를 (150,200)으로 이동
        context.move(to: CGPoint(x: 150, y: 200))
        // 시작 위치에서 (250,350)까지 선 추가
        context.addLine(to: CGPoint(x: 250, y: 350))
        // 이전 위치에서 (50,350)까지 선 추가
        context.addLine(to: CGPoint(x: 50, y: 350))
        // 이전 위치에서 (150,200)까지 선 추가
        context.addLine(to: CGPoint(x: 150, y: 200))
        // 추가한 선을 콘텍스트에 그림
        context.strokePath()
        
        // 현재 콘텍스트에 그려진 이미지를 가지고 와서 이미지 뷰에 할당
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        // 그림 그리기를 끝냄
        UIGraphicsEndImageContext()
    }
    
    // 사각형 그리기 함수
    @IBAction func btnDrawRectangle(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        // Draw Rectangle
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)
        
        // (50,100) 위치에서 가로 200, 세로 200 크기의 사각형 추가
        context.addRect(CGRect(x: 50, y: 100, width: 200, height: 200))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    
    // 원 그리기 함수
    @IBAction func btnDrawCircle(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        // Draw Ellipse
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)
        
        // (50,50) 위치에서 가로 200, 세로 100 크기의 타원 추가.
        context.addEllipse(in: CGRect(x: 50, y: 50, width: 200, height: 100))
        context.strokePath()
        
        // Draw Circle
        context.setLineWidth(5.0)
        context.setStrokeColor(UIColor.green.cgColor)
        
        // (50,200) 위치에서 가로 200, 세로 200 크기의 타원 추가. 즉 원을 추가
        context.addEllipse(in: CGRect(x: 50, y: 200, width: 200, height: 200))
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    
    // 호 그리기 함수
    @IBAction func btnDrawArc(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!
        
        // Draw Arc
        context.setLineWidth(5.0)
        context.setStrokeColor(UIColor.red.cgColor)
        
        context.move(to: CGPoint(x: 50, y: 50))
        // 호 그리기
        context.addArc(tangent1End: CGPoint(x: 200, y: 50), tangent2End: CGPoint(x: 200, y: 200), radius: CGFloat(50))
        context.addLine(to: CGPoint(x: 200, y: 200))
        
        context.move(to: CGPoint(x: 100, y: 250))
        // 호 그리기
        context.addArc(tangent1End: CGPoint(x: 250, 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()!
        
        // Draw Rectangle
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.red.cgColor)
        // 채우기 색상 설정
        context.setFillColor(UIColor.red.cgColor)
        
        let rectangle = CGRect(x: 50, y: 50, width: 200, height: 100)
        context.addRect(rectangle)
        // 사각형 채우기
        context.fill(rectangle)
        context.strokePath()
        
        // Draw Circle
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.blue.cgColor)
        context.setFillColor(UIColor.blue.cgColor)
        
        let circle = CGRect(x: 50, y: 200, width: 200, height: 100)
        context.addEllipse(in: circle)
        // 타원 채우기
        context.fillEllipse(in: circle)
        context.strokePath()
        
        // Draw Triangle
        context.setLineWidth(1.0)
        context.setStrokeColor(UIColor.green.cgColor)
        context.setFillColor(UIColor.green.cgColor)
        
        context.move(to: CGPoint(x: 150, y: 350))
        context.addLine(to: CGPoint(x: 250, y: 450))
        context.addLine(to: CGPoint(x: 50, y: 450))
        context.addLine(to: CGPoint(x: 150, y: 350))
        // 선 채우기
        context.fillPath()
        // 선으로 그려진 삼각형의 내부 채우기
        context.strokePath()
        
        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }
    
}

 

 

 

시뮬레이터 결과 화면