CAShapeLayer 왼쪽 위 모서리에 픽셀이 누락되었습니다.

Question

에 UIBezierPath을 사용하여 뷰에 경계 상자를 그립니다.

이것은 정상적으로 작동하지만 첫 번째 픽셀 (위쪽, 왼쪽)은 그려지지 않습니다.

이

내 코드입니다 :

let focusSize = CGRect(x: focusX, y: focusY, width: focusWidth, height: focusHeight) 
let focusPath = UIBezierPath(roundedRect: focusSize, cornerRadius: 0) 

let borderLayer = CAShapeLayer() 
borderLayer.path = focusPath.cgPath 
borderLayer.fillColor = UIColor.clear.cgColor 
borderLayer.strokeColor = UIColor.white.cgColor 
borderLayer.lineWidth = 2 
borderLayer.frame = self.someView.bounds 
self.someView.layer.addSublayer(borderLayer) 

결과 (상단에서 픽셀, 왼쪽 코너에 유의) :

나는이가 안티 앨리어싱과 관련이있을 거라고 생각을하지만, 재생 주위에 x, y 및 borderWidth 문제가 해결되지 않는 것 같습니다. 누가이 문제의 원인인지 알고 있습니까?

Answer 1

(roundedRect rect: CGRect, cornerRadius: CGFloat)을 사용하여 경로를 만들면 어떤 이유로 설명서에 나와있는 내용에도 불구하고 닫히지 않습니다.

호출하면 focusPath.close()은 경로를 닫고 누락 된 픽셀을 제거합니다.

그러나 둥근 모서리를 사용하지 않으려면 일반 rect를 사용하면 정확하게 그려집니다.

let focusPath = UIBezierPath(rect: focusSize)

결과 경로 여기에 관심있는 사람들을위한

: 상자를 만들 수 있습니다 lineCap 설정

UIBezierPath(roundedRect: CGRect(x: 10, y: 10, width: 100, height: 100), cornerRadius: 0) 
<UIBezierPath: 0x6180000b8000; <MoveTo {10, 10}>, 
<LineTo {110, 10}>, 
<LineTo {110, 110}>, 
<LineTo {10, 110}>, 
<LineTo {10, 10}>, 
<LineTo {10, 10}> 

//After calling path.close() 
<UIBezierPath: 0x6180000b8000; <MoveTo {10, 10}>, 
<LineTo {110, 10}>, 
<LineTo {110, 110}>, 
<LineTo {10, 110}>, 
<LineTo {10, 10}>, 
<LineTo {10, 10}>, 
<Close> 

UIBezierPath(rect: CGRect(x: 10, y: 10, width: 100, height: 100)) 
<UIBezierPath: 0x6180000b7f40; <MoveTo {10, 10}>, 
<LineTo {110, 10}>, 
<LineTo {110, 110}>, 
<LineTo {10, 110}>, 
<Close> 

가 제대로 표시하지만, 그냥 볼 끝 지점 확장으로 문제를 해결하지 않습니다 실종 된 비트를 은폐합니다. 이 문제가 발생할 수있는 이유를 확인하려면 borderLayer.lineJoin = kCALineJoinBevel을 설정하십시오.

Answer 2

rect에 누락 된 픽셀이 표시되는 이유는 lineCap 속성을 올바르게 구성하지 않았기 때문입니다.(라인 이해하는 것도 중요하다 가입)이 페이지를 참조 라인 캡에 대한 자세한 내용은

borderLayer.lineCap = kCALineCapSquare 

: 다음 문서 당 그것이이어야로 http://calayer.com/core-animation/2016/05/22/cashapelayer-in-depth.html#line-cap

Answer 3

예를

에 한번이 줄을 추가 사각형하지만 난 그게 선폭이 누락 픽셀을 볼 이유가 될 것으로 보인다

을 언급 같아요

borderLayer.lineWidth = 2 

로 폭을 변경할 때

지금 그 때 누락 된 픽셀

없이 완벽한 사각형을 그립니다 변경 10 선폭은

문제에 대한 해결책이

을 사용하는 것 격차에 상당한 차이를 보여줍니다

borderLayer.lineCap = kCALineCapSquare 

이 lineCap & Line Cap Values