[iOS] UIBezierPath로 QR코드 테두리 그리기

오늘은 QR코드 캡쳐 하는 화면에서, 

UIBezierPath: vector-based path를 만들 때 쓰는 것. 얘를 이용하면 custom path를 만들 수 있다!! 

 

그냥 바로 만들 수 있는건 아니고, Core Graphics 위에 렌더링이 되기 때문에, 먼저 core graphics부터 만들어 줘야 한다.

 

순서는 이렇게 된다.

 

1. CGContext 를 쓴다

2. UIView에 있는 draw(_:) 함수를 쓴다. 그럼 context가 자동으로 제공되게 된다!

3. CAShapeLayer 오브젝트라는 특별한 레이어를 만들어 준다. 

 

예제는 다음과 같다. 

 

func createRectangle() {

    // Initialize the path.

    path = UIBezierPath()

    // Specify the point that the path should start get drawn.

    path.move(to: CGPoint(x: 0.0, y: 0.0))

    // Create a line between the starting point and the bottom-left side of the view.

    path.addLine(to: CGPoint(x: 0.0, y: self.frame.size.height))

    // Create the bottom line (bottom-left to bottom-right).

    path.addLine(to: CGPoint(x: self.frame.size.width, y: self.frame.size.height))

    // Create the vertical line from the bottom-right to the top-right side.

    path.addLine(to: CGPoint(x: self.frame.size.width, y: 0.0))

    // Close the path. This will create the last line automatically.

    path.close()

}

 

(0,0) 에서 출발해서, add Line으로 쭉쭉 선을 붙여 나갔다. 테두리가 그려졌다!!

 

override func draw(_ rect: CGRect) {

    self.createRectangle()

}

 

draw()를 통해서, 그려주게 된다

 

override func draw(_ rect: CGRect) {

    self.createRectangle()

 

    // Specify the fill color and apply it to the path.

    UIColor.orange.setFill()

    path.fill()

 

    // Specify a border (stroke) color.

    UIColor.purple.setStroke()

    path.stroke()

}

 

이렇게 쓰면 안쪽에 색을 채워줄 수도 있다. 

 

나는 여러개의 선을 써야하는데!?

 

이 경우에는 다르게 할 수 있다

 

mask, sublayer 두개의 방법이 있는데 위에는 sublayer을 붙이는 방식으로 했었다.

두개는 다른 방식이다.

 

mask는 view의 default layer를 걔로 씌우는거고, sublayer을 붙이는거는 이미 있는거 위에 붙이는 방법이다. 

 

sublayer 코드: self.layer.addSublayer(shapeLayer)

mask 코드: self.layer.mask = shapeLayer