Corner Rounding

CALayer에서 기본적으로 UI를 원으로 또는 모퉁이를 둥글게 만들 때 주로 cornerRadius 을 사용합니다.

하지만, CALayer의 cornerRadius를 사용하면 스크롤하는 동안 모든 프레임에서 Clipping 을 수행하기 때문에 오프 스크린 랜더링이 트리거가 되기 때문에 비용이 커서 오버헤드나 프레임 드랍과 같은 현상이 발생하기도 합니다.

구형 디바이스 (iPhone 4, 4S, 5/5C) 와 같은 기종에서는 성능이 크게 저하되지만 상위 디바이스의 경우 위의 문제점들에 대한 헤드룸이 줄어들어 영향을 직접적으로 볼 수 없을 뿐더러 프레임 드롭은 거의 발생하진 않습니다.

CornerRoundingType 과 종류

Texture는 CornerRounding 에 대해서 좀 더 효율적인 방식을 고려해서 3가지 cornerRoundingType 을 제시합니다.

defaultSlowCALayer (ASCornerRoundningTypeDefaultSlowCALayer)
precomposited (ASCornerRoundingTypePrecomposited)
clipping (ASCornerRoundingTypeClipping)

기본값은 defaultSlowCALayer 를 사용합니다.

DefaultSlowCALayer

기본적인 CALayer에서 제공하는 cornerRounding 을 사용하여 처리합니다. (cornerRoundingType의 default 값입니다. )

let photoImageNode = ASImageNode()
photoImageNode.cornerRoundingType = .defaultSlowCALayer
photoImageNode.cornerRadius = 20.0

Precomposited

사전혼합된 CornerRounding 기법으로, 모서리가 이미지의 일부가 되어 하나의 단일 CALayer로 혼합됩니다.

사전 합성 된 불투명한 모서리를 사용하는 것이 좋으며, 만약 모서리가 둥근 이미지의 Position이 유동적이라면 배경은 투명도가 없는 단색인 것이 좋습니다.

사전에 합성된 불투명한 모서리가 없는 경우에는 다른 대안으로 사전 합성 된 투명도가 있는 모서리가 있는 Bézier Path 를 사용하는 방법입니다. 이 방법은 앞서 말한 사전 합성된 불투명 모서리 사용하는거에 비해 유연성은 높지만 알파 블랜딩 하는데 비용이 추가되며 메모리 영향이 약 25% 증가합니다.

제한사항:

모서리는 반드시 하나의 Node에만 닿고 이 외의 어떠한 SubNode 와 교차해서는 안됩니다.
레스터 사용은 권장하지 않습니다. (shouldRasterizeDescendants),

주의 해야할 점은 CALayer의 shouldRasterize는 Texture Node의 shouldRasterizeDescendents 과는 관련 없습니다. shouldRasterizeDescendents 옵션을 사용할 경의 하위 노드에 대해서 레이어가 만들어지지 않습니다.

let photoImageNode = ASImageNode()
photoImageNode.cornerRoundingType = .precomposited
photoImageNode.cornerRadius = 20.0

Clipping

Corner값에 대해서 반올림이 필요한 부분에 대해서 각 4개의 모서리 영역에 불투명한 모서리를 배치하는 방식입니다.

이 방법은 유연하고 좋은 성능을 제공해줍니다. 단, 각 모서리에 배치된 불투명한 모서리에 대해서만 약간의 CPU 오버헤드가 있을 수는 있습니다.

모서리가 하나 이상의 Node에 닿거나 SubNode와 교차하는 상황에서도 모서리가 둥글게 됩니다.
배경사진 위에서 고정된 둥근 모서리를 적용할 때 유용합니다.

let photoImageNode = ASImageNode()
photoImageNode.cornerRoundingType = .clipping
photoImageNode.backgroundColor = UIColor.white
photoImageNode.cornerRadius = 20.0