삼각형 그리기

삼각형뿐 아니라 가장 기본적인 사각형, 원형 모두 UIBezierPath를 이용해서 직접 그릴 수 있다. 사각형, 원형은 사실 기본 UIView의 layer를 건드리면 쉽게 만들 수 있기 때문에 굳이 UIBezierPath를 쓸 필요는 없다. 하지만 삼각형이나 복잡한 모양의 도형을 만들 필요가 있는 경우 UIBezierPath를 사용해야 한다. 기본적인 순서는 원점을 정하고, 특정 좌표로 이동해 선을 긋고, 다시 원점으로 돌아오면 된다. 바로 시작해보자.

class CustomView: UIView {
    override func draw(_ rect: CGRect) {
        let path = UIBezierPath()
        path.move(to: CGPoint(x: 0, y: 3)) // 시작점을 (0, 3)으로 이동한다.
        path.addLine(to: CGPoint(x: 100, y: 3)) // (0, 30)에서 (100, 3)으로 이동한다.
        path.addLine(to: CGPoint(x: 120, y: 100)) // (100, 3)에서 (120, 100)으로 이동한다.
        path.close() // (120, 100)에서 시작점을 자동으로 연결한다.
        path.lineWidth = 3 // 선의 굵기를 3으로 지정한다.
        
        UIColor.black.set()
        path.stroke() // 검은색으로 바탕을 채운다.

        UIColor.red.set()
        path.fill() // 빨간색으로 채운다.
    }
}

우선 이렇게 커스텀 뷰를 하나 만들었다. 그리고 이렇게 만들면

let view = CustomView(frame: CGRect(x: 100, y: 100, width: 200, height: 200))
view.backgroundColor = UIColor.blue
self.view.addSubview(view)

이런 결과가 나타난다. 시작점이 (0, 0)인 경우에 lineWidth값이 0보다 크게 되면 바깥으로 넘어갈 수 있어서 lineWidth값인 3만큼 시작점과 이후의 좌표를 조절했다. 이제 이걸로 뭘 할 수 있을까

삼각형 응용해보기

이제 이걸로 UIImageView를 원하는대로 잘라볼 예정이다.

let path = UIBezierPath()
path.move(to: CGPoint.zero)
path.addLine(to: CGPoint(x: 50, y: 50))
path.addLine(to: CGPoint(x: 0, y: 50))
path.close()

path를 만들고 이제 이 path를 적용시켜보자.

let view = UIImageView(frame: CGRect(x: 100, y: 100, width: 50, height: 50))
view.image = UIImage(named: "아무사진.jpg")

let mask = CAShapeLayer()
mask.frame = view.bounds
mask.path = path.cgPath

view.layer.mask = mask

self.view.addSubview(view)

따란~ 이런 식으로 원하는 도형을 그리면 된다. 참 쉽죠? 😎 선에 넓이를 주면 다양한 연출이 가능하다.

let view = UIImageView(frame: CGRect(x: 100, y: 100, width: 50, height: 50))
view.image = UIImage(named: "아무사진.jpg")

let mask = CAShapeLayer()
mask.frame = view.bounds
mask.path = path.cgPath
mask.strokeColor = UIColor.black.cgColor
mask.lineWidth = 25

view.layer.mask = mask

self.view.addSubview(view)

따란~ 넓이를 지정하면서 위 사진같은 모양도 얼마든지 만들 수 있다. 끝~

삼각형 그리기