삼각형 그리기

  • 삼각형뿐 아니라 가장 기본적인 사각형, 원형 모두 UIBezierPath를 이용해서 직접 그릴 수 있다.
  • 사각형, 원형은 사실 기본 UIViewlayer를 건드리면 쉽게 만들 수 있기 때문에 굳이 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)

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