CAShapeLayer绘制路径奇怪

Question

我正在构建一个UIBezierPath，如下所示：

UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat yOrigin = 2;
for (int i = 0; i < lines; ++i) {
    [path moveToPoint:CGPointMake(0, yOrigin)];
    [path addLineToPoint:CGPointMake(width, yOrigin)];
    yOrigin += distance;
}
[path closePath];

然后我把它放在CAShapeLayer中：

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
[shapeLayer setFrame:aFrame];
[shapeLayer setPath:[bezierPath CGPath]];
[shapeLayer setStrokeColor:[[UIColor blackColor] CGColor]];
[shapeLayer setMasksToBounds:YES];

但是，当我添加到滚动视图时，结果如下：

为什么这样做？前四行几乎是灰色的！它看起来像一个别名问题，但路径非常简单。

Answer 1

是的，这是一个抗锯齿问题。

您使用的路径宽度为1磅。在上面的示例中，CAShapeLayer的上三个实例精确地定位在整个点值上，例如。 5.0，其中较低实例位于两个整点之间，例如。 14.5。

当系统将图层渲染到屏幕像素时，它会对前三行进行抗锯齿处理，绘制两个触摸的像素，透明度为50％。下面的线完美地坐在一个像素上，因此画成完美的黑色。

我希望一点点ASCII艺术有助于理解。

 pt          upper lines                           lower line
5.0|---------                                      -------------------------------
   |  pixel  --------------------------------------  perfectly aligned center 5.5
6.0|---------  line between pixels centered on 6.0 -------------------------------
   |  pixel  --------------------------------------
7.0|---------

Answer 2

我遇到了同样的情况：垂直和水平黑线变成灰色。

看起来像像素上的UiView'snap'坐标，而不是CALayer。

我对此问题的解决方法是在coodinates上添加0.5。

CGRect bounds_on_pixels(const CGRect& bounds) {

    const float f = 0.5f;
    return CGRectMake(bounds.origin.x+f, bounds.origin.y+f, bounds.size.width-1.f, bounds.size.height-1.f);
}

注意：-1.f的大小是兼性的。

使用CAShapeLayer和UIBezierPath

的示例

CAShapeLayer* shape_layer = [CAShapeLayer layer];
// initialize shape_layer...
shape_layer.path =
[
 UIBezierPath bezierPathWithRoundedRect:bounds_on_pixels(self.view.bounds)
 byRoundingCorners:UIRectCornerTopLeft | UIRectCornerTopRight
 cornerRadii:CGSizeMake(10.0, 10.0)
].CGPath;
// add shape_layer: [self.view.layer insertSublayer:shape_layer atIndex:0];

@tonklon：感谢你的想法！