iOS Drawing/Filling Image in an Ellipse

[code.warrior]

Hi,

Firstoff, I'm a newbie to Cocoa frameworks, Objective-C and iPhone development.
I'm working on an application, wherein I've decided to put an image in the ellipse which I'm filling up into a rectangle, using the normal

CGContextFillEllipseInRect()

method.
Now, I've been through the API reference, but I couldn't figure out a way to do this.
Can anyone suggest me something in this regards?

Thanks for reading through, appreciate your help.

 

[jnic]

Here's all the sample code you'll ever need: http://developer.apple.com/document...wToQuartz2D/tq_other/chapter_3_section_6.html

If you just want to draw a shape and return it as a UIImage, something like this should do the trick:

// Set these yourself.
CGSize yourSize;
CGRect yourRect;

// Context.
UIGraphicsBeginImageContext(yourSize);
CGContextRef context = UIGraphicsGetCurrentContext();

// Fill color.
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);

// Your drawing code.
CGContextFillEllipseInRect(context, yourRect);

// Get the image and return.
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
	
return image;

 

[code.warrior]

Here's all the sample code you'll ever need: http://developer.apple.com/document...wToQuartz2D/tq_other/chapter_3_section_6.html

If you just want to draw a shape and return it as a UIImage, something like this should do the trick:

// Set these yourself.
CGSize yourSize;
CGRect yourRect;

// Context.
UIGraphicsBeginImageContext(yourSize);
CGContextRef context = UIGraphicsGetCurrentContext();

// Fill color.
CGContextSetRGBFillColor(context, 1.0, 0.0, 0.0, 1.0);

// Your drawing code.
CGContextFillEllipseInRect(context, yourRect);

// Get the image and return.
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
	
return image;

Hi jnic,

Thanks for the reference to the documentation. I was already going through( it gives the pointers, albeit doesn't help much).
But my query is regarding, putting/displaying an image( e.g. a .png file) inside the ellipse( I've no problem generating a plain rectangle and ellipse shape and return it as an UIImage. Putting image inside it is the next step for me now).

I've been going through documentations as well as various sample code on the topics, but none has any hint on this matter. I'll really appreciate if anyone helps me in this regard.

Thanks again.

 

[jnic]

putting/displaying an image( e.g. a .png file) inside the ellipse

Ah, my misunderstanding. To draw an image into a graphics context:

CGPoint yourPoint;
[yourImage drawAtPoint:yourPoint];

To put that image into an ellipse, clipping is what you want: http://developer.apple.com/document...wToQuartz2D/tq_other/chapter_3_section_9.html

So, something like:

CGContextBeginPath(context);
CGContextAddPath(context, [B]yourPath[/B]);
CGContextClosePath(context);
CGContextClip(context);

where yourPath is your elliptical path will clip the image you've drawn/imported to that path (Listing 2-4 in that first documentation link has sample code for an arc path).

 

[code.warrior]

Ah, my misunderstanding. To draw an image into a graphics context:

CGPoint yourPoint;
[yourImage drawAtPoint:yourPoint];

To put that image into an ellipse, clipping is what you want: http://developer.apple.com/document...wToQuartz2D/tq_other/chapter_3_section_9.html

So, something like:

CGContextBeginPath(context);
CGContextAddPath(context, [B]yourPath[/B]);
CGContextClosePath(context);
CGContextClip(context);

where yourPath is your elliptical path will clip the image you've drawn/imported to that path (Listing 2-4 in that first documentation link has sample code for an arc path).

Thanks jnic, I think I got it with that.
Although, I'd gone through that in the documentation, I wanted it not to clip the image, but I guess I'll work around to achieve it somehow.

Thanks again, appreciate your response, I'll get back if I need any more help.

 

[dejo]

Although, I'd gone through that in the documentation, I wanted it not to clip the image, but I guess I'll work around to achieve it somehow.

If you don't want it clipped, please describe in further detail what you mean by
"putting/displaying an image inside the ellipse". Perhaps even including some kind of diagram to demonstrate what you're trying to achieve.

 

[code.warrior]

If you don't want it clipped, please describe in further detail what you mean by
"putting/displaying an image inside the ellipse". Perhaps even including some kind of diagram to demonstrate what you're trying to achieve.

Hi dejo,

my bad. What I meant to say was, that I want the image to be displayed, intact( without clipping) inside the ellipse. I've attached a .png file ( logoEllipse.png ) for further clarification on this matter.
The Rectangle in the logoEllipse.png file is the logo/image rectangle, while the inner ellipse is the one which we get when use:

CGContextStrokeEllipseInRect()

method.
What I'm looking for is a method which will draw the ellipse outside that rectangle to enclose the whole image in that way. The greater ellipse outside the rectangle shows, what I'm looking for. So, the ellipse takes the same center as the rectangle, at the same time, taking all rectangle's vertices, on its periphery as well. It may sound odd, but thats what is intended in the application, to show up the image inside it as it is.

I hope I was able to make it more elaborate this time.

Thanks.

 

[PhoneyDeveloper]

There are a couple likely ways of accomplishing this.

Write a subclass of UIView, call it MyEllipseView or EllipseView or XEllipseView or something like that. All it does is override drawRect and draw an ellipse. Add a UIImageView as a subview to your ellipse view. The only trick is figuring out the position of the subview.

Alternatively, write your subclass of UIView as above. Have it draw the ellipse and also draw the image. Drawing an image is simple. Overall it might be simpler to draw both the image and the ellipse in one view, rather than two.

 

[dejo]

Hi dejo,

my bad. What I meant to say was, that I want the image to be displayed, intact( without clipping) inside the ellipse. I've attached a .png file ( logoEllipse.png ) for further clarification on this matter.
The Rectangle in the logoEllipse.png file is the logo/image rectangle, while the inner ellipse is the one which we get when use:

CGContextStrokeEllipseInRect()

method.
What I'm looking for is a method which will draw the ellipse outside that rectangle to enclose the whole image in that way. The greater ellipse outside the rectangle shows, what I'm looking for. So, the ellipse takes the same center as the rectangle, at the same time, taking all rectangle's vertices, on its periphery as well. It may sound odd, but thats what is intended in the application, to show up the image inside it as it is.

I hope I was able to make it more elaborate this time.

Thanks.

Thanks. That is much clearer now. I think what you need to do is adjust the size of the CGRect for the ellipse to be large enough to encompass the image you will place inside of it.Then, you will probably either need to offset the image, if using the same CGRect or, perhaps, just use a different CGRect, if you even need to use one at all, to place the image.

 

[code.warrior]

Thanks. That is much clearer now. I think what you need to do is adjust the size of the CGRect for the ellipse to be large enough to encompass the image you will place inside of it.Then, you will probably either need to offset the image, if using the same CGRect or, perhaps, just use a different CGRect, if you even need to use one at all, to place the image.

Hi Dejo,
you're right. I'll do that. I guess a little trial and error should do the trick.
Actually, the reason why I'd asked this query was that, I thought that, there might be a method/tricky workaround somewhere, through which we can draw the ellipse outside the rectangle( and since being a new-born in the Xcode-world, I thought to ask over here to clarify it)
anyways, Thanks for all the responses. I think those really helped me alot to proceed further.