Question

I draw a view . The views frame = (0,0,44,44) and the views background color is black.
I want add a mask to make the view looks like this : the mask is a small circle in the middle of the view . but I get a converse result , only the middle of the view is not masked. the wrong result like this

my code is :

aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];

[aView.layer setBackgroundColor:[[UIColor blackColor] CGColor]];

CAShapeLayer *mask = [[CAShapeLayer alloc] init];
mask.frame = aView.bounds;
CGMutablePathRef p2 = CGPathCreateMutable();
CGPathAddEllipseInRect(p2, NULL, CGRectInset(mask.bounds, 10, 10));

mask.path = p2;
aView.layer.mask = mask;

CGPathRelease(p2);

[self addSubview:aView];

what is wrong with the code ? thanks.

Answer 1

First, add a rectangle to the masking path.

Second, set the fillRule property of shape layer to kCAFillRuleEvenOdd, so that the center part is left hollowed.

aView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];

[aView.layer setBackgroundColor:[[UIColor blackColor] CGColor]];

CAShapeLayer *mask = [[CAShapeLayer alloc] init];
mask.fillRule = kCAFillRuleEvenOdd;
mask.frame = aView.bounds;
CGMutablePathRef p2 = CGPathCreateMutable();
CGPathAddRect(p2, &CGAffineTransformIdentity, mask.bounds);
CGPathCloseSubpath(p2);
CGPathAddEllipseInRect(p2, NULL, CGRectInset(mask.bounds, 10, 10));

mask.path = p2;
aView.layer.mask = mask;

CGPathRelease(p2);