ios - UIBezierPath 描边 1px 线和填充 1px 宽度矩形 - 不同的结果。

Question

这是一张简单的图

    

- (void)drawRect:(CGRect)rect
{
    //vertical line with 1 px stroking
    UIBezierPath *vertLine = [[UIBezierPath alloc] init];
    [vertLine moveToPoint:CGPointMake(20.0, 10.0)];
    [vertLine addLineToPoint:CGPointMake(20.0, 400.0)];
    vertLine.lineWidth = 1.0;
    [[UIColor blackColor] setStroke];
    [vertLine stroke];

    //vertical rectangle 1px width 
    UIBezierPath *vertRect= [UIBezierPath bezierPathWithRect:CGRectMake(40.0, 10.0, 1.0, 390.0)];
    [[UIColor blackColor] setFill];
    [vertRect fill];

}

在非 Retina 3GS 和模拟器上，第一条线很模糊，看起来比 1 像素宽，但第二条线很清晰。

不幸的是，我既没有 iPhone4 也没有新 iPad 可以测试，但在视网膜模拟器上两条线看起来都一样。

问题:对于非 Retina 和 Retina 设备，矩形而不是描边是获得相同结果的唯一方法吗？

Answer 1

您正在填充矩形的内部，但您正在从中心抚摸线条。由于两种情况下的坐标(矩形的角点和直线的起点和终点坐标)都定义为整数值(无分数)，因此坐标位于精确的点边界上。

我在上面谈到线的点时说了“坐标”，以免将它们与屏幕上的点混淆。出于同样的原因，我也说“点边界”而不是“像素边界”。 iOS 在所谓的“点”而不是像素中定义了它的坐标和所有点。点是与分辨率无关的测量。视网膜和非视网膜设备在屏幕上的点数相同，只是它们对应的实际像素数不同。

让我们看看抚摸位于点边界上的线(如您的问题)与填充角位于点边界上的矩形的比较:

在下面的插图中，我在非视网膜屏幕和视网膜屏幕上用黑色划线并用橙色填充矩形。我还用蓝色勾勒出线条和矩形。在这两种情况下，您都可以看到该分辨率下点的大小，并将其与实际像素网格进行比较。

在非视网膜情况下，您可以看到尝试用 1 点线(在本例中对应 1 像素线宽)从中心描边线将填充顶部和一半的像素在下面的像素上。由于像素仅填充了一半，因此这些像素的不透明度为 50%。这导致颜色较浅(在白色背景上)。由于顶部和下方的像素都是派对填充的，因此抚摸填充顶部和下方的像素。这使得线条看起来像是 2 像素宽而不是 1 像素。

您可以快速将其与内部填充的矩形进行比较。

同样的情况在视网膜屏幕上看起来不一样。在这种情况下，一个点的大小是相同的，但它由 4 个像素而不是 1 个像素组成。这次，当划线时，线上方半个点和线下方半个点将完全填充像素行上面和下面因为更高分辨率的屏幕。这意味着线条看起来好像是 1 磅宽，而且颜色看起来完全不透明。

我们还可以看到填充的矩形看起来是一样的。

---

要解决这个问题，您可以将线的点放在半像素上。在低分辨率设备上从中心划线意味着该线向上延伸半个点，向下延伸半个点。由于线的中心现在位于点的中心，这意味着描边线完全位于像素内并且线看起来很清晰。这样做不会对视网膜线产生任何影响，因为向下(或向上)移动了半个点，仍然意味着您完全填充了上方和下方的像素。

在下图中(针对视网膜)，我同时展示了点网格和像素网格。