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
Related
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);
I'm trying to draw a UIBezierPathShape in iOS7 then apply a shadow. This works great except that when I stroke the path, the stroke shows up behind the shape. How can I rectify this?
Code:
- (void)drawDiamondWithCount:(NSUInteger)count inRect:(CGRect)rect {
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIGraphicsPushContext(ctx);
UIEdgeInsets insets = UIEdgeInsetsMake(cardEdgeInsetTop, cardEdgeInsetRight, cardEdgeInsetBottom, cardEdgeInsetLeft);
CGRect insetsRect = UIEdgeInsetsInsetRect(rect, insets);
CGFloat shapeHeight = insetsRect.size.height / (double) count;
CGRect shapeRect;
for (NSUInteger i = 0; i < count; ++i) {
// Get the rect for the single shape
int numRemainingShapes = count - i - 1;
CGFloat remainingBottomSpace = numRemainingShapes * shapeHeight;
insets = UIEdgeInsetsMake(i * shapeHeight + shapeEdgeInsets, 0, remainingBottomSpace + shapeEdgeInsets, 0);
shapeRect = UIEdgeInsetsInsetRect(insetsRect, insets);
UIBezierPath *path = [self getDiamondPath:shapeRect];
[[UIColor redColor] setFill];
[[UIColor blackColor] setStroke];
UIGraphicsPushContext(ctx);
CGContextSetShadow(ctx, CGSizeMake(5, 2), 5);
[path fill];
UIGraphicsPopContext();
//[path stroke];
}
UIGraphicsPopContext();
}
This gives me what I want, minus the stroke
Uncommenting [path stroke] gives me this. I want the stroke, but don't want to see it behind the shape.
I suspect that instead of UIGraphicsPushContext and UIGraphicsPopContext, I think you want CGContextSaveGState and CGContextRestoreGState:
// create context and configure
CGContextRef ctx = UIGraphicsGetCurrentContext();
[[UIColor redColor] setFill];
[[UIColor blackColor] setStroke];
// create path
UIBezierPath *path = ...;
path.lineJoinStyle = kCGLineJoinMiter;
path.lineWidth = 2.0;
// fill the center with shadow
CGContextSaveGState(ctx);
CGContextSetShadow(ctx, CGSizeMake(5, 2), 5);
[path fill];
CGContextRestoreGState(ctx);
// stroke border without shadow
CGContextSetLineWidth(ctx, 2.0);
[path stroke];
With UIGraphicsPushContext and UIGraphicsPopContext you get:
With CGContextSaveGState and CGContextRestoreGState you get:
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;
}
I have a question about Quartz and clipping area:
I would like to have a rectangle A
inside this rectangle I would like to have a rectangle B
The filling of B dveve also cut in A: I would like that A was pierced by B. What is the best way to do this in quartz? I did not really understand how the clipping
If I understand you correctly, you want to draw a smaller rectangle inside a larger rectangle so that the inner rectangle is transparent. You can achieve this by drawing a CAShapeLayer with a path that contains both rectangles as subpaths. Don't forget to set the layer's fill rule to kCAFillRuleEvenOdd.
Try something like this:
CGRect rectA = CGRectMake(100, 100, 200, 200);
CGRect rectB = CGRectMake(150, 150, 100, 100);
UIBezierPath *path=[[UIBezierPath alloc] init];
// Add sub-path for rectA
[path moveToPoint:CGPointMake(rectA.origin.x, rectA.origin.y)];
[path addLineToPoint:CGPointMake(rectA.origin.x+rectA.size.width, rectA.origin.y)];
[path addLineToPoint:CGPointMake(rectA.origin.x+rectA.size.width, rectA.origin.y+rectA.size.height)];
[path addLineToPoint:CGPointMake(rectA.origin.x, rectA.origin.y+rectA.size.height)];
[path closePath];
// Add sub-path for rectB
[path moveToPoint:CGPointMake(rectB.origin.x, rectB.origin.y)];
[path addLineToPoint:CGPointMake(rectB.origin.x+rectB.size.width, rectB.origin.y)];
[path addLineToPoint:CGPointMake(rectB.origin.x+rectB.size.width, rectB.origin.y+rectB.size.height)];
[path addLineToPoint:CGPointMake(rectB.origin.x, rectB.origin.y+rectB.size.height)];
[path closePath];
// Create CAShapeLayer with this path
CAShapeLayer *pathLayer = [CAShapeLayer layer];
[pathLayer setFillRule:kCAFillRuleEvenOdd]; /* <- IMPORTANT! */
[pathLayer setPath:path.CGPath];
[pathLayer setFillColor:[UIColor blackColor].CGColor];
// Add the CAShapeLayer to a view
[someView.layer addSublayer:pathLayer];
I solved with this simple way:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetRGBFillColor(context, 0.0, 0.0, 0.0, 0);
CGContextFillRect(context,self.bounds);
CGContextAddRect(context, self.bounds);
//Add cropped rectangle:
CGContextAddRect(context, _croppedRegion);
//Clip:
CGContextEOClip(context);
CGContextSetRGBFillColor(context, 255.0, 255.0, 255.0, 0.5);
CGContextFillRect(context, self.bounds);
}