CAShapeLayer左上角缺少像素

Question

我使用带有CAShapeLayer的{​​{1}}在视图中绘制带边框。

这样可以正常工作，但不会绘制第一个像素（顶部，左侧）。

这是我的代码：

UIBezierPath

结果（注意顶部左上角的像素）：

我认为这可能与抗锯齿相关，但是使用x，y和borderWidth似乎无法解决问题。 有谁知道造成这种情况的原因是什么？

Answer 1

由于某些原因，当您使用(roundedRect rect: CGRect, cornerRadius: CGFloat)创建路径时，它未关闭（尽管文档中说明了这一点）。

调用focusPath.close()会关闭路径并删除丢失的像素。

但是，如果您不想要圆角，只需使用普通的矩形，它就会正确绘制。

let focusPath = UIBezierPath(rect: focusSize)

对于任何感兴趣的人都是结果路径：

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>

设置lineCap可能会使框显示正确，但不会解决问题，因为它只是扩展了可见的端点并掩盖了缺失的位。设置borderLayer.lineJoin = kCALineJoinBevel以查看为什么这可能是一个问题。

Answer 2

您在矩形中看到丢失像素的原因是您尚未正确配置lineCap属性。

尝试添加此行：

borderLayer.lineCap = kCALineCapSquare

有关线上限的更多信息（以及线路连接，这也很重要，请参阅此页面：http://calayer.com/core-animation/2016/05/22/cashapelayer-in-depth.html#line-cap

Answer 3

是的，根据文档它应该是一个矩形，但我不认为它提到lineWidth

这似乎是您看到缺少像素的原因

borderLayer.lineWidth = 2

现在，当您将宽度更改为1时，它会绘制一个没有任何缺失像素的完美矩形

将lineWidth更改为10表示差距相当大

您的问题的解决方案是使用此

borderLayer.lineCap = kCALineCapSquare

检查这些lineCap＆amp; Line Cap Values