In iOS i'm trying to draw a clipped image. I want the clipping to be from one edge, curved to the farthest opposite edge. The below image illustrates in red, the border of the final image. In this example the curve goes from bottom left to top right.
Here is the code I currently wrote. My only problem is this method bezierPathWithRoundedRect:byRoundingCorners:cornerRadii: does not curve to the extend i need.
- (UIImage *)roundCorneredImage:(UIImage *)image radius:(CGFloat)radius {
CGRect imageRect = CGRectZero;
imageRect.size = image.size;
UIGraphicsBeginImageContextWithOptions(imageRect.size, NO, [UIScreen mainScreen].scale);
CGSize size = CGSizeMake(radius, radius);
[[UIBezierPath bezierPathWithRoundedRect:imageRect byRoundingCorners:UIRectCornerBottomRight cornerRadii:size] addClip];
[image drawInRect:imageRect];
UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
UPDATE:
Heres the result I'm getting and my updated code. I need some further assistance...
UIBezierPath* bezier = [UIBezierPath bezierPath];
[bezier moveToPoint:CGPointMake(0, 0)];
[bezier addLineToPoint:CGPointMake(0, imageRect.size.height)];
[bezier addArcWithCenter:CGPointMake(imageRect.size.width / 2, imageRect.size.height / 2)
radius:imageRect.size.height / 2
startAngle:M_PI / 2
endAngle:0
clockwise:NO];
[bezier addLineToPoint:CGPointMake(0, 0)];
[bezier addClip];
Add the straight lines with addLineToPoint and the curve with addArcWithCenter:radius:startAngle:endAngle:clockwise: so that you have control over the shape of the curve.
Heres my solution for anyone else who wanted to see some sample code.
- (UIImage *)roundCorneredImage:(UIImage *)image radius:(CGFloat)radius {
CGRect imageRect = CGRectZero;
imageRect.size = image.size;
UIGraphicsBeginImageContextWithOptions(imageRect.size, NO, [UIScreen mainScreen].scale);
UIBezierPath* bezier = [UIBezierPath bezierPath];
[bezier moveToPoint:CGPointMake(imageRect.size.width, 0)];
[bezier addLineToPoint:CGPointMake(0, 0)];
[bezier addLineToPoint:CGPointMake(0, imageRect.size.height)];
[bezier addArcWithCenter:CGPointMake(0, 0) radius:imageRect.size.height startAngle:M_PI / 2 endAngle:0 clockwise:NO];
[bezier addClip];
[image drawInRect:imageRect];
UIImage* result = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return result;
}
Related
I want to draw a delete button just like the delete app button on home screen like below code.
The idea is draw the cross first, and then rotate 45 degree. What's wrong with my code?
self.deleteButton = [[UIButton alloc] initWithFrame:CGRectMake(0, 0, BADGE_SIZE, BADGE_SIZE)];
if (!deleteBtnImg) {
CGRect imgFrame = self.deleteButton.bounds;
UIGraphicsBeginImageContextWithOptions(imgFrame.size, NO, 0.0);
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGFloat size = MIN(imgFrame.size.width, imgFrame.size.height);
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(imgFrame.size.width/2, imgFrame.size.height/2)
radius:size/2-RADIUS_MARGIN
startAngle:0
endAngle:M_PI * 2
clockwise:YES];
[path moveToPoint:CGPointMake(size / 2, 0)];
[path addLineToPoint:CGPointMake(size / 2, size)];
[path moveToPoint:CGPointMake(0, size / 2)];
[path addLineToPoint:CGPointMake(size, size / 2)];
[[UIColor whiteColor] setFill];
[[UIColor redColor] setStroke];
[path setLineWidth:1.0];
[path fill];
[path stroke];
CGContextRotateCTM(context, M_PI/4);
deleteBtnImg = UIGraphicsGetImageFromCurrentImageContext();
CGContextRestoreGState(context);
UIGraphicsEndImageContext();
}
[self.deleteButton setImage:deleteBtnImg forState:UIControlStateNormal];
You have to rotate the context before start drawing. However even if you rotate before drawing. The image still does not look right. It is because when you rotate the context, the context is actually rotating around it's origin point which is (0,0) or the bottom-left corner (The CoreGraphic's coordinate system is a bit different from UI's). So what you could do is, before rotation, translate the context so that it will rotate around its center, and then move it back after rotation. Here is a quick example:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGFloat size = MIN(imgFrame.size.width, imgFrame.size.height);
CGContextTranslateCTM(context, size / 2, size / 2);
CGContextRotateCTM(context, M_PI_4);
CGContextTranslateCTM(context, -size / 2, -size / 2);
// Start your drawing code
given an image below and a percentage say 25%. How can I generate another UIImage that represent 25% of the radial portion of the given image? Any help is greatly appreciated.
input
output
- (UIImage *)radialPortion:(float)percent image:(UIImage *)image;
- (UIImage *)radialPortion:(float)percent image:(UIImage *)image
{
CGSize size = image.size;
CGRect rect = {CGPointZero,size};
UIGraphicsBeginImageContext(size);
CGFloat radius = MAX(size.width, size.height)/2;
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint center = CGPointMake(size.width/2, size.height/2);
[path moveToPoint:center];
[path addLineToPoint:CGPointMake(center.x, center.y-radius)];
[path addArcWithCenter:center radius:radius startAngle:-M_PI_2 endAngle:-M_PI_2+M_PI*2*percent clockwise:1];
[path closePath];
[path addClip];
[image drawInRect:rect];
return UIGraphicsGetImageFromCurrentImageContext();
}
Note:the code just work for the sample image,may not work for other image.
I am using lineWidth to create a circle with stroke width 4. I am using UIBezierPath for creating the circle. But, due to some reason, lineWidth is always rendering a circle with a thin stroke no matter what value I assign to lineWidth. I have also tried to put path.lineWidth = 100.0, but no change in stroke width.
This is my code:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(progressView.frame.size.width, progressView.frame.size.height), NO, 0.0);
[[UIColor colorWithRed:246.0/255.0 green:80.0/255.0 blue:36.0/255.0 alpha:1.0] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(progressView.frame.size.width/2 ,progressView.frame.size.height/2) radius:progressView.frame.size.width/2 - 5 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(angle) clockwise:YES];
[path stroke];
path.lineWidth = 4;
UIImage* pathImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[progressView setImage:pathImg];
I googled a lot, but could not find any solution to this problem.
You need to set the stroke width before you actually stroke the path:
UIGraphicsBeginImageContextWithOptions(CGSizeMake(progressView.frame.size.width, progressView.frame.size.height), NO, 0.0);
[[UIColor colorWithRed:246.0/255.0 green:80.0/255.0 blue:36.0/255.0 alpha:1.0] setStroke];
UIBezierPath *path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(progressView.frame.size.width/2 ,progressView.frame.size.height/2) radius:progressView.frame.size.width/2 - 5 startAngle:DEGREES_TO_RADIANS(0) endAngle:DEGREES_TO_RADIANS(angle) clockwise:YES];
path.lineWidth = 4;
[path stroke];
UIImage* pathImg = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
[progressView setImage:pathImg];
I am trying to draw circles on an image view for an ios application and there will be many circles and I want them to be in the same layer. My circle drawing code is;
UIBezierPath *circle = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:0
endAngle:2.0*M_PI
clockwise:YES];
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.bounds = CGRectMake(0, 0, 2.0*radius, 2.0*radius);
circleLayer.path = circle.CGPath;
circleLayer.backgroundColor = [UIColor orangeColor].CGColor;
and I need some thing different than the code below;
[imageView.layer addSublayer:circleLayer];
thanks.
From this site: http://www.cocoanetics.com/2010/07/drawing-on-uiimages/
- (UIImage *)imageByDrawingCircleOnImage:(UIImage *)image
{
// begin a graphics context of sufficient size
UIGraphicsBeginImageContext(image.size);
// draw original image into the context
[image drawAtPoint:CGPointZero];
// get the context for CoreGraphics
CGContextRef ctx = UIGraphicsGetCurrentContext();
// set stroking color and draw circle
[[UIColor redColor] setStroke];
// make circle rect 5 px from border
CGRect circleRect = CGRectMake(0, 0,
image.size.width,
image.size.height);
circleRect = CGRectInset(circleRect, 5, 5);
// draw circle
CGContextStrokeEllipseInRect(ctx, circleRect);
// make image out of bitmap context
UIImage *retImage = UIGraphicsGetImageFromCurrentImageContext();
// free the context
UIGraphicsEndImageContext();
return retImage;
}
I am trying to draw arc within a circle and fill the arc's. Here is the code i am using:
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGContextAddEllipseInRect(ctx, rect);
CGContextSetFillColor(ctx, CGColorGetComponents([[clrArray objectAtIndex:0] CGColor]));
CGContextFillPath(ctx);
CGFloat radius = 12.5;
CGFloat startAngle1 = DegreesToRadians(0);
CGFloat endAngle1 = DegreesToRadians(135);
CGFloat startAngle2 = DegreesToRadians(135);
CGFloat endAngle2 = DegreesToRadians(270);
//draw arc
CGPoint center = CGPointMake(radius,radius);
//Arc 1
CGContextAddArc(ctx,
center.x,
center.y,
radius,
startAngle1,
endAngle1,
YES);
[(UIColor*)[clrArray objectAtIndex:1] set];
CGContextFillPath(ctx);
//Arc 2
CGContextAddArc(ctx,
center.x,
center.y,
radius,
startAngle2,
endAngle2,
YES);
[(UIColor*)[clrArray objectAtIndex:2] set];
CGContextFillPath(ctx);
It is not drawing right. If i only provide one arc then if its angle is less than 180 then it is also not daring right. What i am doing wrong?
Edit: Here is the image of what is happening
I used start angle 0 and end angle 45 in this image
Got another solution using bezier Path
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat radius = 50.0/2.0;
CGPoint center = CGPointMake(radius,radius);
CGFloat startAngle1 = DegreesToRadians(0);
CGFloat endAngle1 = DegreesToRadians(120);
CGFloat startAngle2 = DegreesToRadians(120);
CGFloat endAngle2 = DegreesToRadians(240);
CGContextSaveGState(ctx);
UIBezierPath* clip1 = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:startAngle1
endAngle:endAngle1
clockwise:YES];
[clip1 addLineToPoint:center];
[clip1 closePath];
[clip1 addClip];
UIBezierPath *arc1 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)];
[[UIColor blackColor] set];
[arc1 fill];
CGContextRestoreGState(ctx);
CGContextSaveGState(ctx);
UIBezierPath* clip2 = [UIBezierPath bezierPathWithArcCenter:center
radius:radius
startAngle:startAngle2
endAngle:endAngle2
clockwise:YES];
[clip2 addLineToPoint:center];
[clip2 closePath];
[clip2 addClip];
UIBezierPath *arc2 = [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0, 0, 50, 50)];
[[UIColor orangeColor] set];
[arc2 fill];
CGContextRestoreGState(ctx);