[IOS] Do it (15) 코어 그래픽스 그림 그리기 App 구현

코어 그래픽스 그림 그리기 App 구현

---

iOS에서는 코어 그래픽스라는 라이브러리를 사용하여 뷰에 그림을 그릴 수 있는데,
이 곳에서는 사각형, 선, 원과같은 도형이나 색을 채우는 등의 기능을 사용할 수 있습니다.

결과 화면

---

스토리 보드

---

ViewController.swift (메인화면)

//
//  ViewController.swift
//  DrawGraphics
//
//  Created by HwangSeungyeon on 2020/09/17.
//

import UIKit

class ViewController: UIViewController {
    @IBOutlet var imgView: UIImageView!

    override func viewDidLoad() {
        super.viewDidLoad()
        // Do any additional setup after loading the view.
    }

    //MARK: 선 그리기 함수
    @IBAction func btnDrawLine(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size) //콘텍스트를 이미지 뷰의 크기와 같게 생성
        let context = UIGraphicsGetCurrentContext()! //생성한 콘텍스트의 정보 가져옵니다

        //Draw Line
        context.setLineWidth(2.0) //콘텍스트에 대한 여러가지 설정 합니다. , 선굵기
        context.setStrokeColor(UIColor.red.cgColor) //선 색상(빨강)

        context.move(to: CGPoint(x: 70, y: 50)) //그림 그리기 위해 시작 위치로 커서 이동(0,0)이 화면 왼쪽 위
        context.addLine(to: CGPoint(x: 270, y: 250)) //현재 위치에서 지정한 위치까지 선 추가

        context.strokePath() //추가한 경로로 콘텍스트에 그립니다

        //Draw Triangle
        //색상(파랑), 꼭지점 세개 좌표 설정
        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()
        UIGraphicsEndImageContext() //그림 그리기 끝낸다
    }
    @IBAction func btnDrawRectangle(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!

        //Draw Rectangle
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)

        //xy좌표에서 시작하고 폭 200px 높이 200px 사각형 그린다
        context.addRect(CGRect(x: 70, y: 100, width: 200, height: 200))
        context.strokePath()

        imgView.image = UIGraphicsGetImageFromCurrentImageContext()
        UIGraphicsEndImageContext()
    }

    //MARK: 원 그리기 함수
    @IBAction func btnDrawCircle(_ sender: UIButton) {
        UIGraphicsBeginImageContext(imgView.frame.size)
        let context = UIGraphicsGetCurrentContext()!

        //Draw Ellipse
        context.setLineWidth(2.0)
        context.setStrokeColor(UIColor.red.cgColor)

        context.addEllipse(in: CGRect(x: 70, y: 50, width: 200, height: 100))
        context.strokePath()

        //Draw Circle
        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()
    }

    //MARK: 호 그리기 함수
    @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: 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()
    }

    //MARK: 채우기 함수
    @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: 70, 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: 70, 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: 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()
    }
}

전체 코드

DrawGraphics.zip

0.04MB

---

출처 : Do it 스위프트로 앱 만들기