ios - 如何使用 cornerradius 去除 CALayer 周围的丑陋边框？

Question

我正在使用 Core Graphics 绘制一个简单的折线图。我创建了一个继承自 UIControl 的自定义类 LineChart。在此图表的顶部，我想添加一个小的实心圆圈，触摸时会显示动画(更改边框颜色)。

这是我的圆圈在每个 (x,y) 点的代码。

var layer = CALayer()
layer.borderColor = UIColor.whiteColor().CGColor
layer.backgroundColor = UIColor.blackColor().CGColor
layer.cornerRadius = 8
layer.borderWidth = 4
layer.frame = CGRect(x: xValue, y: yValue, width: 16, height: 16)
self.layer.addSublayer(layer)

我想要一个带有白色边框的黑色中心。问题是我的外白色边框周围有一个丑陋的黑色小边框。

我怎样才能摆脱这个边界？我玩过抗锯齿设置或添加了一些顶部带有 1px 白色小边框的 Core Graphics，但两者都没有奏效。黑色背景总是闪耀并创造了这个外部边界。我看过CALayer Border strange issue但无法相信我真的必须在每个数据点添加两层。

Answer 1

解决该问题的一种方法是创建 CALayer 的自定义子类并重写 drawInContext 方法以绘制带边框的圆。这是类的实现

@implementation DotLayer

- (instancetype)initWithFrame:(CGRect)frame
{
    self = [super init];
    if ( self )
    {
        self.frame = frame;
        self.backgroundColor = [UIColor clearColor].CGColor;
        self.borderColor = [UIColor whiteColor].CGColor;
        [self setNeedsDisplay];
    }
    return( self );
}

- (void)setBorderColor:(CGColorRef)borderColor
{
    [super setBorderColor:borderColor];
    [self setNeedsDisplay];
}

- (void)drawInContext:(CGContextRef)context
{
    CGRect rect = self.bounds;
    CGContextSetFillColorWithColor( context, self.borderColor );
    CGContextFillEllipseInRect( context, rect );

    rect = CGRectInset( self.bounds, 4, 4 );
    CGContextSetFillColorWithColor( context, [UIColor blackColor].CGColor );
    CGContextFillEllipseInRect( context, rect );
}

@end

这是添加点的代码

    DotLayer *layer = [[DotLayer alloc] initWithFrame:CGRectMake( xValue, yValue, 16, 16 )];
    [self.layer addSublayer:layer];

下面是更改点的边框颜色的代码

    layer.borderColor = [UIColor greenColor].CGColor;