Question

我正在尝试创建一个根据特定百分比填充的圆圈。这是我想要的效果图：

enter image description here

我有一个UIView，为此我添加了一个绘制圆圈的CAShapeLayer。然后我创建另一个UIShapeLayer作为一个正方形来匹配包含圆圈的UIView。然后根据图形设置此高度。因此，如果方形高100px且值为10％，那么我将方块设置为10px，使其填充10％的圆圈。

下图显示了正在填充的圆圈的50％。正如您所看到的，它涵盖了UIView以及圆圈。但是当我尝试将CAShapeLayer设置为屏蔽边界（circle.maskToBounds）时，圆圈完全消失，同时我添加的正方形作为子视图。

enter image description here

这是我的代码：

- (void)viewDidLoad
{
    [super viewDidLoad];
    // Do any additional setup after loading the view, typically from a nib.

    UIView *view = [[UIView alloc] initWithFrame:CGRectMake(100, 100, 200, 200)];
    [self drawCircleInView:view];
    [self.view addSubview:view];

}

- (void)drawCircleInView:(UIView *)v
{
    // Set up the shape of the circle
    int radius = v.frame.size.height / 2;
    CAShapeLayer *circle = [CAShapeLayer layer];
    // Make a circular shape
    circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2*radius, 2*radius)
                                         cornerRadius:radius].CGPath;

    // Center the shape in self.view
    circle.position = CGPointMake(CGRectGetMidX(v.bounds)-radius,
                              CGRectGetMidY(v.bounds)-radius);

    // Configure the apperence of the circle
    circle.fillColor = [UIColor blueColor].CGColor;
    circle.strokeColor = [UIColor clearColor].CGColor;
    circle.lineWidth = 5;
    circle.masksToBounds = YES;  // HERE IS THE LINE OF CODE THAT MAKES THE CIRCLE DISAPPEAR

    CAShapeLayer *sublayer = [CAShapeLayer layer];
    sublayer.backgroundColor = [UIColor orangeColor].CGColor;
    sublayer.opacity = .5f;
    sublayer.frame = CGRectMake(0, 100, 200, 100);
    [circle addSublayer:sublayer];


    // Add to parent layer
    [v.layer addSublayer:circle];
}

我想知道为什么设置circle.masksToBounds = YES会使圆圈和子图层完全消失。我的理解是，通过设置它，它应该只显示圆圈上的子层。

非常感谢提前。

Answer 1

试试这个：

- (void)drawCircleInView:(UIView *)v {
    // Set up the shape of the circle
    CGSize size = v.bounds.size;
    CALayer *layer = [CALayer layer];
    layer.frame = v.bounds;
    layer.backgroundColor = [UIColor blueColor].CGColor;

    CALayer *sublayer = [CALayer layer];
    sublayer.frame = CGRectMake(0, size.height/2, size.width, size.height/2);
    sublayer.backgroundColor = [UIColor orangeColor].CGColor;
    sublayer.opacity = .5f;

    CAShapeLayer *mask = [CAShapeLayer layer];
    mask.frame = v.bounds;
    mask.path = [UIBezierPath bezierPathWithOvalInRect:v.bounds].CGPath;
    mask.fillColor = [UIColor blackColor].CGColor;
    mask.strokeColor = [UIColor clearColor].CGColor;

    [layer addSublayer:sublayer];
    [layer setMask:mask];

    // Add to parent layer
    [v.layer addSublayer:layer];
}

maskToBounds是“ to bounds ”您未设置bounds或frame。
没有必要，但您最好设置frame CAShapeLayer，以防止不必要的混淆。
bounds是矩形，而不是CAShapeLayer的形状。请使用mask图层按形状进行遮罩。
circle和sublayer不一定是CAShapeLayer，因为它会被整形 mask图层屏蔽。

Answer 2

要实现此目的，请使用方形图像，其中心圆为透明。喜欢这个图像

enter image description here

如何将此图像用于此效果 -

首先添加方形图层（浅色/非填充色）。在上面添加一个填充颜色与智能矩形的图层。最重要的是放置这个图像。并改变具有填充颜色的中间层框架以达到预期效果

设置CALayer maskToBounds导致图层消失

2 个答案: