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

Question

I'm drawing a simple line chart using Core Graphics. I've created a custom class LineChart which inherits from UIControl . On top of this chart I'd like to add a small filled circle that will be animated (change border color) on touch.

Here is the code for my circles at each (x,y) point.

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)

I'd like to have a black center with a white border. The problem is that I have a tiny ugly black border around my outer white border.

How can I get rid of this border? I've played with antialiasing settings or added some Core Graphics with a small 1px white border on top but both didn't work out. The black background always shined through and created this outer border. I've seen CALayer Border strange issue but cannot believe that I really have to add two layers at each data point.

Answer 1

One way to work around the problem is to create a custom subclass of CALayer and override the drawInContext method to draw the bordered circle. Here's the class implementation

@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

Here's the code to add a dot

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

And here's the code to change the border color of a dot

    layer.borderColor = [UIColor greenColor].CGColor;