如何使用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;