Core Graphics - Shadow not seen - ios

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

Related

CGContextDrawPath only strokes and does not fill

I am trying to make a shape that strokes and fills but it does not fill.
Here is my code:
- (void)drawLayer:(CALayer *)layer inContext:(CGContextRef)ctx
{
CGMutablePathRef pathRef = CGPathCreateMutable();
CGContextBeginPath(ctx);
self.dottedLineColor = [UIColor whiteColor];
self.solidLineColor = [UIColor blackColor];
CGContextSetStrokeColorWithColor(ctx, [self.dottedLineColor CGColor]);
CGContextSetFillColorWithColor(ctx, [UIColor blackColor].CGColor);
CGContextSetLineWidth(ctx, 11.0);
for (NSArray *array in previewPoints){
CGPoint pointMadeFromString1 = CGPointFromString([array objectAtIndex:0]);
CGPoint pointMadeFromString2 = CGPointFromString([array objectAtIndex:1]);
CGPathMoveToPoint(pathRef, NULL, pointMadeFromString1.x, pointMadeFromString1.y);
CGPathAddLineToPoint(pathRef, NULL, pointMadeFromString2.x, pointMadeFromString2.y);
/*
CGContextMoveToPoint(ctx, pointMadeFromString1.x, pointMadeFromString1.y);
CGContextAddLineToPoint(ctx, pointMadeFromString2.x, pointMadeFromString2.y);
CGContextSetLineWidth(ctx, 11.0);
const CGFloat dashPattern[2] = {2, 0};
CGContextSetLineDash(ctx, 2, dashPattern, 2);
CGContextStrokePath(ctx);
*/
}
CGContextAddPath(ctx, pathRef);
CGContextClosePath(ctx);
CGContextDrawPath(ctx, kCGPathFillStroke);
CGContextFillPath(ctx);
}
Here is it how it looks now:
The area in the middle should be black.
How would I fix this?
The issue was that every time I was using CGPathMoveToPoint which would mean that it couldn't fill since it was not actually a closed path. I switched it so that only the first item in the array would use CGPathMoveToPoint and then all of the others would use CGPathAddLineToPoint.

What is wrong with my CGContextclip.

I am beginner with Core Garphics and I am try to get around with my understanding of CGContextclip. I am doing a simple program with custom UIButton drawrect as below
Rect dimension passed to drawRect method is CustomButton *button = [[CustomButton alloc]initWithFrame:CGRectMake(0, 0, 100, 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]);
CGContextSetLineWidth(context, 3.0f);
CGContextAddRect(context, rect);
CGContextStrokeRect(context, rect);
//CGContextFillRect(context, rect);
CGContextSaveGState(context);
CGContextSetStrokeColorWithColor(context, [[UIColor redColor] CGColor]);
CGContextSetFillColorWithColor(context, [[UIColor redColor]CGColor]);
CGMutablePathRef rectPath = CGPathCreateMutable();
CGPathMoveToPoint(rectPath, NULL, CGRectGetMinX(rect), CGRectGetMidY(rect));
CGPathAddLineToPoint(rectPath, NULL, CGRectGetMaxX(rect), CGRectGetMidY(rect));
CGPathAddLineToPoint(rectPath, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect));
CGPathAddLineToPoint(rectPath, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect));
CGPathCloseSubpath(rectPath);
CGContextAddPath(context, rectPath);
CGContextClip(context);
CGContextStrokePath(context);
//CGContextFillPath(context);
CGContextRestoreGState(context);
CGColorRelease(colorRef);
}
#end
I am expecting a full rect with dimension (0,0,100,50) colored in blue and a half rect inside with red coloured. I am getting the blue colored rect but red colored rect is not visible in my context.
I have gone through some solution here and also at some blogs but to my faulty eyes the code looks simple and fine. What is wrong with my clipping.
Thank you for your time and response.
I think there's no path in the context anymore after you clipped it.Just fill another rectangle:
//CGContextFillPath(context);
CGContextFillRect(context, rect);

Rounded Corners at bottom CoreGraphics iOS

To draw
border at the bottom, left and right .
rounded corners at the bottom
clip to the border
Fill the colour with the actual colour, which might be set in the .xib file, but in the following code I had set the colour to clear colour.
For the the above things and the code listed below I get the following output.
A rough idea of the required output can be found as below in the image.
-(id) initWithCoder:(NSCoder *)aDecoder{
self=[super initWithCoder:aDecoder];
if(self){
self.clipsToBounds=YES;
self.backgroundColor=[UIColor clearColor];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGFloat margin=2.0;
CGRect outerRect=CGRectInset(rect, margin, margin);
CGMutablePathRef path=createRoundedRectForRect(outerRect, 10.0);
CGFloat margin1=1.0;
CGRect innerRect=CGRectInset(outerRect, margin1, margin1);
CGMutablePathRef innerPath=createRoundedRectForRect(innerRect, 5.0);
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextAddPath(context, path);
CGContextAddPath(context, innerPath);
CGContextClip(context);
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor
);
CGContextStrokeRect(context, rect);
CGContextSetFillColorWithColor(context, [UIColor redColor].CGColor
);
CGContextFillRect(context, innerRect);
CGContextRestoreGState(context);
}
CGMutablePathRef createRoundedRectForRect (CGRect rect, CGFloat radius){
CGMutablePathRef path=CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMinY(rect));
CGPathAddArcToPoint(path, NULL, CGRectGetMaxX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMaxY(rect), radius);
CGPathAddArcToPoint(path, NULL, CGRectGetMinX(rect), CGRectGetMaxY(rect), CGRectGetMinX(rect), CGRectGetMinY(rect), radius);
CGPathAddLineToPoint(path, NULL, CGRectGetMinX(rect),CGRectGetMinY(rect));
return path;
}
Part 2, Changes
These below changes gives me the following output, where "Add" Button still overlaps and is not clipped to the border.
The output is almost the expected one, as seen in the following image.
- (void)drawRect:(CGRect)rect
{
CGSize radii=CGSizeMake(10.0, 10.0);
UIBezierPath *path=[UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerBottomLeft|UIRectCornerBottomRight cornerRadii:radii];
[[UIColor blackColor] setFill];
[path fill];
CGFloat margin=4.0;
CGRect innerRect=CGRectMake(rect.origin.x+margin, 0, rect.size.width-(2*margin), rect.size.height-margin);
//Scaling InnerRadii
CGSize radii2=CGSizeMake(radii.width-margin, radii.height-margin);
UIBezierPath *innerPath=[UIBezierPath bezierPathWithRoundedRect:innerRect byRoundingCorners:UIRectCornerBottomRight|UIRectCornerBottomLeft cornerRadii:radii2];
[[UIColor redColor] setFill];
[innerPath fill];
}
Here is how I would do it. I would create an outer rectangle with the bottom corners rounded. Then, I would duplicate this rectangle and change its dimensions so it's slightly smaller and overlay it on top of the first rectangle.
- (void) drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(10.0f, 10.0f)];
[[UIColor blackColor] setFill];
[path fill];
CGRect innerRect = CGRectInset(rect, 4.0f, 2.0f);
innerRect.origin.y -= 2.0f;
UIBezierPath *innerPath = [UIBezierPath bezierPathWithRoundedRect:innerRect
byRoundingCorners:UIRectCornerBottomLeft | UIRectCornerBottomRight cornerRadii:CGSizeMake(8.0f, 8.0f)];
[[UIColor redColor] setFill];
[innerPath fill];
}
This produces the following output:
Edit: scaled the cornerRadii as Paul.s suggested.

UITableView addsubview crahes

I want to add a custom UIView that contains an CABasicAnimation to a UITableViewCell. I do this the following way
if( self.pie_chart_view == nil )
self.pie_chart_view = [[PieChartView alloc] initWithFrame:CGRectMake( 0.f, 0.f, 30.f, 30.f )];
[pie_chart_view animate_progress_from:0.0 to:1.0 with_duration:5.0];
[cell.contentView addSubview:pie_chart_view];
But the code crashes as the following screenshot demonstrates:
The crash apparently is caused in the following piece of code
- (void)drawInContext:(CGContextRef)context {
CGRect circleRect = CGRectInset(self.bounds, 1, 1);
CGColorRef borderColor = [[UIColor whiteColor] CGColor];
CGColorRef backgroundColor = [[UIColor colorWithWhite:0 alpha: 0.75] CGColor];
CGContextSetFillColorWithColor(context, backgroundColor); <--- CRASHES ON THIS LINE WITH EXC_BAD_ACCESS
CGContextSetStrokeColorWithColor(context, borderColor);
CGContextSetLineWidth(context, 2.0f);
CGContextFillEllipseInRect(context, circleRect);
CGContextStrokeEllipseInRect(context, circleRect);
CGFloat radius = MIN(CGRectGetMidX(circleRect), CGRectGetMidY(circleRect));
CGPoint center = CGPointMake(radius, CGRectGetMidY(circleRect));
CGFloat startAngle = -M_PI / 2;
CGFloat endAngle = self.progress * 2 * M_PI + startAngle;
CGContextSetFillColorWithColor(context, borderColor);
CGContextMoveToPoint(context, center.x, center.y);
CGContextAddArc(context, center.x, center.y, radius, startAngle, endAngle, 0);
CGContextClosePath(context);
CGContextFillPath(context);
[super drawInContext:context];
}
But I do not see why it should crash. My project uses ARC. What am I missing here?
Okay, I solved the problem. When using ARC the UIColor is deleted immediatly. One can repair this by doing the following:
UIColor * __autoreleasing borderColor = [UIColor whiteColor];
UIColor * __autoreleasing backgroundColor = [UIColor colorWithWhite:0 alpha: 0.75];
CGContextSetFillColorWithColor(context, backgroundColor.CGColor );
CGContextSetStrokeColorWithColor(context, borderColor.CGColor );
After that the code no longer crashes.

iOS Brush Hardness like Photoshop

How to get the following brush smoothness(hardness) effect like photoshop?
My attempt:
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, 30);
CGContextSetStrokeColorWithColor(context, [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:0.5f].CGColor);
CGContextSetShadowWithColor(context, CGSizeMake(0, 0), 20.0f, [UIColor colorWithRed:1.0f green:0.0f blue:0.0f alpha:1.0f].CGColor);
CGContextAddPath(context, path);
CGContextStrokePath(context);
CGContextRestoreGState(context);
I tried adjusting alpha values, and shadow blur factor, but no successful result.
Does anybody have a solution to this? Any help would be appreciated.
On this image you can see following code result. I believe it is almost same to what you want.
Just outer shadow is not just enough to give that smooth effect that is why I add some inner shadow to shape with white color.
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
// Shadows
UIColor* shadow = UIColor.redColor;
CGSize shadowOffset = CGSizeMake(0.1, -0.1);
CGFloat shadowBlurRadius = 11;
UIColor* shadow2 = UIColor.whiteColor; // Here you can adjust softness of inner shadow.
CGSize shadow2Offset = CGSizeMake(0.1, -0.1);
CGFloat shadow2BlurRadius = 9;
// Rectangle Drawing
UIBezierPath* rectanglePath = [UIBezierPath bezierPathWithRoundedRect: CGRectMake(59, 58, 439, 52) cornerRadius: 21];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, [shadow CGColor]);
[UIColor.redColor setFill];
[rectanglePath fill];
// Rectangle Inner Shadow
CGContextSaveGState(context);
UIRectClip(rectanglePath.bounds);
CGContextSetShadowWithColor(context, CGSizeZero, 0, NULL);
CGContextSetAlpha(context, CGColorGetAlpha([shadow2 CGColor]));
CGContextBeginTransparencyLayer(context, NULL);
{
UIColor* opaqueShadow = [shadow2 colorWithAlphaComponent: 1];
CGContextSetShadowWithColor(context, shadow2Offset, shadow2BlurRadius, [opaqueShadow CGColor]);
CGContextSetBlendMode(context, kCGBlendModeSourceOut);
CGContextBeginTransparencyLayer(context, NULL);
[opaqueShadow setFill];
[rectanglePath fill];
CGContextEndTransparencyLayer(context);
}
CGContextEndTransparencyLayer(context);
CGContextRestoreGState(context);
CGContextRestoreGState(context);
}
Regarding size of the shape you have to adjust both inner and outer shadows blur radius.
You can get an effect similar to what you're trying to achieve by blending your shadow with your stroke
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddPath(context, path);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
CGContextSetShadowWithColor(context, CGSizeMake(0.f, 0.f), self.lineWidth/4, [self.lineColor CGColor]);
CGContextSetBlendMode(context, kCGBlendModeMultiply);
CGContextSetAlpha(context, self.lineAlpha);
CGContextStrokePath(context);
With Multiply blending mode, using white color as stroke color and setting the color of the brush you want to the shadow, you get the following result:
I've connected the drawing function to touchesMoved event, so that way the longer I take to paint a part of the image, the harder the "Brush" draws (see the black line).
This probably isn't the perfect answer, but it's the best I can do for my needs.
Grab the FXBlurView: https://github.com/nicklockwood/FXBlurView
You can either draw your strokes on an FXBlurView or convert your UIView to UIImage after you've finished drawing (using the code I took from this answer https://stackoverflow.com/a/22494886/505259):
+ (UIImage *) imageWithView:(UIView *)view
{
UIGraphicsBeginImageContextWithOptions(view.bounds.size, view.opaque, 0.0f);
[view drawViewHierarchyInRect:view.bounds afterScreenUpdates:NO];
UIImage * snapshotImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return snapshotImage;
}
and use FXBlurView's category on UIImage:
- (UIImage *)blurredImageWithRadius:(CGFloat)radius
iterations:(NSUInteger)iterations
tintColor:(UIColor *)tintColor;
to blur the resulting image, giving it a Photoshop soft brush like appearance.
I'm still looking for a real answer though. I have an OpenCV project that requires an exact replica of Photoshop's soft brush tool.
I've been working on drawing the path with inner glow, and somehow succeeded (at least for my taste).
I've implemented the drawing code on top of the levinunnick's Smooth-Line-View. The code is MIT licensed, so you'll need to add it to your project.
Currently you can assign the line color, width and the smoothness for the line you want to draw. Be careful with smoothness, use a float between 0 - 1. I've changed the touch methods cause I needed to access the drawing methods from another view. Check the original code, if you want to revert to the touch methods.
I did not optimize the code, if you've got a better idea, just edit this answer.
Here is the H file:
#interface LineView : UIView
- (instancetype)initWithFrame:(CGRect)frame andColor:(UIColor *)lineColor andWidth:(CGFloat)lineWidth andSmoothness:(CGFloat)lineSmooth;
- (void)touchStartedWith:(CGPoint)location;
- (void)touchMovedWith:(CGPoint)location;
#end
This is the M file:
#import "LineView.h"
static const CGFloat kPointMinDistance = 0.05f;
static const CGFloat kPointMinDistanceSquared = kPointMinDistance * kPointMinDistance;
#interface LineView ()
#property (strong) UIColor *lineColor;
#property (assign) CGFloat lineWidth;
#property (assign) CGFloat lineSmooth;
#property (assign) CGPoint currentPoint;
#property (assign) CGPoint previousPoint;
#property (assign) CGPoint previousPreviousPoint;
#end
#implementation LineView
{
#private
CGMutablePathRef _path;
}
- (instancetype)initWithFrame:(CGRect)frame andColor:(UIColor *)lineColor andWidth:(CGFloat)lineWidth andSmoothness:(CGFloat)lineSmooth
{
self = [super initWithFrame:frame];
if ( self ) {
_path = CGPathCreateMutable();
if ( lineSmooth < 0 ) lineSmooth = 0;
if ( lineSmooth > 1 ) lineSmooth = 1;
self.backgroundColor = [UIColor clearColor];
self.lineColor = lineColor;
self.lineWidth = lineWidth;
self.lineSmooth = lineWidth * ( lineSmooth / 4 );
self.opaque = NO;
}
return self;
}
- (void)drawRect:(CGRect)rect
{
[self.backgroundColor set];
UIRectFill(rect);
#autoreleasepool {
CGColorRef theColor = self.lineColor.CGColor;
UIColor *theClearOpaque = [[UIColor whiteColor] colorWithAlphaComponent:1];
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextAddPath(context, _path);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, theColor);
// Outer shadow
CGSize shadowOffset = CGSizeMake(0.1f, -0.1f);
CGFloat shadowBlurRadius = self.lineSmooth;
CGContextSetShadowWithColor(context, shadowOffset, shadowBlurRadius, theColor);
CGContextStrokePath(context);
if ( self.lineSmooth > 0 ) {
// Inner shadow
CGRect bounds = CGPathGetBoundingBox(_path);
CGRect drawBox = CGRectInset(bounds, -2.0f * self.lineWidth, -2.0f * self.lineWidth);
CGContextSaveGState(context);
UIRectClip(drawBox);
CGContextSetShadowWithColor(context, CGSizeZero, 0, NULL);
CGContextSetAlpha(context, CGColorGetAlpha(theClearOpaque.CGColor));
CGContextBeginTransparencyLayer(context, NULL);
{
// Outer shadow
UIColor *oShadow = [theClearOpaque colorWithAlphaComponent:1];
CGContextSetShadowWithColor(context, CGSizeMake(0.1f, -0.1f), self.lineWidth / 64 * self.lineSmooth, oShadow.CGColor);
CGContextSetBlendMode(context, kCGBlendModeSourceOut);
CGContextBeginTransparencyLayer(context, NULL);
[oShadow setFill];
// Draw the line again
CGContextAddPath(context, _path);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetStrokeColorWithColor(context, oShadow.CGColor);
CGContextStrokePath(context);
CGContextEndTransparencyLayer(context);
}
CGContextEndTransparencyLayer(context);
CGContextRestoreGState(context);
}
}
}
- (void)touchStartedWith:(CGPoint)location
{
self.previousPoint = location;
self.previousPreviousPoint = location;
self.currentPoint = location;
[self touchMovedWith:location];
}
- (void)touchMovedWith:(CGPoint)location
{
CGRect drawBox;
#autoreleasepool {
CGFloat dx = location.x - self.currentPoint.x;
CGFloat dy = location.y - self.currentPoint.y;
if ( ( dx * dx + dy * dy ) < kPointMinDistanceSquared ) {
return;
}
self.previousPreviousPoint = self.previousPoint;
self.previousPoint = self.currentPoint;
self.currentPoint = location;
CGPoint mid1 = midPoint(self.previousPoint, self.previousPreviousPoint);
CGPoint mid2 = midPoint(self.currentPoint, self.previousPoint);
CGMutablePathRef subpath = CGPathCreateMutable();
CGPathMoveToPoint(subpath, NULL, mid1.x, mid1.y);
CGPathAddQuadCurveToPoint(subpath, NULL, self.previousPoint.x, self.previousPoint.y, mid2.x, mid2.y);
CGRect bounds = CGPathGetBoundingBox(subpath);
drawBox = CGRectInset(bounds, -2.0f * self.lineWidth, -2.0f * self.lineWidth);
CGPathAddPath(_path, NULL, subpath);
CGPathRelease(subpath);
}
[self setNeedsDisplayInRect:drawBox];
}
- (void)dealloc
{
CGPathRelease(_path);
_path = NULL;
}
#end

Resources