如何使用cornerradius删除CALayer周围的丑陋边框？

Question

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

这是我在每个 (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 白色小边框的核心图形，但两者都没有成功。黑色的背景总是闪耀着，创造了这个外边界。我见过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;