Im trying to achieve a button shapped as
This is the current code I'm trying . It achieves concentric circle but the outer one is filled instead. Help.
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, rect);
CGContextAddEllipseInRect(ctx,
CGRectMake(
rect.origin.x + 10,
rect.origin.y + 10,
rect.size.width - 20,
rect.size.height - 20));
CGContextSetFillColor(ctx, CGColorGetComponents([[UIColor blueColor] CGColor]));
CGContextEOFillPath(ctx);
Make two contexts and fill only the inner circle
- (void)drawRect:(CGRect)rect
{
CGContextRef outer = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(outer, 1.5);
CGContextSetStrokeColorWithColor(outer, [UIColor blueColor].CGColor);
CGContextAddEllipseInRect(outer, CGRectMake(rect.origin.x + 5, rect.origin.y + 5, rect.size.width - 10, rect.size.height - 10));
CGContextStrokePath(outer);
CGContextRef inner = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(inner, 1.5);
CGContextSetFillColorWithColor(inner, [UIColor blueColor].CGColor);
CGContextAddEllipseInRect(inner, CGRectMake(rect.origin.x + 15, rect.origin.y + 15, rect.size.width - 30, rect.size.height - 30));
CGContextFillPath(inner);
}
I have added padding of 5 units to outer context so that it looks like circle and not rounded rectangle.
In your custom view drawRect:
CGContextSetLineWidth(outerCircleContext, 1.0);
CGContextSetStrokeColorWithColor(outerCircleContext, [UIColor greenColor].CGColor);
CGRect outerRectangle = CGRectMake(CGRectGetMidX(rect) - 25, CGRectGetMidY(rect) - 25 , 50, 50);
CGContextAddEllipseInRect(outerCircleContext, outerRectangle);
CGContextStrokePath(outerCircleContext);
CGContextRef innerCircleContext = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(innerCircleContext, 1.0);
CGContextSetFillColorWithColor(innerCircleContext, [UIColor greenColor].CGColor);
CGRect innerRectangle = CGRectMake(CGRectGetMidX(rect) - 20, CGRectGetMidY(rect) - 20 , 40, 40);
CGContextAddEllipseInRect(innerCircleContext, innerRectangle);
CGContextFillPath(innerCircleContext);
Yo can also use path also.
Related
I have this line around my shape:
The problem is, it obviously goes from 1px thick, to 2px. Here's the code I'm using:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGContextSetFillColorWithColor(context, [BUTTON_COLOR CGColor]);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetLineWidth(context, 1);
int radius = 8;
CGContextMoveToPoint(context, 0, self.frame.size.height / 2);
CGContextAddLineToPoint(context, POINT_WIDTH, self.frame.size.height);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height);
CGContextAddArc(context, rect.origin.x + rect.size.width - radius,
rect.origin.y + rect.size.height - radius, radius, M_PI / 2, 0.0f, 1);
CGContextAddLineToPoint(context, rect.origin.x + rect.size.width, rect.origin.y + radius);
CGContextAddArc(context, rect.origin.x + rect.size.width - radius, rect.origin.y + radius,
radius, 0.0f, -M_PI / 2, 1);
CGContextAddLineToPoint(context, POINT_WIDTH, 0);
CGContextAddLineToPoint(context, 0, self.frame.size.height / 2);
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
Any ideas?
The reason your top, bottom, and right edges appear thinner than your diagonals is because you are chopping off half of the lines drawn along those edges. As Costique mentioned, Core Graphics draws a stroke so that it is centered on the path. That means half of the stroke lies on one side of the path, and half of the stroke lies on the other side. Since your path runs exactly along the top, right, and bottom edges of your view, half of the stroke falls outside the bounds of your view and isn't drawn.
Costique is also correct that you should move your paths in by .5 points. (Technically you should move by half the stroke width.) However, you're not specifying your coordinates uniformly based on the rect variable, so moving all your paths is difficult.
What you want to do is inset rect by .5 in both dimensions, adjust your graphics context so that its origin is at rect.origin, and use only rect.size to get your coordinates - not self.frame.size. Here's my test:
- (void)drawRect:(CGRect)dirtyRect
{
CGContextRef gc = UIGraphicsGetCurrentContext();
CGContextSaveGState(gc); {
CGContextSetFillColorWithColor(gc, [UIColor colorWithWhite:.9 alpha:1].CGColor);
CGContextSetStrokeColorWithColor(gc, [[UIColor blackColor] CGColor]);
CGContextSetLineWidth(gc, 1);
static const CGFloat Radius = 8;
static const CGFloat PointWidth = 20;
CGRect rect = CGRectInset(self.bounds, .5, .5);
CGContextTranslateCTM(gc, rect.origin.x, rect.origin.x);
rect.origin = CGPointZero;
CGContextMoveToPoint(gc, 0, rect.size.height / 2);
CGContextAddLineToPoint(gc, PointWidth, rect.size.height);
CGContextAddLineToPoint(gc, rect.origin.x + rect.size.width - Radius,
rect.origin.y + rect.size.height);
CGContextAddArc(gc, rect.origin.x + rect.size.width - Radius,
rect.origin.y + rect.size.height - Radius, Radius, M_PI / 2, 0.0f, 1);
CGContextAddLineToPoint(gc, rect.origin.x + rect.size.width, rect.origin.y + Radius);
CGContextAddArc(gc, rect.origin.x + rect.size.width - Radius, rect.origin.y + Radius,
Radius, 0.0f, -M_PI / 2, 1);
CGContextAddLineToPoint(gc, PointWidth, 0);
CGContextAddLineToPoint(gc, 0, rect.size.height / 2);
CGContextClosePath(gc);
CGContextDrawPath(gc, kCGPathFillStroke);
} CGContextRestoreGState(gc);
}
Here's the result:
Core Graphics draws the stroke on the path edge, that is, half of the stroke width lies inside the path, and the other half, outside. Since you cannot draw outside of the view, half of the stroke is clipped by the context. You have to inset the path by half the stroke width.
The complete example:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextClearRect(context, rect);
CGContextSetFillColorWithColor(context, [BUTTON_COLOR CGColor]);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetLineWidth(context, 1);
int radius = CORNER_RADIUS;
CGRect pathRect = CGRectInset(self.bounds, 0.5f, 0.5f);
CGContextMoveToPoint(context, CGRectGetMinX(pathRect), CGRectGetMidY(pathRect));
CGContextAddLineToPoint(context, CGRectGetMinX(pathRect) + POINT_WIDTH, CGRectGetMaxY(pathRect));
CGContextAddArc(context, CGRectGetMaxX(pathRect) - radius,
CGRectGetMaxY(pathRect) - radius, radius, M_PI / 2, 0.0f, 1);
CGContextAddArc(context, CGRectGetMaxX(pathRect) - radius, CGRectGetMinY(pathRect) + radius,
radius, 0.0f, -M_PI / 2, 1);
CGContextAddLineToPoint(context, CGRectGetMinX(pathRect) + POINT_WIDTH, CGRectGetMinY(pathRect));
CGContextClosePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
Note that several redundant drawing commands are removed without affecting the result. Enjoy.
I want to draw an arc and fill it. The first picture is what it is. I want to get the effect of the second picture
- (id)initWithFrame:(CGRect)frame {
if (self = [super initWithFrame:frame]) {
// 必须清空背景色，不然绘制出来的区域之外有黑色背景
[self setBackgroundColor:[UIColor clearColor]];
[self setUserInteractionEnabled:NO];
}
return self;
}
- (void)drawRect:(CGRect)rect {
float x = rect.origin.x;
float y = rect.origin.y;
float w = rect.size.width;
float h = rect.size.height;
CGContextRef context = UIGraphicsGetCurrentContext();
UIColor *fullColor = [UIColor whiteColor];
CGContextSetFillColorWithColor(context, fullColor.CGColor);
CGContextSetRGBStrokeColor(context,1,1,1,1);
CGContextMoveToPoint(context,0,h - 22);//圆弧的起始点
CGContextAddQuadCurveToPoint(context, w / 2, h, w, h - 22);
CGContextMoveToPoint(context,0,h - 22);//圆弧的起始点
CGContextAddLineToPoint(context, 0, h);
CGContextAddLineToPoint(context, w, h);
CGContextAddLineToPoint(context, w, h - 22);
CGContextStrokePath(context);
CGContextDrawPath(context, kCGPathFillStroke);
}
- (void)drawRect:(CGRect)rect {
float x = rect.origin.x;
float y = rect.origin.y;
float w = rect.size.width;
float h = rect.size.height;
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextFillRect(context, CGRectMake(0, h - 22, kScreenWidth , 22));
CGContextSetFillColorWithColor(context, [UIColor clearColor].CGColor);
// This method
CGContextSetBlendMode(context, kCGBlendModeClear);
CGContextMoveToPoint(context,0,h - 22);
CGContextAddQuadCurveToPoint(context, w / 2, h + 14, w, h - 22);
CGContextDrawPath(context, kCGPathFill);
// This method
CGContextSetBlendMode(context, kCGBlendModeNormal);
}
I found a solution.
CGContextStrokePath() clears the current path. This also applies to CGContextDrawPath(), CGContextEOFillPath(), and, CGContextFillPath().
So when the call CGContextDrawPath(context, kCGPathFillStroke); is made, the current path in the context has just been cleared and is an empty path and nothing is drawn.
Removing the line CGContextStrokePath(context); just above should fix your issue.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 9 years ago.
Improve this question
I am developing an application in IOS in which I want to set an image on in the shape given in the attached image. How can I do that? Please suggest me.
One hours of hard working. Finally... I have added the green border too.
First of you, you just define the path that can clip the image.
- (CGPathRef) pathInRect:(CGRect)rect radius:(CGFloat)radius
{
CGMutablePathRef retPath = CGPathCreateMutable();
CGPathMoveToPoint(retPath, NULL, rect.origin.x + radius, rect.origin.y + 2 * radius);
CGPathAddLineToPoint(retPath, NULL, rect.origin.x, rect.origin.y + 2 * radius);
CGPathAddLineToPoint(retPath, NULL, rect.origin.x, rect.origin.y + radius);
CGPathAddArcToPoint(retPath, NULL, rect.origin.x, rect.origin.y, rect.origin.x + radius, rect.origin.y, radius);
CGPathAddArcToPoint(retPath, NULL, rect.origin.x + 2 * radius, rect.origin.y, rect.origin.x + radius * 2, rect.origin.y + radius, radius);
CGPathAddArcToPoint(retPath, NULL, rect.origin.x + 2 * radius, rect.origin.y + 2 * radius, rect.origin.x + radius, rect.origin.y + 2 * radius, radius);
CGPathCloseSubpath(retPath);
return retPath;
}
In my old project, I am using drawRect for UITableViewCell, so I reuse the code. The code firstly create a new clipped image based on the path, then draw the image. After that, a border with the same path is drawn too.
#define PHOTO_SIDE 40.f
-(void)drawRect:(CGRect)rect {
CGRect frame = CGRectMake(20, 20, PHOTO_SIDE, PHOTO_SIDE);
//Draw clipped image
UIImage *image = [Your Image];
UIGraphicsBeginImageContext(CGSizeMake(PHOTO_SIDE, PHOTO_SIDE));
CGPathRef path = [self pathInRect:frame radius:PHOTO_SIDE / 2];
CGContextAddPath(context, path);
CGContextClip(context);
[image drawInRect:CGRectMake(0, 0, PHOTO_SIDE, PHOTO_SIDE)];
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[newImage drawInRect:frame];
//Draw Border
CGContextSaveGState(context);
[[UIColor greenColor] setStroke];
CGContextSetLineWidth(context, 1.0f);
CGContextAddPath(context, path);
CGContextStrokePath(context);
CGContextRestoreGState(context);
}
You could for example:
Overlay your imageView with a mask image (which has transparent pixels where you want your actual image visibile - like square with hole inside)
Add maskLayer with the shape you want to the layer of your imageView.
Example of UIImage category to create round images to give you an idea:
+ (instancetype)maskedImageWithImage:(UIImage *)image {
if (!image)
return nil;
CGFloat dim = MIN(image.size.width, image.size.height);
CGSize size = CGSizeMake(dim, dim);
UIGraphicsBeginImageContextWithOptions(size, NO, .0);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithOvalInRect:(CGRect){ CGPointZero, size }];
[bezierPath fill];
[bezierPath addClip];
CGPoint offset = CGPointMake((dim - image.size.width) * 0.5, (dim - image.size.height) * 0.5);
[image drawInRect:(CGRect){ offset, image.size }];
UIImage *ret = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return ret;
}
Use it like:
UIImage *myImage = [UIImage imageNamed:#"image"];
myImageView.image = [UIImage maskedImageWithImage:myImage];
To achieve more complicated shape, you essentially need to modify the bezierPath which is effectively a clipping mask.
I wrote a simple drawRect with a intention of drawing a circle, drop a shadow and fill it with blue. I have successfully achieved drawing a circle and filling it in blue but my shadow is not in effect. Instead of fill if I stroke my circle, i see the shadow is inside the circle and during fill it is drawn over by fill colour
rect to my drawRect has dimension [[CustomButton alloc]initWithFrame:CGRectMake(0, 0, 50, 50)];
#implementation CustomButton
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
[self setBackgroundColor:[UIColor clearColor]];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorRef colorRef = [[UIColor blueColor] CGColor];
CGContextSetStrokeColorWithColor(context, colorRef);
CGContextSetFillColorWithColor(context, [[UIColor blueColor] CGColor]);
CGRect buttonRect = CGRectInset(rect, 3, 3);
CGPoint centerPoint = CGPointMake(CGRectGetMidX(buttonRect ), CGRectGetMidY(buttonRect));
CGFloat radius = CGRectGetWidth(buttonRect) / 2;
CGContextSaveGState(context);
CGContextSetShadow(context, CGSizeMake(15.0, 20.0), 1.0);
CGContextAddArc(context, centerPoint.x, centerPoint.y, radius, 0, 2*M_PI, 1);
CGContextClip(context);
CGContextFillRect(context, buttonRect);
CGContextRestoreGState(context);
CGColorRelease(colorRef);
}
#end
Thank you
Try this:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGColorRef colorRef = [[UIColor blueColor] CGColor];
CGContextSetStrokeColorWithColor(context, colorRef);
CGContextSetFillColorWithColor(context, [[UIColor blueColor] CGColor]);
CGRect buttonRect = CGRectInset(rect, 3, 3);
CGPoint centerPoint = CGPointMake(CGRectGetMidX(buttonRect ), CGRectGetMidY(buttonRect));
CGFloat radius = CGRectGetWidth(buttonRect) / 2;
CGContextSaveGState(context);
CGContextSetShadow(context, CGSizeMake(2.0, 2.0), 2.0);
CGContextAddArc(context, centerPoint.x, centerPoint.y, radius, 0, 2*M_PI, 1);
//CGContextClip(context);
CGContextFillPath(context);
CGContextRestoreGState(context);
CGColorRelease(colorRef);
}
Your shadow was rectangular and that is why it was not seen under the circle. I changed the call CGContextFillRect to CGContextFillPath, the path which you already create using CGContextAddArc.
Is this what you were going for?
EDIT
You can find a project here: https://bitbucket.org/reydan/so_circleshadow
In this code
CGRect contextRect = self.bounds;
will refer which bound? rectangle, imageRect, or whole iOS view.
I am trying to manipulate image using quartz2D, i created this code by looking different examples, and code written between // is from Apple Quartz2D guide draw text.
Thanks in advance,
Regards.
- (void)drawRect:(CGRect)rect
{
CGSize cgs = CGSizeMake(250.0, 400.0);
UIGraphicsBeginImageContext(cgs);
CGRect rectangle = CGRectMake(0,0,cgs.width,cgs.height);
CGRect imageRect = CGRectInset(rectangle, 5.4, 5.4);
imageRect.size.height -= 100;
UIImage *myImage = [UIImage imageNamed:#"pumpkin.jpg"];
[myImage drawInRect:imageRect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 10.0);
CGContextSetRGBStrokeColor(context, 0.0, 0.0, 1.0, 1.0);
CGContextStrokeRect(context, rectangle);
//
CGRect contextRect = self.bounds;
CGContextTranslateCTM(context, 0, contextRect.size.height);
CGContextScaleCTM(context, 1, -1);
float w, h;
w = contextRect.size.width;
h = contextRect.size.height;
CGAffineTransform myTextTransform;
CGContextSelectFont (context, "Helvetica-Bold", h/10, kCGEncodingMacRoman);
CGContextSetCharacterSpacing (context, 10);
CGContextSetTextDrawingMode (context, kCGTextFillStroke);
CGContextSetRGBFillColor(context, 0, 1, 0, .5);
CGContextSetRGBStrokeColor(context, 0, 0, 1, 1);
myTextTransform = CGAffineTransformMakeRotation(0);
CGContextSetTextMatrix(context, myTextTransform);
CGContextShowTextAtPoint(context, 0, 50, "Quartz 2D", 9);
//
UIImage *testImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[testImg drawAtPoint:CGPointMake(35, 10)];
}
self.frame indicates the coords and size of the view in its parent view coordinate system.
self.bounds indicates the coords and size of the view in its own coordinate system. So it always has the same width and height as self.frame, but it has x and y equal to 0.
self.bounds is equal to CGRectMake(0, 0, self.frame.size.width, self.frame.size.height).
So your code:
CGRect contextRect = self.bounds;
is the same as:
CGRect contextRect = rect;