ios - 其他角度线宽

Question

我这样画线:

- (void)drawRect:(CGRect)rect {

    _lineColor = [UIColor blackColor];

    [_lineColor setStroke];
    [_lineColor setFill];

    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextClearRect(c, rect);
    [[UIColor clearColor] setFill];
    CGContextAddRect(c, rect);
    CGContextSetLineWidth(c, 1);
    CGContextDrawPath(c, kCGPathFill);
    CGContextBeginPath(c);
    CGContextMoveToPoint(c, 0, 0);
    CGContextAddLineToPoint(c, x1, y1);
    CGContextStrokePath(c);  
}

但是，我的线有不同的宽度，角度是 90 度或 45 度。如何画出相同宽度的线

Answer 1

我做了一些可能使这里的效果更明显的东西。这是代码:

- (void)drawRect:(CGRect)rect
{
    CGContextRef c = UIGraphicsGetCurrentContext();

    // Get us a gray background
    CGContextSetFillColorWithColor(c, [[UIColor grayColor] CGColor]);
    CGContextFillRect(c, CGRectInfinite);

    CGContextSetStrokeColorWithColor(c, [[UIColor blackColor] CGColor]);

    CGContextSetLineWidth(c, 1.0);
    CGContextBeginPath(c);

    // Draw some lines at various angles
    for (CGFloat i = -10.; i <= 10.; i += 1.0)
    {
        CGContextMoveToPoint(c, CGRectGetMidX(self.bounds), CGRectGetMidY(self.bounds));
        CGContextAddLineToPoint(c, CGRectGetMidX(self.bounds) + i * 10., CGRectGetMidY(self.bounds) + 100);
    }

    CGContextStrokePath(c);
}

这是该代码在视网膜设备上的输出:(这应该以标准 StackOverflow 格式以 100% 显示，但您可以确定它的全尺寸)



现在这是一个被炸毁的部分:



您在这里看到的是工作中的抗锯齿。对于初学者来说，垂直线一直是 2.0 像素，没有抗锯齿(假设你在像素边界上绘制它)。现在考虑使用相同像素网格绘制的 45 度线，并使用勾股定理。这是另一个图表:



在它最窄处(即在垂直于线本身的维度上)，一条 45 度的线将出现 1.414px 宽，并且在它最宽的不透明部分(不包括在锯齿状间隙中桥接空间的大部分透明像素)它将出现 2.828 像素。放大后，您可以看到对这些线条进行抗锯齿的工作如何影响线条的视觉外观。

可能有人会过来建议您关闭抗锯齿，但作为引用，这会使光学效果更差(因为这样光栅化器将使覆盖范围内的每个像素完全不透明):



简而言之，这是预期的行为，如果您需要调整绘制每条线的方式以实现默认抗锯齿代码未提供的某些所需的光学外观，那么您只需要完成这项工作。 CoreGraphics 中没有“让我的所有线条在光学上相似”设置——他们在一般情况下已经尽了最大努力，如果你需要更具体的东西，这取决于你。 FWIW，许多应用程序只是使用默认值，人们似乎对结果很满意，所以你可能会问自己，这是否真的是你的应用程序中你想要投入大量额外工作的地方。

我突然想到:我不确定你会喜欢这种效果，但实现光学相似性的一种可能方法可能是在像素边界上绘制垂直线。这将导致它们也出现抗锯齿，这(取决于您如何看待它)可能会使它们看起来与有角度的抗锯齿线更加一致。看起来是这样的:



这样做你失去的是对线条的某种“清晰”。通过在 X 方向上将上下文平移 0.25pt(对于视网膜 - 对于非视网膜，0.5pt 将具有类似的效果)，可以最轻松地绘制像素边界，如下所示:

    CGContextTranslateCTM(c, 0.25, 0);

希望这可以帮助。