ios - 设置CAShapeLayer lineWidth小于1

Question

在上面的屏幕截图中，有两行:

实线只是高度为1px的UIView

使用此代码创建虚线行

- (void)viewDidAppear:(BOOL)animated {
    CAShapeLayer *line = [CAShapeLayer layer];
    UIBezierPath *linePath=[UIBezierPath bezierPath];

    [linePath moveToPoint:CGPointMake(0, 107)];
    [linePath addLineToPoint:CGPointMake(self.view.frame.size.width, 107)];

    line.lineWidth = 0.5;
    line.path=linePath.CGPath;
    line.fillColor = [[UIColor blackColor] CGColor];
    line.strokeColor = [[UIColor blackColor] CGColor];

    [line setLineJoin:kCALineJoinRound];
    [line setLineDashPattern: [NSArray arrayWithObjects:[NSNumber numberWithInt:10], [NSNumber numberWithInt:5],nil]];

    [[self.view layer] addSublayer:line];
}

为什么1像素( UIView)高度的 1.0小于 0.5高度的虚线？

我希望虚线像实线一样细。

Answer 1

当您说UIView的高度为1px时，您实际上是指1px吗？

UIKit中的大小(分别为lineWidth和frame的CAShapeLayer和UIView)在points, not pixels中进行度量。单点相当于1x显示器上的1像素，2x显示器上的2像素和3x显示器上的3像素。*

因此，如果您想要单个像素的大小(以磅为单位)，则需要

1.0/[UIScreen mainScreen].scale

您的图像中似乎存在的问题是，您将 UIView的帧原点与 UIBezierPath的行混淆了。这些不一样。框架原点代表 UIView的顶部，而直线则代表路径的中心。

因此，您将需要将线条位置向下偏移其宽度的一半-这会将其与像素的中心对齐，从而允许将笔划渲染到单个像素上。**

这样的事情应该可以达到您想要的结果:

CGFloat pixelWidth = 1.0/[UIScreen mainScreen].scale;

UIView* v = [[UIView alloc] initWithFrame:(CGRect){0, 50, self.view.frame.size.width, pixelWidth}];
v.backgroundColor = [UIColor redColor];
[self.view addSubview:v];

UIBezierPath* p = [UIBezierPath bezierPath];
[p moveToPoint:(CGPoint){0, 50+(pixelWidth*0.5)}];
[p addLineToPoint:(CGPoint){self.view.frame.size.width, 50+(pixelWidth*0.5)}];

CAShapeLayer* s = [CAShapeLayer layer];
s.contentsScale = [UIScreen mainScreen].scale; // ensures the CAShapeLayer renders its contents at the logical scale of the screen
s.frame = self.view.bounds;
s.path = p.CGPath;
s.fillColor = [UIColor clearColor].CGColor;
s.strokeColor = [UIColor greenColor].CGColor;
s.lineWidth = pixelWidth;
s.lineDashPattern = @[@10, @10];
[self.view.layer addSublayer:s];

生成以下内容(在iPhone 6上):



* iPhone 6 Plus的行为略有不同-物理显示屏的比例(〜2.6倍)与逻辑比例(3倍)不匹配。

因此，您在其中绘制的任何图形 can result in pixel bleeding都将按比例缩小以显示。您可以解决这个问题，但是 involves delving into Open GL or Metal可以完成绘制。

See also here可以很好地概述每个iPhone如何呈现其内容。

**在2倍显示屏上，您可能还需要将线条的位置额外偏移0.25点，以防止像素渗色(因为线条位于像素边界上) as Andrea says。