3

I am currently using CAShapeLayer for one of my requirement. I was successful in implementing the fillcolor, strokecolor, etc... but I wanted to change the color of outer part of that CAShapeLayer. I tried doing it with backgroundcolor, & followed many answers from SO, but was unable to do it. Could anyone guide me with the solution. Screenshot attached

Current Screen Change White color to black color with alpha 0.6

Edit 1: Code for creating the layer

// create layer mask for map
CAShapeLayer *maskLayer = [CAShapeLayer layer];
mapView.layer.mask = maskLayer;
//    maskLayer.backgroundColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.7] CGColor];
self.maskLayer = maskLayer;

// create shape layer for circle we'll draw on top of map (the boundary of the circle)
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.lineWidth = 3.0;
circleLayer.fillColor = [[UIColor clearColor] CGColor];
circleLayer.strokeColor = [[UIColor blackColor] CGColor];

//    circleLayer.borderColor = [[UIColor blackColor] CGColor];
//    circleLayer.backgroundColor = [[UIColor colorWithRed:0.0 green:0.0 blue:0.0 alpha:0.7] CGColor];

[mapView.layer addSublayer:circleLayer];
self.circleLayer = circleLayer;

Edit 2: Xcode's Viewer's Debugger

Xcode debugger

In the above image I can see that I have set the background color to self.view. But I want it to be over my map view & the the color should be semi transparent so that map data outside circle should also be visible.

Iulian Onofrei
  • 9,188
  • 10
  • 67
  • 113
iYoung
  • 3,596
  • 3
  • 32
  • 59
  • What is your current code for that? – Larme Jun 01 '15 at 11:48
  • @Larme : Just updating in a minute – iYoung Jun 01 '15 at 11:49
  • I guess you are adding the shape layer over a view layer. If you set the color for that view layer I hope it may work. – Exploring Jun 01 '15 at 11:50
  • @Exploring Tried! But it didn't worked. – iYoung Jun 01 '15 at 11:53
  • @Larme Updated post with code. Please check! – iYoung Jun 01 '15 at 11:55
  • You'd have to change the `mapView.superView.backgroundColor` in order to do that. Like `mapView.superView.backgroundColor = [UIColor redColor];` or something. – Fogmeister Jun 01 '15 at 12:12
  • @Fogmeister Please check my Edit 2. – iYoung Jun 01 '15 at 12:19
  • It's hard to see whats going on there. But changing the background color of the map view won't change the outside of the circle because you're masking it. Without seeing how everything is created it's hard to tell. – Fogmeister Jun 01 '15 at 12:21
  • @Fogmeister I have added my code of creating it in Edit 1. – iYoung Jun 01 '15 at 12:23
  • No, this just shows how you are adding a layers to mapView. Also, what is maskLayer? You don't seem to do anything to it. You're not really defining it after creating it. The view hierarchy is things like ... how/when are you adding mapView to its superView etc... Also, first, what is maskLayer? – Fogmeister Jun 01 '15 at 12:40
  • Ok, will explain you in a while – iYoung Jun 01 '15 at 12:43
  • I guess you are adding mapview over the entire screen. Try adding it as subview for the frame how much it is required. – Exploring Jun 02 '15 at 05:01

2 Answers2

1

Have you tried using XCode views's debugger to know where this white background belongs in your view hierarchy ?

You're using your view's maskLayer as a circle. So my guess is that this white background must be OUTSIDE your view - everything out your mask gets clipped - so you should probably try to change your viewController's view backgroundColor (or any other view that is just above your custom rounded view)

Vinzzz
  • 11,746
  • 5
  • 36
  • 42
  • Please, give MORE details when you ask a question, we cannot guess what you intend to do... So Now, you say you don't want a simple 'crop' mask , but some half-transparent mask... I'm still not sure what you're looking for, but check this : http://stackoverflow.com/questions/15375777/cut-out-shape-with-animation/15377207#15377207 – Vinzzz Jun 01 '15 at 13:39
0
[self.view.layer setBackgroundColor:[UIColor grayColor].CGColor];

UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:self.view.center
                                                      radius:45.0
                                                  startAngle:0
                                                    endAngle:2.0*M_PI
                                                   clockwise:YES];

CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.bounds = CGRectMake(0, 0, 2.0*(45.0), 2.0*(45.0));
circleLayer.path   = circle.CGPath;
circleLayer.strokeColor = [UIColor orangeColor].CGColor;
circleLayer.fillColor = [UIColor whiteColor].CGColor;
circleLayer.lineWidth   = 3.0; // your line width

[self.view.layer addSublayer:circleLayer];

See if it helps you.

Exploring
  • 925
  • 6
  • 18