I'm trying to make high-resolution graphics dynamically. Unfortunately when I make arcs they look really fuzzy.
Here's my code
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect bounds = [self bounds];
CGPoint center = CGPointMake(bounds.size.width / 2.0, bounds.size.height / 2.0);
CGFloat lineWidth = 30.0;
CGFloat innerRadius = (bounds.size.width / 2.0) - lineWidth;
CGFloat outerRadius = innerRadius + lineWidth;
CGFloat startAngle = -((float)M_PI / 2.0);
CGFloat endAngle = ((self.percent / 100.0) * 2 * (float)M_PI) + startAngle;
UIBezierPath *processBackgroundPath = [UIBezierPath bezierPath];
processBackgroundPath.lineWidth = lineWidth;
CGFloat radius = (self.bounds.size.width - lineWidth) / 2.0;
CGFloat fullAngle = (2.0 * (float)M_PI) + startAngle;
[processBackgroundPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:fullAngle clockwise:YES];
[[UIColor whiteColor] set];
[processBackgroundPath stroke];
CGMutablePathRef progressPath = CGPathCreateMutable();
CGPathMoveToPoint(progressPath, NULL, center.x, center.y - innerRadius);
CGPathAddArc(progressPath, NULL, center.x, center.y, innerRadius, startAngle, endAngle, YES);
CGPathAddArc(progressPath, NULL, center.x, center.y, outerRadius, endAngle, startAngle, NO);
CGPathCloseSubpath(progressPath);
UIColor *aColor = [UIColor colorWithRed:0.941 green:0.776 blue:0.216 alpha:1.0];
[aColor setFill];
CGContextAddPath(context, progressPath);
CGContextFillPath(context);
CGPathRelease(progressPath);
}
What do I need to do to make the donut more crisp?
Related
I'm drawing a line on the screen which includes diagonal lines which in turn are drawing like this:
Notice how it doesn't look smooth at all. I've read a few articles on this and it would seem this looks the one closer to the issue I'm having, but the solution is not working for me.
Here's how I setup the layer:
- (void)viewDidLoad
{
[super viewDidLoad];
// Instantiate the navigation line view
CGRect navLineFrame = CGRectMake(0.0f, 120.0f, self.view.frame.size.width, 15.0f);
self.navigationLineView = [[HyNavigationLineView alloc] initWithFrame:navLineFrame];
// Make it's background transparent
self.navigationLineView.backgroundColor = [UIColor colorWithWhite:0.0f alpha:0.0f];
self.navigationLineView.opaque = NO;
HyNavigationLineLayer * layer = [[HyNavigationLineLayer alloc] init];
layer.shouldRasterize = YES;
layer.rasterizationScale = [UIScreen mainScreen].scale;
layer.contentsScale = [[UIScreen mainScreen] scale];
layer.needsDisplayOnBoundsChange = YES;
[[self.navigationLineView layer] addSublayer:layer];
[self.view addSubview:self.navigationLineView];
[self.navigationLineView.layer setNeedsDisplay];
}
Here's how I'm drawing in the layer:
- (void)drawInContext:(CGContextRef)ctx
{
CGFloat bottomInset = 1.0f / [[UIScreen mainScreen] scale] * 2.0f;
CGContextSetInterpolationQuality(ctx, kCGInterpolationHigh);
CGContextSetStrokeColorWithColor(ctx, [UIColor whiteColor].CGColor);
GLfloat padding = kHyNavigationLineViewPadding * 4.0f;
GLfloat searchSpace = self.frame.size.width - padding - kHyNavigationLineViewPointerSize * 2.0f;
GLfloat x = kHyNavigationLineViewPadding * 2.0f + searchSpace * self.offset;
CGContextSetLineWidth(ctx, 2.0f);
CGContextMoveToPoint(ctx, kHyNavigationLineViewPadding, 0.0f);
CGContextAddLineToPoint(ctx, x, bottomInset);
CGContextAddLineToPoint(ctx, x + kHyNavigationLineViewPointerSize, self.frame.size.height);
CGContextAddLineToPoint(ctx, x + kHyNavigationLineViewPointerSize * 2.0f, bottomInset);
CGContextAddLineToPoint(ctx, self.frame.size.width - kHyNavigationLineViewPadding, 0.0f);
// Draw
CGContextStrokePath(ctx);
}
Any hints on how to solve this?
Edit: forgot to mention the reason I was drawing in the layer in the first place: I need to animate a property which causes this line to animate was well, so drawing in drawRect doesn't work.
Instead of using quartz to render the code, you can use UIBezierPath to render instead:
UIBezierPath* path = [UIBezierPath bezierPath];
[[UIColor whiteColor] setStroke];
GLfloat padding = kHyNavigationLineViewPadding * 4.0f;
GLfloat searchSpace = self.frame.size.width - padding - kHyNavigationLineViewPointerSize * 2.0f;
GLfloat x = kHyNavigationLineViewPadding * 2.0f + searchSpace * self.offset;
path.lineWidth = 2.0;
[path moveToPoint:CGPointMake(kHyNavigationLineViewPadding, 0)];
[path addLineToPoint:CGPointMake(x, bottomInset)];
[path addLineToPoint:CGPointMake(x + kHyNavigationLineViewPointerSize, self.frame.size.height)];
[path addLineToPoint:CGPointMake(x + kHyNavigationLineViewPointerSize * 2.0f, bottomInset)];
[path addLineToPoint:CGPointMake(self.frame.size.width - kHyNavigationLineViewPadding, 0.0f)];
[path stroke];
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'd like to draw circle with hole (like donut) on mapview.
my code is here.
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CG ContextRef)context {
WPCircleOverlay * circleOverlay = self.overlay;
CGPoint centerPoint = [self pointForMapPoint:MKMapPointForCoordinate(circleOverlay.coordinate)];
CGFloat innerRadius = MKMapPointsPerMeterAtLatitude(circleOverlay.coordinate.latitude) * circleOverlay.innerRadius;
CGFloat outerRadius = MKMapPointsPerMeterAtLatitude(circleOverlay.coordinate.latitude) * circleOverlay.outerRadius;
CGMutablePathRef path = CGPathCreateMutable();
//CGPathMoveToPoint(path, ...);
CGPathAddArc(path, NULL, centerPoint.x, centerPoint.y, outerRadius, 0, 2 * M_PI, true);
CGPathCloseSubpath(path);
// Add the inner arc to the path (later used to substract the inner area)
CGPathAddArc(path, NULL, centerPoint.x, centerPoint.y, innerRadius, 0, 2 * M_PI, true);
CGPathCloseSubpath(path);
// Add the path to the context
CGContextAddPath(context, path);
CGContextSetFillColorWithColor(context, self.fillColor.CGColor);
CGContextEOFillPath(context);
CGPathRelease(path);
It works well in simulator, but on device it doesn't.
On device, outer circle is filled with color, and inner circle wasn't clipped.
How can I modify my code to work well on device?
I fixed it by using CGContextAddEllipseInRect method instead of CGContextAddArc.
WPCircleOverlay * circleOverlay = self.overlay;
CGRect rectForMapRect = [self rectForMapRect:mapRect];
CGPoint centerPoint = [self pointForMapPoint:MKMapPointForCoordinate(circleOverlay.coordinate)];
CGFloat innerRadius = MKMapPointsPerMeterAtLatitude(circleOverlay.coordinate.latitude) * circleOverlay.innerRadius;
CGFloat outerRadius = MKMapPointsPerMeterAtLatitude(circleOverlay.coordinate.latitude) * circleOverlay.outerRadius;
CGRect innerRect = CGRectMake(centerPoint.x - innerRadius, centerPoint.y - innerRadius, innerRadius * 2.0, innerRadius * 2.0);
CGRect outerRect = CGRectMake(centerPoint.x - outerRadius, centerPoint.y - outerRadius, outerRadius * 2.0, outerRadius * 2.0);
if (CGRectIntersectsRect(rectForMapRect, outerRect)) {
CGContextAddRect(context, rectForMapRect);
CGContextSaveGState(context);
CGContextClip(context);
CGContextAddEllipseInRect(context, outerRect);
CGContextAddEllipseInRect(context, innerRect);
CGContextSaveGState(context);
CGContextEOClip(context);
UIColor * color = [self.fillColor copy];
CGContextSetFillColorWithColor(context, color.CGColor);
CGContextFillRect(context, outerRect);
CGContextRestoreGState(context);
CGContextRestoreGState(context);
UIGraphicsPopContext();
}
I know how to draw lines and shapes with CGPaths . But I couldn't figure out how to draw this symbol for a circuit diagram
What code should I write to get that half circle shape?
This is what I have so far:
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSetLineWidth(context, 5.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextMoveToPoint(context, 60, 80);
CGContextAddLineToPoint(context, 120, 80);
CGContextMoveToPoint(context, 120, 80);
CGContextAddArc(120,80,M_PI,M_PI/2);
CGContextMoveToPoint(context, 200, 80);
CGContextAddLineToPoint(context, 300, 80);
CGContextStrokePath(context);
}
You could create a UIBezierPath, e.g. something like:
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint point = CGPointMake(0, 50);
CGFloat radius = 15.0;
CGFloat lineLength = 25.0;
[path moveToPoint:point];
point.x += lineLength;
[path addLineToPoint:point];
point.x += radius;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2 clockwise:YES];
point.x += radius * 2;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2 clockwise:YES];
point.x += radius * 2;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2 clockwise:YES];
point.x += radius * 2;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2 clockwise:YES];
point.x += lineLength + radius;
[path addLineToPoint:point];
You could have your view controller just create a CAShapeLayer and add it to your view's layer.
CAShapeLayer *layer = [CAShapeLayer layer];
layer.path = [path CGPath];
layer.lineWidth = 2.0;
layer.fillColor = [[UIColor clearColor] CGColor];
layer.strokeColor = [[UIColor blackColor] CGColor];
[self.view.layer addSublayer:layer];
If you wanted to do it in the drawRect of a UIView subclass you could, stroke this path:
- (void)drawRect:(CGRect)rect
{
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint point = CGPointMake(0, 50);
CGFloat radius = 20.0;
CGFloat lineLength = 45.0;
[path moveToPoint:point];
point.x += lineLength;
[path addLineToPoint:point];
point.x += radius;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2.0 clockwise:YES];
point.x += radius * 2.0;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2.0 clockwise:YES];
point.x += radius * 2.0;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2.0 clockwise:YES];
point.x += radius * 2.0;
[path addArcWithCenter:point radius:radius startAngle:M_PI endAngle:M_PI * 2.0 clockwise:YES];
point.x += lineLength + radius;
[path addLineToPoint:point];
path.lineWidth = 2.0;
[[UIColor blackColor] setStroke];
[[UIColor clearColor] setFill];
[path stroke];
}
Or, as your revised question suggests, if you're more comfortable with CoreGraphics, you could do that, too:
- (void)drawRect:(CGRect)rect
{
CGContextRef context = UIGraphicsGetCurrentContext();
CGPoint point = CGPointMake(0, 50);
CGFloat radius = 20.0;
CGFloat lineLength = 45.0;
CGContextMoveToPoint(context, point.x, point.y);
point.x += lineLength;
CGContextAddLineToPoint(context, point.x, point.y);
point.x += radius;
CGContextAddArc(context, point.x, point.y, radius, M_PI, M_PI * 2.0, NO);
point.x += radius * 2.0;
CGContextAddArc(context, point.x, point.y, radius, M_PI, M_PI * 2.0, NO);
point.x += radius * 2.0;
CGContextAddArc(context, point.x, point.y, radius, M_PI, M_PI * 2.0, NO);
point.x += radius * 2.0;
CGContextAddArc(context, point.x, point.y, radius, M_PI, M_PI * 2.0, NO);
point.x += lineLength + radius;
CGContextAddLineToPoint(context, point.x, point.y);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetLineWidth(context, 2.0);
CGContextDrawPath(context, kCGPathStroke);
}
I want to draw an arc like in the following figure using core draw.
Not exactly same but I have background images set. I need to draw arc based on the file download. Now the percentage of download number I have. How can I do it using core draw?
The image above are just two circles - one is cutting a hole in another. This is not near to what you want to accomplish.
You need to use CGContextAddArc.
Do something like this:
open a path
move to a point
start drawing the Arc with CGContextAddArc
move (and draw a line) inwards to the arc center the desired width of the slice
draw an backward arc
close the path
Use Mid point Algorithm, If you want to draw circles , to make concentric circle provide difference in radius of your circles
I have what you want:
// CircularProgress.h
#import <UIKit/UIKit.h>
#interface CircularProgress : UIView
#property (nonatomic, assign) CGFloat percent;
#end
// CircularProgress.m
#import "CircularProgress.h"
#implementation CircularProgress
- (void)setPercent:(CGFloat)percent
{
_percent = percent;
[self setNeedsDisplay];
}
- (void)drawRect:(CGRect)rect
{
[super drawRect:rect];
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect bounds = [self bounds];
CGPoint center = CGPointMake(bounds.size.width / 2.0, bounds.size.height / 2.0);
CGFloat lineWidth = 8.0;
CGFloat innerRadius = (bounds.size.width / 2.0) - lineWidth;
CGFloat outerRadius = innerRadius + lineWidth;
CGFloat startAngle = -((float)M_PI / 2.0);
CGFloat endAngle = ((self.percent / 100.0) * 2 * (float)M_PI) + startAngle;
UIBezierPath *processBackgroundPath = [UIBezierPath bezierPath];
processBackgroundPath.lineWidth = lineWidth;
CGFloat radius = (self.bounds.size.width - lineWidth) / 2.0;
CGFloat fullAngle = (2.0 * (float)M_PI) + startAngle;
[processBackgroundPath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:fullAngle clockwise:YES];
[[UIColor whiteColor] set];
[processBackgroundPath stroke];
CGMutablePathRef progressPath = CGPathCreateMutable();
CGPathMoveToPoint(progressPath, NULL, center.x, center.y - innerRadius);
CGPathAddArc(progressPath, NULL, center.x, center.y, innerRadius, startAngle, endAngle, YES);
CGPathAddArc(progressPath, NULL, center.x, center.y, outerRadius, endAngle, startAngle, NO);
CGPathCloseSubpath(progressPath);
UIColor *aColor = [UIColor colorWithRed:0.941 green:0.776 blue:0.216 alpha:1.0];
[aColor setFill];
CGContextAddPath(context, progressPath);
CGContextFillPath(context);
CGPathRelease(progressPath);
}
#end
You just need to create an object of CircularProgress class of the desired size (it should be square) and add it as subview to your main view. Then simply change the percent value and enjoy result. The color and width are hardcoded for now because it's not the finished control but you should catch the idea.