Draw partial image or clipping diagonally using Core Graphics

Question

I am looking to draw an image using Core Graphics. However I am able to draw the partial image i.e horizontally & vertically. But instead of it I want to have it in a diagonal Way. For more clarification, please refer to below images:

Real Image: enter image description here

Required Image Output: enter image description here

Below is the code using to fill the Layer with Color:

    CGContextRef contextRef = UIGraphicsGetCurrentContext();

    CGContextMoveToPoint(contextRef, r.origin.x, r.origin.y );
    CGContextAddLineToPoint(contextRef, r.origin.x , r.origin.y);
    CGContextAddLineToPoint(contextRef, r.origin.x + (r.size.width ), r.origin.y + (r.size.height));
    CGContextAddLineToPoint(contextRef, r.origin.x , r.origin.y + (r.size.height));
    CGContextAddLineToPoint(contextRef, r.origin.x  , r.origin.y);
    CGContextSetRGBFillColor(contextRef, [[color objectAtIndex:0]floatValue]/255.0f, [[color objectAtIndex:1]floatValue]/255.0f, [[color objectAtIndex:2]floatValue]/255.0f, .5);
    CGContextSetRGBStrokeColor(contextRef,[[color objectAtIndex:0]floatValue]/255.0f, [[color objectAtIndex:1]floatValue]/255.0f, [[color objectAtIndex:2]floatValue]/255.0f, 0.5);
    CGContextFillPath(contextRef);

Now, I want to draw an image on this Graphics Layer rather than filling color in it. I didn't get any way to crop this image diagonally since we can only pass parameters like Origin x,y & Size Height, Width.

You can use CGPath to create diagonal and clip image in the path. — Vignesh, Mar 26 '12 at 08:07
@Vignesh I am to draw the shape using CGContextRef & also the image. But the question is how to cut that image Diagonally ? — Ajay Sharma, Mar 26 '12 at 08:50
you have to clip context. http://stackoverflow.com/a/3668156/641062 — Vignesh, Mar 26 '12 at 08:55
use mask image search on google you will find some open source implementation. This might do your work http://mattgemmell.com/2010/07/05/mgimageutilities/ — Rahul Vyas, Mar 27 '12 at 06:35
Sorry for the above link this will work for you. http://stackoverflow.com/questions/2776747/masking-a-uiimage — Rahul Vyas, Mar 27 '12 at 06:37

score 3 · Answer 1 · answered Apr 04 '12 at 15:57

3

You should be able to clip the context to the context's current path. Anything you do after having clipped the context will be visible only in that area:

UIImage *img = ...;
CGContextRef contextRef = UIGraphicsGetCurrentContext();

CGContextMoveToPoint(contextRef, r.origin.x, r.origin.y );
CGContextAddLineToPoint(contextRef, r.origin.x , r.origin.y);
CGContextAddLineToPoint(contextRef, r.origin.x + (r.size.width ), r.origin.y + (r.size.height));
CGContextAddLineToPoint(contextRef, r.origin.x , r.origin.y + (r.size.height));
CGContextAddLineToPoint(contextRef, r.origin.x  , r.origin.y);

// clip context to current path
CGContextClip(contextRef);

// draw image
[img drawInRect:rect];

Did this work?

answered Apr 04 '12 at 15:57

Felix Lamouroux

7,414
29
46

let me check out this ... pls – Ajay Sharma Apr 05 '12 at 04:11
Worked awesomely for me :) Thanks! – ViggoV May 24 '13 at 18:03
what is variable r? – Josep Escobar Oct 12 '16 at 00:03
This was taken from the question. I believe r and rect were meant to be the same. – Felix Lamouroux Oct 12 '16 at 07:48

Draw partial image or clipping diagonally using Core Graphics

1 Answers1

Linked