How to put an image in a custom path

Question

I am very new in ios programming and here's my problem. I create a path with CGContext (an hexagon) and I want to put an image into this path. Here's the creation path code:

-(void)drawAllShapes:(float)xcoord :(float)ycoord :(float)cote  :(CGContextRef)c :(CGFloat *) fillcolor inRect:(CGRect)rect{

xcoord = xcoord*rect.size.width;
ycoord = ycoord*rect.size.height;
cote = cote*rect.size.height;

float x = 0.1835f*rect.size.width;
float y = 0.06162f*rect.size.height;

CGFloat strokecolor[4] = {1.0f, 1.0f, 1.0f, 1.0f};
CGContextSetStrokeColor(c, strokecolor);
CGContextSetFillColor(c, fillcolor);
CGContextSetLineWidth(c, 4.0f);
CGContextBeginPath(c);
CGContextMoveToPoint(c, xcoord, ycoord);
CGContextAddLineToPoint(c, xcoord+x, ycoord+y);
CGContextAddLineToPoint(c, xcoord+x, ycoord+cote+y);
CGContextAddLineToPoint(c, xcoord, ycoord+cote+2*y);
CGContextAddLineToPoint(c, xcoord-x, ycoord+cote+y);
CGContextAddLineToPoint(c, xcoord-x, ycoord+y);
CGContextClosePath(c);
CGContextDrawPath(c, kCGPathFillStroke);    
}

Can someone help me please?

Its pretty unclear what you want to achieve? Do you want to draw an image to the screen? or do you want to draw your shapes to an image file? — EsbenB, Jan 31 '14 at 14:48

score 0 · Answer 1 · answered Jan 31 '14 at 14:52

0

In a place where you have a valid CGContext write:

UIImage * image = ...;
float x = 10;
float y = 10;
[image drawInRect:CGRectMake(x, y, image.size.width, image.size.height)];

If you want to scale the image or stretch it, use different values for image.size.widthand image.size.height

The x and y is the location where you want it to be drawn.

answered Jan 31 '14 at 14:52

EsbenB

3,356
25
44

I tried your method but the image is over the hexagon. But I want to crop the image by the hexagon. – Zoomzoom Jan 31 '14 at 15:11

score 0 · Answer 2 · edited May 23 '17 at 10:25

Are you sure, that you want to use CGContext for this purpose? Here is another way:

- (UIImage *)maskImage: (UIImage *)image withMask:(UIImage *)maskImage
{
    CGImageRef maskRef = maskImage.CGImage;

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef),
                                    CGImageGetHeight(maskRef),
                                    CGImageGetBitsPerComponent(maskRef),
                                    CGImageGetBitsPerPixel(maskRef),
                                    CGImageGetBytesPerRow(maskRef),
                                    CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef maskedImageRef = CGImageCreateWithMask([image CGImage], mask);
    UIImage *maskedImage = [UIImage imageWithCGImage:maskedImageRef];

    CGImageRelease(mask);
    CGImageRelease(maskedImageRef);

    return maskedImage;
}

This function takes an image, that you want to mask, and a mask, which will be applied to the initial image and returns exactly what you want. You just need to add proper hexagon image to your project.

Besides it, you can check this question.

Ok but how can I convert my CGContext hexagon to an UIImage? — Zoomzoom, Jan 31 '14 at 15:25

Unheilig · Accepted Answer · 2014-01-31T16:54:22.373

0

Try and add a few things here:

Create properties:

@property(nonatomic) CGPathRef yourPath;
@property(strong, nonatomic) UIImageView *imageView;

In your draw method, comment out the following lines:

//CGContextSetFillColor(c, fillcolor);
//CGContextDrawPath(c, kCGPathFillStroke);
//CGContextSetLineWidth(c, 4.0f);

After you close your path, add the following:

CGContextClosePath(c);

self.yourPath = CGContextCopyPath(c);

CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.bounds = (CGRect){<Specify_Rect>};
shapeLayer.path = self.yourPath;

self.imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:@"<Your_Image>"]];
self.imageView.layer.frame = (CGRect){<Specify_Rect>}; //Minor correction: changed to frame.
self.imageView.layer.masksToBounds = YES;
self.imageView.layer.mask = shapeLayer;

[self addSubview:self.imageView];
CGPathRelease(self.path);
CGContextRelease(c);

You should be able to see your image being "wrapped" by your path. I tested it before posting here; have a great time with it, enjoy.

edited Jan 31 '14 at 16:54

answered Jan 31 '14 at 16:28

Unheilig

16,196
193
68
98

One last question : how can I change the image position within the path? – Zoomzoom Jan 31 '14 at 17:41
1

@user3225023 You can use: `self.imageview.layer.position = (CGPoint){};` – Unheilig Jan 31 '14 at 17:53
self.imageview.layer.position changes the "block" position (block = hexagon+image). I want that the hexagon stay at the same position and that I can change the position of the image inside. – Zoomzoom Jan 31 '14 at 18:50
1

@user3225023 Then use this instead: `shapeLayer.position = (CGPoint){};` – Unheilig Jan 31 '14 at 19:15

How to put an image in a custom path

3 Answers3