I managed to implement erase drawings on CGContext
UIImageView *maskImgView = [self.view viewWithTag:K_MASKIMG];
UIGraphicsBeginImageContext(maskImgView.image.size);
[maskImgView.image drawAtPoint:CGPointMake(0,0)];
float alp = 0.5;
UIImage *oriBrush = [UIImage imageNamed:_brushName];
//sets the style for the endpoints of lines drawn in a graphics context
CGContextRef ctx = UIGraphicsGetCurrentContext();
CGFloat eraseSize = oriBrush.size.width*_brushSize/_zoomCurrentFactor;
CGContextSetLineCap(ctx, kCGLineCapRound);
CGContextSetLineJoin(ctx, kCGLineJoinRound);
CGContextSetLineWidth(ctx,eraseSize);
CGContextSetRGBStrokeColor(ctx, 1, 1, 1, alp);
CGContextSetBlendMode(ctx, kCGBlendModeClear);
CGContextBeginPath(ctx);
CGContextMoveToPoint(ctx, lastPoint.x,lastPoint.y);
CGPoint vector = CGPointMake(currentPoint.x - lastPoint.x, currentPoint.y - lastPoint.y);
CGFloat distance = hypotf(vector.x, vector.y);
vector.x /= distance;
vector.y /= distance;
for (CGFloat i = 0; i < distance; i += 1.0f) {
CGPoint p = CGPointMake(lastPoint.x + i * vector.x, lastPoint.y + i * vector.y);
CGContextAddLineToPoint(ctx, p.x, p.y);
}
CGContextStrokePath(ctx);
maskImgView.image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
lastPoint = currentPoint;
Problem is, this TOTALLY erase anything. The alpha set in this function ( CGContextSetRGBStrokeColor(ctx, 1, 1, 1, alp);) seems to be ignored totally.
I want to erase just lightly and repeated erasing will then totally removes the drawing.
Any ideas?
EDIT: As per request, I add more details about this code:
alp=_brushAlpha is a property delcared in this ViewController class. It ranges from 0.1 to 1.0. At testing I set it to 0.5. This drawing code is triggered by pan gesture recognizer (change state). It is basically following the finger (draw/erase by finger).
You've set the blending mode to clear. That ignores stroke color. You should play with the various modes a bit, but I suspect you want something like sourceAtop or maybe screen. See the CGBlendMode docs for full details.
You have a flag named clearsContextBeforeDrawing in UIView. if you set it to YES it will clear it before every draw.
according to documentation
A Boolean value that determines whether the view’s bounds should be automatically cleared before drawing.
When set to YES, the drawing buffer is automatically cleared to transparent black before the drawRect: method is called. This behavior ensures that there are no visual artifacts left over when the view’s contents are redrawn. If the view’s opaque property is also set to YES, the backgroundColor property of the view must not be nil or drawing errors may occur. The default value of this property is YES.
If you set the value of this property to NO, you are responsible for ensuring the contents of the view are drawn properly in your drawRect: method. If your drawing code is already heavily optimized, setting this property is NO can improve performance, especially during scrolling when only a portion of the view might need to be redrawn.
Related
Scenario
I have two views. One is the "parent" view which contains a "child" view that does the drawing. I refer to the child as QuartzView in the code to follow. QuartzView knows how to draw a square to it's own context.
Issue
When I tell the QuartzView on it's self to draw a square it does so as expected. When I use the parent view to tell QuartsView to draw a square on it's self it draws the square in the lower left corner of the screen at about 1/5 the expected size.
Question
I assume there's some parent/child or context issues here but I'm not sure what they are. How can I get both squares to draw in the exact same place at the exact same size?
Parent ViewController
- (void)drawASquare {
// this code draws the "goofy" square that is smaller and off in the bottom left corner
x = qv.frame.size.width / 2;
y = qv.frame.size.height / 2;
CGPoint center = CGPointMake(x, y);
[qv drawRectWithCenter:center andWidth:50 andHeight:50 andFillColor:[UIColor blueColor]];
}
Child QuartzView
- (void)drawRect:(CGRect)rect
{
self.context = UIGraphicsGetCurrentContext();
UIColor *color = [UIColor colorWithRed:0 green:1 blue:0 alpha:0.5];
// this code draws a square as expected
float w = self.frame.size.width / 2;
float h = self.frame.size.height / 2;
color = [UIColor blueColor];
CGPoint center = CGPointMake(w, h);
[self drawRectWithCenter:center andWidth:20 andHeight:20 andFillColor:color];
}
- (void)drawRectWithCenter:(CGPoint)center andWidth:(float)w andHeight:(float)h andFillColor:(UIColor *)color
{
CGContextSetFillColorWithColor(self.context, color.CGColor);
CGContextSetRGBStrokeColor(self.context, 0.0, 1.0, 0.0, 1);
CGRect rectangle = CGRectMake(center.x - w / 2, center.x - w / 2, w, h);
CGContextFillRect(self.context, rectangle);
CGContextStrokeRect(self.context, rectangle);
}
Note
The opacities are the same for both squares
I turned off "Autoresize subviews" with no noticeable difference
view.contentScaleFactor = [[UIScreen mainScreen] scale]; has not helped
Edit
I'm noticing that the x/y values of the square when drawn the parent starting from the bottom left as 0,0 whereas normally 0,0 would be the top left.
The return value from UIGraphicsGetCurrentContext() is only valid inside the drawRect method. You can not and must not use that context in any other method. So the self.context property should just be a local variable.
In the drawRectWithCenter method, you should store all of the parameters in properties, and then request a view update with [self setNeedsDisplay]. That way, the framework will call drawRect with the new information. The drawRectWithCenter method should look something like this
- (void)drawRectWithCenter:(CGPoint)center andWidth:(float)w andHeight:(float)h andFillColor:(UIColor *)color
{
self.showCenter = center;
self.showWidth = w;
self.showHeight = h;
self.showFillColor = color;
[self setNeedsDisplay];
}
And of course, the drawRect function needs to take that information, and do the appropriate drawing.
I assume there's some parent/child or context issues here but I'm not sure what they are. How can I get both squares to draw in the exact same place at the exact same size?
You normally don't need to worry about the graphics context in your -drawRect: method because Cocoa Touch will set up the context for you before calling -drawRect:. But your -drawASquare method in the view controller calls -drawRectWithCenter:... to draw outside the normal drawing process, so the context isn't set up for your view. You should really have the view do its drawing in -drawRect:. If your view controller wants to make the view redraw, it should call -setNeedsDisplay, like:
[qv setNeedsDisplay];
That will add the view to the drawing list, and the graphics system will set up the graphics context and call the view's -drawRect: for you.
I'm noticing that the x/y values of the square when drawn the parent starting from the bottom left as 0,0 whereas normally 0,0 would be the top left.
UIKit and Core Animation use an upper left origin, but Core Graphics (a.k.a. Quartz) normally uses a lower left origin. The docs say:
The default coordinate system used by Core Graphics framework is LLO-based.
I have been making a circular control and i am doing fine, except that the graphics appears from upper left corner when i do the render first time.
The whole control is subclassed UIControl, with custom CALayer which does rendering of a circle.
This is the code that renders the circle:
- (void) drawInContext:(CGContextRef)ctx{
id modelLayer = [self modelLayer];
CGFloat radius = [[modelLayer valueForKey:DXCircularControlLayerPropertyNameRadius] floatValue];
CGFloat lineWidth = [[modelLayer valueForKey:DXCircularControlLayerPropertyNameLineWidth] floatValue];
//NSLog(#"%s, angle: %6.2f, radius: %6.2f, angle_m: %6.2f, radius_m: %6.2f", __func__, self.circleAngle, self.circleRadius, [[modelLayer valueForKey:#"circleAngle"] floatValue], [[modelLayer valueForKey:#"circleRadius"] floatValue]);
// draw circle arc up to target angle
CGRect frame = self.frame;
CGContextRef context = ctx;
CGContextSetShouldAntialias(context, YES);
CGContextSetAllowsAntialiasing(context, YES);
// draw thin circle
//CGContextSetLineWidth(context, <#CGFloat width#>)
// draw selection circle
CGContextSetLineWidth(context, lineWidth);
CGContextSetStrokeColorWithColor(context, [UIColor greenColor].CGColor);
CGContextAddArc(context, frame.size.width / 2.0f, frame.size.height / 2.0f, radius, 0.0f, self.circleAngle, 0);
CGContextStrokePath(context);
CGContextSetShouldAntialias(context, NO);
}
Here is the video of a problem.
If you watch carefully, you'll notice that rendering of circle somehow doesnt start centered. It skews itself from the upper left corner.
This only happens when doing the animation for the first time.
I know this can happen if one mistakes begin and end of animation commit blocks, but i dont use them here.
Just in case here is the link to the bitbucket repo of this control:
There is nothing wrong with the drawing method - you messed up a little bit setting the layer's frame ;-)
You are setting the frame for the circularControlLayer within your - (void) setAngle:(CGFloat)angle method. That means the frame is set for the first time when you animate the angle property - so the frame will be animated too. Set the frame within the - (void) commonInitDXCircularControlView method.
If you are creating custom layers, have a look at the [UIView layerClass] method. Using it will save you from trouble with bounds/frame management.
I have the following code to show marker in a UIView. The marker show's well, and once we try to pinch zoom and scale the UIView using the transform the first drawing remains as it is, even after calling setNeedsDisplay.
My Custom UIView subclass has the following code
- (void)drawRect:(CGRect)rect
{
// Drawing code
CGFloat w=20.0f;
CGFloat h=8.0f;
CGContextRef context=UIGraphicsGetCurrentContext();
CGContextSetFillColorWithColor(context, [UIColor blueColor].CGColor);
CGContextClearRect(context,self.bounds);
CGContextSetStrokeColorWithColor(context, [UIColor redColor].CGColor);
CGContextSetLineCap(context, 2.0);
CGMutablePathRef leftMarker=CGPathCreateMutable();
CGPathMoveToPoint(leftMarker, NULL, 0, 0);
CGPathAddLineToPoint(leftMarker, NULL, w, 0);
CGPathAddLineToPoint(leftMarker,NULL, w, h);
CGPathAddLineToPoint(leftMarker,NULL, h, h);
CGPathAddLineToPoint(leftMarker,NULL,h, w);
CGPathAddLineToPoint(leftMarker,NULL,0, w);
CGPathAddLineToPoint(leftMarker,NULL, 0, 0);
CGContextAddPath(context, leftMarker);
CGContextDrawPath(context, kCGPathFill);
const CGAffineTransform rightMarkerTransform=CGAffineTransformMakeRotateTranslate(DEGREES_TO_RADIANS(90),self.frame.size.width,0);
CGPathRef rightMarker=CGPathCreateCopyByTransformingPath(path, &rightMarkerTransform);
CGContextAddPath(context, rightMarker);
CGContextDrawPath(context, kCGPathFill);
const CGAffineTransform leftMarkerBottomTransform=CGAffineTransformMakeRotateTranslate(DEGREES_TO_RADIANS(270),0,self.frame.size.height);
CGPathRef leftMarkerbottom=CGPathCreateCopyByTransformingPath(path, &leftMarkerBottomTransform);
CGContextAddPath(context, leftMarkerbottom);
CGContextDrawPath(context, kCGPathFill);
const CGAffineTransform rightMarkerBottomTransform=CGAffineTransformMakeRotateTranslate(DEGREES_TO_RADIANS(180),self.frame.size.width,self.frame.size.height);
CGPathRef rightMarkerBottom=CGPathCreateCopyByTransformingPath(path, &rightMarkerBottomTransform);
CGContextAddPath(context, rightMarkerBottom);
CGContextDrawPath(context, kCGPathFill);
CGPathRelease(rightMarker);
CGPathRelease(leftMarkerbottom);
CGPathRelease(rightMarkerBottom);
CGPathRelease(leftMarker);
}
The pinch zoom code is listed below
CGFloat lastScale;
-(void) handlepinchGesture:(UIPinchGestureRecognizer*)gesture{
UIView *gestureV=gesture.view;
CGFloat scale=gesture.scale;
switch (gesture.state) {
case UIGestureRecognizerStateBegan:
if(lastScale<1.0){
lastScale=1.0;
}
scale=lastScale;
break;
default:
break;
}
if(scale<1.0){
scale=1.0;
}
lastScale=scale;
gestureV.transform=CGAffineTransformMakeScale(scale, scale);
//Even this does not work ….[gestureV setNeedsDisplay];
gesture.scale=scale;
}
Make you sure have this set (but it should be defaulted to YES).
self.clearsContextBeforeDrawing = YES;
From Apple's Docs in UIView
When
set to YES, the drawing buffer is automatically cleared to transparent
black before the drawRect: method is called. This behavior ensures
that there are no visual artifacts left over when the view’s contents
are redrawn. If the view’s opaque property is also set to YES, the
backgroundColor property of the view must not be nil or drawing errors
may occur. The default value of this property is YES.
If you set the value of this property to NO, you are responsible for
ensuring the contents of the view are drawn properly in your drawRect:
method. If your drawing code is already heavily optimized, setting
this property is NO can improve performance, especially during
scrolling when only a portion of the view might need to be redrawn.
You need to set the background color to something other than nil.
From DBD's answer (which is taken from the docs):
If the view’s opaque property is also set to YES, the backgroundColor property of the view must not be nil or drawing errors may occur.
You also need to make sure self.clearsContextBeforeDrawing is set to YES.
I've been working on a simple path overlay to an existing MKMapView. It takes a CGMutablePath and draws it onto the map. The goals is that the path is drawn representing an actual width. e.g. The subclass takes a width in meters and converts that width into a representative line width. Here is the one version of the code that calculates the line width:
- (void)drawMapRect:(MKMapRect)mapRect zoomScale:(MKZoomScale)zoomScale inContext:(CGContextRef)context
float mapPoints = meterWidth * MKMapPointsPerMeterAtLatitude(self.averageLatitude);
float screenPoints = mapPoints * zoomScale; // dividing would keep the apparent width constant
self.lineWidth = ceilf(screenPoints * 2);
CGContextAddPath(context, _mutablePath);
[self applyStrokePropertiesToContext:context atZoomScale:zoomScale];
CGContextStrokePath(context);
Here we first find the number of map points that correspond to our line width and then convert that to screen points. We do the conversion based on the header comments in MKGeometry.h:
// MKZoomScale provides a conversion factor between MKMapPoints and screen points.
// When MKZoomScale = 1, 1 screen point = 1 MKMapPoint. When MKZoomScale is
// 0.5, 1 screen point = 2 MKMapPoints.
Finally, we add the path to the context, apply the stroking properties to the path and stroke it.
However this gives exceedingly flakey results. The renderer often draws random fragments of line in various places outside the expected live area or doesn't draw some tiles at all. Sometimes the CPU is pegged redrawing multiple version of the same tile (as best I can tell) over and over. The docs aren't much help in this case.
I do have a working version, but it doesn't seem like the correct solution as it completely ignores zoomScale and doesn't use -applyStrokePropertiesToContext:atZoomScale:
float mapPoints = meterWidth * MKMapPointsPerMeterAtLatitude(self.averageLatitude);
self.lineWidth = ceilf(mapPoints * 2);
CGContextAddPath(context, _mutablePath);
CGContextSetStrokeColorWithColor(context, self.strokeColor.CGColor);
CGContextSetLineWidth(context, self.lineWidth);
CGContextSetLineJoin(context, kCGLineJoinRound);
CGContextSetLineCap(context, kCGLineCapRound);
CGContextStrokePath(context);
Anyone have pointers on what is wrong with this implementation?
I've been trying to figure out a way to draw segments as illustrated in the following image:
I'd like to:
draw the segment
include gradients
include shadows
animate the drawing from 0 to n angle
I've been attempting to do this with CGContextAddArc and similar calls but not getting very far.
Can anyone help ?
There are many parts to your question.
Getting the path
Creating the path for such a segment shouldn't be too hard. There are two arcs and two straight lines. I've previously explained how you can break down a path like that so I won't do it here. Instead I'm going to be fancy and create the path by stroking another path. You can of course read the breakdown and construct the path yourself. The arc I'm talking about stroking is the orange arc inside the gray dashed end-result.
To stroke the path we first need it. that is basically as simple as moving to the start point and drawing an arc around the center from the current angle to the angle you want the segment to cover.
CGMutablePathRef arc = CGPathCreateMutable();
CGPathMoveToPoint(arc, NULL,
startPoint.x, startPoint.y);
CGPathAddArc(arc, NULL,
centerPoint.x, centerPoint.y,
radius,
startAngle,
endAngle,
YES);
Then when you have that path (the single arc) you can create the new segment by stroking it with a certain width. The resulting path is going to have the two straight lines and the two arcs. The stroke happens from the center an equal distance inwards and outwards.
CGFloat lineWidth = 10.0;
CGPathRef strokedArc =
CGPathCreateCopyByStrokingPath(arc, NULL,
lineWidth,
kCGLineCapButt,
kCGLineJoinMiter, // the default
10); // 10 is default miter limit
Drawing
Next up is drawing and there are generally two main choices: Core Graphics in drawRect: or shape layers with Core Animation. Core Graphics is going to give you the more powerful drawing but Core Animation is going to give you the better animation performance. Since paths are involved pure Cora Animation won't work. You will end up with strange artifacts. We can however use a combination of layers and Core Graphics by drawing the the graphics context of the layer.
Filling and stroking the segment
We already have the basic shape but before we add gradients and shadows to it I will do a basic fill and stroke (you have a black stroke in your image).
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextAddPath(c, strokedArc);
CGContextSetFillColorWithColor(c, [UIColor lightGrayColor].CGColor);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextDrawPath(c, kCGPathFillStroke);
That will put something like this on screen
Adding shadows
I'm going to change the order and do the shadow before the gradient. To draw the shadow we need to configure a shadow for the context and draw fill the shape to draw it with the shadow. Then we need to restore the context (to before the shadow) and stroke the shape again.
CGColorRef shadowColor = [UIColor colorWithWhite:0.0 alpha:0.75].CGColor;
CGContextSaveGState(c);
CGContextSetShadowWithColor(c,
CGSizeMake(0, 2), // Offset
3.0, // Radius
shadowColor);
CGContextFillPath(c);
CGContextRestoreGState(c);
// Note that filling the path "consumes it" so we add it again
CGContextAddPath(c, strokedArc);
CGContextStrokePath(c);
At this point the result is something like this
Drawing the gradient
For the gradient we need a gradient layer. I'm doing a very simple two color gradient here but you can customize it all you want. To create the gradient we need to get the colors and the suitable color space. Then we can draw the gradient on top of the fill (but before the stroke). We also need to mask the gradient to the same path as before. To do this we clip the path.
CGFloat colors [] = {
0.75, 1.0, // light gray (fully opaque)
0.90, 1.0 // lighter gray (fully opaque)
};
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceGray(); // gray colors want gray color space
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
CGContextSaveGState(c);
CGContextAddPath(c, strokedArc);
CGContextClip(c);
CGRect boundingBox = CGPathGetBoundingBox(strokedArc);
CGPoint gradientStart = CGPointMake(0, CGRectGetMinY(boundingBox));
CGPoint gradientEnd = CGPointMake(0, CGRectGetMaxY(boundingBox));
CGContextDrawLinearGradient(c, gradient, gradientStart, gradientEnd, 0);
CGGradientRelease(gradient), gradient = NULL;
CGContextRestoreGState(c);
This finishes the drawing as we currently have this result
Animation
When it comes to the animation of the shape it has all been written before: Animating Pie Slices Using a Custom CALayer. If you try doing the drawing by simply animating the path property you are going to see some really funky warping of the path during the animation. The shadow and gradient has been left intact for illustrative purposes in the image below.
I suggest that you take the drawing code that I've posted in this answer and adopt it to the animation code from that article. Then you should end up with the what you are asking for.
For reference: the same drawing using Core Animation
Plain shape
CAShapeLayer *segment = [CAShapeLayer layer];
segment.fillColor = [UIColor lightGrayColor].CGColor;
segment.strokeColor = [UIColor blackColor].CGColor;
segment.lineWidth = 1.0;
segment.path = strokedArc;
[self.view.layer addSublayer:segment];
Adding shadows
The layer has some shadow related properties that it's up to you to customize. Howerever you should set the shadowPath property for improved performance.
segment.shadowColor = [UIColor blackColor].CGColor;
segment.shadowOffset = CGSizeMake(0, 2);
segment.shadowOpacity = 0.75;
segment.shadowRadius = 3.0;
segment.shadowPath = segment.path; // Important for performance
Drawing the gradient
CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.colors = #[(id)[UIColor colorWithWhite:0.75 alpha:1.0].CGColor, // light gray
(id)[UIColor colorWithWhite:0.90 alpha:1.0].CGColor]; // lighter gray
gradient.frame = CGPathGetBoundingBox(segment.path);
If we drew the gradient now it would be on top of the shape and not inside it. No, we can't have a gradient fill of the shape (I know you were thinking of it). We need to mask the gradient so that it go outside the segment. To do that we create another layer to be the mask of that segment. It has to be another layer, the documentation is clear that the behavior is "undefined" if the mask is part of the layer hierarchy. Since the mask's coordinate system is going to be the same as that of sublayers to the gradient we will have to translate the segment shape before setting it.
CAShapeLayer *mask = [CAShapeLayer layer];
CGAffineTransform translation = CGAffineTransformMakeTranslation(-CGRectGetMinX(gradient.frame),
-CGRectGetMinY(gradient.frame));
mask.path = CGPathCreateCopyByTransformingPath(segment.path,
&translation);
gradient.mask = mask;
Everything you need is covered in the Quartz 2D Programming Guide. I suggest you look through it.
However, it can be difficult to put it all together, so I'll walk you through it. We'll write a function that takes a size and returns an image that looks roughly like one of your segments:
We start the function definition like this:
static UIImage *imageWithSize(CGSize size) {
We'll need a constant for the thickness of the segment:
static CGFloat const kThickness = 20;
and a constant for the width of the line outlining the segment:
static CGFloat const kLineWidth = 1;
and a constant for the size of the shadow:
static CGFloat const kShadowWidth = 8;
Next we need to create an image context in which to draw:
UIGraphicsBeginImageContextWithOptions(size, NO, 0); {
I put a left brace on the end of that line because I like an extra level of indentation to remind me to call UIGraphicsEndImageContext later.
Since a lot of the functions we need to call are Core Graphics (aka Quartz 2D) functions, not UIKit functions, we need to get the CGContext:
CGContextRef gc = UIGraphicsGetCurrentContext();
Now we're ready to really get started. First we add an arc to the path. The arc runs along the center of the segment we want to draw:
CGContextAddArc(gc, size.width / 2, size.height / 2,
(size.width - kThickness - kLineWidth) / 2,
-M_PI / 4, -3 * M_PI / 4, YES);
Now we'll ask Core Graphics to replace the path with a “stroked” version that outlines the path. We first set the thickness of the stroke to the thickness we want the segment to have:
CGContextSetLineWidth(gc, kThickness);
and we set the line cap style to “butt” so we'll have squared-off ends:
CGContextSetLineCap(gc, kCGLineCapButt);
Then we can ask Core Graphics to replace the path with a stroked version:
CGContextReplacePathWithStrokedPath(gc);
To fill this path with a linear gradient, we have to tell Core Graphics to clip all operations to the interior of the path. Doing so will make Core Graphics reset the path, but we'll need the path later to draw the black line around the edge. So we'll copy the path here:
CGPathRef path = CGContextCopyPath(gc);
Since we want the segment to cast a shadow, we'll set the shadow parameters before we do any drawing:
CGContextSetShadowWithColor(gc,
CGSizeMake(0, kShadowWidth / 2), kShadowWidth / 2,
[UIColor colorWithWhite:0 alpha:0.3].CGColor);
We're going to both fill the segment (with a gradient) and stroke it (to draw the black outline). We want a single shadow for both operations. We tell Core Graphics that by beginning a transparency layer:
CGContextBeginTransparencyLayer(gc, 0); {
I put a left brace on the end of that line because I like to have an extra level of indentation to remind me to call CGContextEndTransparencyLayer later.
Since we're going to change the context's clip region for filling, but we won't want to clip when we stroke the outline later, we need to save the graphics state:
CGContextSaveGState(gc); {
I put a left brace on the end of that line because I like to have an extra level of indentation to remind me to call CGContextRestoreGState later.
To fill the path with a gradient, we need to create a gradient object:
CGColorSpaceRef rgb = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColors(rgb, (__bridge CFArrayRef)#[
(__bridge id)[UIColor grayColor].CGColor,
(__bridge id)[UIColor whiteColor].CGColor
], (CGFloat[]){ 0.0f, 1.0f });
CGColorSpaceRelease(rgb);
We also need to figure out a start point and an end point for the gradient. We'll use the path bounding box:
CGRect bbox = CGContextGetPathBoundingBox(gc);
CGPoint start = bbox.origin;
CGPoint end = CGPointMake(CGRectGetMaxX(bbox), CGRectGetMaxY(bbox));
and we'll force the gradient to be drawn either horizontally or vertically, whichever is longer:
if (bbox.size.width > bbox.size.height) {
end.y = start.y;
} else {
end.x = start.x;
}
Now we finally have everything we need to draw the gradient. First we clip to the path:
CGContextClip(gc);
Then we draw the gradient:
CGContextDrawLinearGradient(gc, gradient, start, end, 0);
Then we can release the gradient and restore the saved graphics state:
CGGradientRelease(gradient);
} CGContextRestoreGState(gc);
When we called CGContextClip, Core Graphics reset the context's path. The path isn't part of the saved graphics state; that's why we made a copy earlier. Now it's time to use that copy to set the path in the context again:
CGContextAddPath(gc, path);
CGPathRelease(path);
Now we can stroke the path, to draw the black outline of the segment:
CGContextSetLineWidth(gc, kLineWidth);
CGContextSetLineJoin(gc, kCGLineJoinMiter);
[[UIColor blackColor] setStroke];
CGContextStrokePath(gc);
Next we tell Core Graphics to end the transparency layer. This will make it look at what we've drawn and add the shadow underneath:
} CGContextEndTransparencyLayer(gc);
Now we're all done drawing. We ask UIKit to create a UIImage from the image context, then destroy the context and return the image:
UIImage *image = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return image;
}
You can find the code all together in this gist.
This is a Swift 3 version of Rob Mayoff's answer. Just see how much more efficient this language is! This could be the contents of a MView.swift file:
import UIKit
class MView: UIView {
var size = CGSize.zero
override init(frame: CGRect) {
super.init(frame: frame)
size = frame.size
}
required init?(coder aDecoder: NSCoder) {
fatalError("init(coder:) has not been implemented")
}
var niceImage: UIImage {
let kThickness = CGFloat(20)
let kLineWidth = CGFloat(1)
let kShadowWidth = CGFloat(8)
UIGraphicsBeginImageContextWithOptions(size, false, 0)
let gc = UIGraphicsGetCurrentContext()!
gc.addArc(center: CGPoint(x: size.width/2, y: size.height/2),
radius: (size.width - kThickness - kLineWidth)/2,
startAngle: -45°,
endAngle: -135°,
clockwise: true)
gc.setLineWidth(kThickness)
gc.setLineCap(.butt)
gc.replacePathWithStrokedPath()
let path = gc.path!
gc.setShadow(
offset: CGSize(width: 0, height: kShadowWidth/2),
blur: kShadowWidth/2,
color: UIColor.gray.cgColor
)
gc.beginTransparencyLayer(auxiliaryInfo: nil)
gc.saveGState()
let rgb = CGColorSpaceCreateDeviceRGB()
let gradient = CGGradient(
colorsSpace: rgb,
colors: [UIColor.gray.cgColor, UIColor.white.cgColor] as CFArray,
locations: [CGFloat(0), CGFloat(1)])!
let bbox = path.boundingBox
let startP = bbox.origin
var endP = CGPoint(x: bbox.maxX, y: bbox.maxY);
if (bbox.size.width > bbox.size.height) {
endP.y = startP.y
} else {
endP.x = startP.x
}
gc.clip()
gc.drawLinearGradient(gradient, start: startP, end: endP,
options: CGGradientDrawingOptions(rawValue: 0))
gc.restoreGState()
gc.addPath(path)
gc.setLineWidth(kLineWidth)
gc.setLineJoin(.miter)
UIColor.black.setStroke()
gc.strokePath()
gc.endTransparencyLayer()
let image = UIGraphicsGetImageFromCurrentImageContext()!
UIGraphicsEndImageContext()
return image
}
override func draw(_ rect: CGRect) {
niceImage.draw(at:.zero)
}
}
Call it from a viewController like this:
let vi = MView(frame: self.view.bounds)
self.view.addSubview(vi)
To do the degrees to radians conversions I have created the ° postfix operator. So you can now use e.g. 45° and this does the conversion from 45 degrees to radians.
This example is for Ints, extend these also for the Float types if you have the need:
postfix operator °
protocol IntegerInitializable: ExpressibleByIntegerLiteral {
init (_: Int)
}
extension Int: IntegerInitializable {
postfix public static func °(lhs: Int) -> CGFloat {
return CGFloat(lhs) * .pi / 180
}
}
Put this code into a utilities swift file.