0

I currently have a UIView and a imageview behind that: What I would like to do is be able to "cut" out STAR shape on the UIView so that the Imageview can be visible. How do you go about doing this?

Right now I'm able to cut a rectangle or a circle shape but dont know about a star or Polygon so If anyone know anything about it please share...thanx in advance

AJ Tech
  • 5
  • 6
  • How are you currently "cutting out" the rectangle/circle shape? – Fogmeister May 06 '14 at 07:37
  • http://stackoverflow.com/questions/8389193/tint-a-uiview-with-all-its-subviews –  May 06 '14 at 07:44
  • @Santosh that SO question seems to be completely unrelated to this. Are you sure you linked the right one? – Fogmeister May 06 '14 at 07:45
  • for rectangle I have this: [backgroundColor setFill]; UIRectFill(rect); CGRect holeRect1 = [holeRectValue CGRectValue]; CGRect holeRectIntersection = CGRectIntersection( holeRect1, rect ); [[UIColor clearColor] setFill]; UIRectFill(holeRectIntersection); but dont know for star or other shapes – AJ Tech May 06 '14 at 08:40

3 Answers3

1

Woof

I'm pretty sure you need to use an image mask. This is an image containing only a black shape (a star in your case) on a white background. See a tutorial on how to do this here: http://iosdevelopertips.com/cocoa/how-to-mask-an-image.html

In this scenario, the UIImageView would need to be on top of the UIView then masked using the method in the above link. As far as I know, there isn't a simple way of 'cutting' a shape from a view but this method should give you the same effect.

Another option if you want more control over the shape at runtime is to draw a star as a CGShape and use that as your mask.

henryeverett
  • 813
  • 5
  • 21
  • Thanx for the replay...but the thing is I dont want to mask any image, i just want to cut a star shaped portion from UIView and show a background Image. the image will be shown to user which will be seen from star shaped cutout – AJ Tech May 06 '14 at 09:27
  • You want to do something like this right? http://img.photobucket.com/albums/v679/fatratstew/Untitleddrawing.png Where the red is the UIView and the blue is the UIImageView? In this case you can do this by my method above. You put the image on top of the uiview and mask it. It will still look like the image is below the view. Or am I misunderstanding your question? – henryeverett May 06 '14 at 11:14
  • If you want to see what i want is shown in this link - http://s1156.photobucket.com/user/ajinkya20/media/starcutout_zpse371516e.png.html the image that is shown in star cutout is my imageview and the green one is my UIView on which I want to have a star cutout – AJ Tech May 06 '14 at 12:59
  • Yes this can be achieved using the technique described above. While you won't technically be cutting a shape out of the UIView, it will definitely look like you are. Give it a try. – henryeverett May 06 '14 at 16:03
0

Create a shape layer, 

CAShapeLayer *shapeLayer = [[CAShapeLayer alloc] init];
    [shapeLayer setFrame:CGRectMake(10, 10, 50, 50)];
    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
    [bezierPath moveToPoint:CGPointMake(12, 25)];
    [bezierPath addLineToPoint:CGPointMake(25, 12)];
    [bezierPath addLineToPoint:CGPointMake(38, 25)];
    [bezierPath addLineToPoint:CGPointMake(25, 38)];
    [bezierPath closePath];
    [shapeLayer setPath:bezierPath.CGPath];

Above bezier path has random point, create your own version of star and set the frame according to your star position and size.

And mask the layer to your view,

[[yourView layer] setMask:shapeLayer];
Sathish Kumar
  • 219
  • 1
  • 10
0

If you want to draw a star shaped image..I am pretty much sure that this piece of code would really help you.

These two lines are responsible for start and endpoints:

CGContextMoveToPoint();
CGContextAddLineToPoint();


CGContextClosePath() : is used to close the current subpath of the context's path.

- (void)drawRect:(CGRect)rect
{

    CGContextRef contextRef=UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(contextRef, 2);
    CGContextSetStrokeColorWithColor(contextRef, [UIColor redColor].CGColor);

    CGContextBeginPath(contextRef);
    CGContextMoveToPoint(contextRef, 50.0, 440.0);
    CGContextAddLineToPoint(contextRef, 100.0, 440.0);
    CGContextAddLineToPoint(contextRef, 75.0, 380.0);
    CGContextClosePath(contextRef);
    CGContextMoveToPoint(contextRef, 50.0, 400.0);
    CGContextAddLineToPoint(contextRef, 100.0, 400.0);
    CGContextAddLineToPoint(contextRef, 75.0, 460.0);
    CGContextClosePath(contextRef);
    [[UIColor grayColor]setFill];
    CGContextStrokePath(contextRef);
    CGContextFillPath(contextRef);

}
Sunil Garg
  • 1
  • 2