cylindrical look Gradient in UIView - objective-c

I want to draw bar with a cylindrical look and with shadow effect(As shown in the below image). Can some one help to define Linear Gradient for below look and feel.
Code:
-(void)drawRect:(CGRect)rect {
//UIview Back color is red or green
CGGradientRef glossGradient;
CGColorSpaceRef rgbColorspace;
CGContextRef currentContext = UIGraphicsGetCurrentContext();
size_t num_locations = 4;
CGFloat locations[4] = { 0.0,0.7,0.9,1.0 };
CGFloat components[16] = { 0.0, 0.0, 0.0, 0.01,
0.0, 0.0, 0.0, 0.1,
0.0, 0.0, 0.0, 0.2,
0.0, 0.0, 0.0, 0.5
};
rgbColorspace = CGColorSpaceCreateDeviceRGB();
glossGradient = CGGradientCreateWithColorComponents(rgbColorspace, components, locations, num_locations);
CGRect currentBounds = self.bounds;
CGPoint topCenter = CGPointMake(CGRectGetMidX(currentBounds), 0.0f);
CGPoint midCenter = CGPointMake(CGRectGetMidX(currentBounds), currentBounds.size.height);
CGContextDrawLinearGradient(currentContext, glossGradient, topCenter, midCenter, 0);
CGGradientRelease(glossGradient);
CGColorSpaceRelease(rgbColorspace);
}

Here's a general purpose gradient maker:
CGGradientRef makeGradient2(NSArray *colors, CGFloat *stops)
{
size_t nc = 4;
NSInteger colorSize = nc * sizeof(CGFloat);
CGFloat *theComponents = malloc( [colors count] * colorSize );
CGFloat *compPtr = theComponents;
for (int i=0; i < colors.count; i++){
UIColor *color = [colors objectAtIndex:i];
CGColorRef cgColor = [color CGColor];
const CGFloat *components = CGColorGetComponents(cgColor);
memmove(compPtr, components, colorSize);
compPtr += nc;
}
CGColorSpaceRef cs = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents (cs, theComponents, stops, colors.count);
CGColorSpaceRelease(cs);
free(theComponents);
return gradient;
}
call it like (this creates a three part gray gradient with lightest in the middle)
CGFloat stops[] = { 0.0, 0.5, 1.0};
gradient = makeGradient2([NSArray arrayWithObjects:
[UIColor colorWithRed:.2 green:.2 blue:.2 alpha:1.0],
[UIColor colorWithRed:.5 green:.5 blue:.5 alpha:1.0],
[UIColor colorWithRed:.2 green:.2 blue:.2 alpha:1.0],
nil], stops);
and then you can draw with it like (for a left to right gradient):
CGContextDrawLinearGradient(gc, gradient, CGPointMake(0.0, 0.0), CGPointMake(rect.size.width, 0.0), 0);

Related

CGContextSetFill with gradient

I currently have a function where I draw a QR code
+ (void)drawQRCode:(QRcode *)code context:(CGContextRef)ctx size:(CGFloat)size {}
Currently, I can set the color including the colorspace using the following:
CGContextSetFillColorWithColor(ctx, [theColor colorUsingColorSpaceName:NSCalibratedWhiteColorSpace].CGColor);
I am trying to implement the ability to create a gradient I've converted two NSColors to an NSGradient - there doesn't appear to be any way of getting a gradient as an NSColor so I'm wondering what would be the best way of setting the fill of the context with a gradient?
Thanks in advance for any suggestions!
CGContext has drawLinearGradient
https://developer.apple.com/documentation/coregraphics/cgcontext/1454782-drawlineargradient
and drawRadialGradient
https://developer.apple.com/documentation/coregraphics/cgcontext/1455923-drawradialgradient
To use them to fill a shape, put the shape's path into the context, then use the shape as a clipping path before drawing the gradient.
Here's a drawRect from a view that demonstrates the technique:
- (void) drawRect: (CGRect) rect {
CGColorRef myColors[3] = {
[[UIColor redColor] CGColor],
[[UIColor yellowColor] CGColor],
[[UIColor blueColor] CGColor] };
CGFloat locations[3] = { 0.0, 0.25, 1.0 };
CGRect circleRect = CGRectInset([self bounds], 20, 20);
CGFloat circleRadius = circleRect.size.width / 2.0;
CGContextRef cgContext = UIGraphicsGetCurrentContext();
CGContextSaveGState(cgContext);
CGContextSetFillColorWithColor(cgContext, [[UIColor blackColor] CGColor]);
CGContextFillRect(cgContext, [self bounds]);
CGContextRestoreGState(cgContext);
CGContextSaveGState(cgContext);
CGContextAddEllipseInRect(cgContext, circleRect);
CGContextClip(cgContext);
CGContextTranslateCTM(cgContext, CGRectGetMidX(circleRect), CGRectGetMidY(circleRect));
CGContextRotateCTM(cgContext, M_PI / 3.0);
CFArrayRef colors = CFArrayCreate(nil, (const void**) myColors, 3, &kCFTypeArrayCallBacks);
CGColorSpaceRef colorSpace = CGColorSpaceCreateWithName(kCGColorSpaceSRGB);
CGGradientRef gradient = CGGradientCreateWithColors(colorSpace, colors, locations);
CFRelease(colors);
CFRelease(colorSpace);
CGContextDrawLinearGradient(cgContext, gradient, CGPointMake(-circleRadius, 0),
CGPointMake(circleRadius, 0), kCGGradientDrawsAfterEndLocation + kCGGradientDrawsBeforeStartLocation);
CFRelease(gradient);
CGContextRestoreGState(cgContext);
}
Here's an equivalent playground in Swift.
import UIKit
import PlaygroundSupport
class CircleGradientView : UIView {
override func draw(_ rect: CGRect) {
let colors = [
UIColor.red.cgColor,
UIColor.yellow.cgColor, // Yellow
UIColor.blue.cgColor // Blue
]
let colorSpace = CGColorSpace(name: CGColorSpace.sRGB)!
let locations : [CGFloat] = [0.0, 0.25, 1.0]
let gradient = CGGradient(colorsSpace: colorSpace,
colors: colors as CFArray,
locations: locations)
if let context = UIGraphicsGetCurrentContext() {
let circleRect = self.bounds.insetBy(dx: 20, dy: 20)
let circleRadius = circleRect.width / 2.0
context.saveGState()
context.addEllipse(in: circleRect)
context.clip()
context.translateBy(x: circleRect.midX, y: circleRect.midY)
context.rotate(by: .pi / 3.0)
context.drawLinearGradient(gradient!,
start: CGPoint(x: -circleRadius, y: 0),
end: CGPoint(x: circleRadius, y: 0),
options: [.drawsAfterEndLocation, .drawsBeforeStartLocation])
context.restoreGState()
}
}
}
let myView = CircleGradientView(frame: CGRect(x: 0, y: 0, width: 300, height: 300))
PlaygroundSupport.PlaygroundPage.current.liveView = myView

Two routines one in objective C, the other in Swift same code essentially different results

iOS 10.2 Swift 3.0
Trying to convert this code in objective C to Swift 3.0 and don't know the core graphics library too well.
#interface SPGripViewBorderView : UIView
#end
#implementation SPGripViewBorderView
- (id)initWithFrame:(CGRect)frame {
if ((self = [super initWithFrame:frame])) {
// Clear background to ensure the content view shows through.
self.backgroundColor = [UIColor clearColor];
}
return self;
}
- (void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
CGContextSaveGState(context);
// (1) Draw the bounding box.
CGContextSetLineWidth(context, 1.0);
CGContextSetStrokeColorWithColor(context, [UIColor blueColor].CGColor);
CGContextAddRect(context, CGRectInset(self.bounds, kSPUserResizableViewInteractiveBorderSize/2, kSPUserResizableViewInteractiveBorderSize/2));
CGContextStrokePath(context);
// (2) Calculate the bounding boxes for each of the anchor points.
CGRect upperLeft = CGRectMake(0.0, 0.0, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect upperRight = CGRectMake(self.bounds.size.width - kSPUserResizableViewInteractiveBorderSize, 0.0, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect lowerRight = CGRectMake(self.bounds.size.width - kSPUserResizableViewInteractiveBorderSize, self.bounds.size.height - kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect lowerLeft = CGRectMake(0.0, self.bounds.size.height - kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect upperMiddle = CGRectMake((self.bounds.size.width - kSPUserResizableViewInteractiveBorderSize)/2, 0.0, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect lowerMiddle = CGRectMake((self.bounds.size.width - kSPUserResizableViewInteractiveBorderSize)/2, self.bounds.size.height - kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect middleLeft = CGRectMake(0.0, (self.bounds.size.height - kSPUserResizableViewInteractiveBorderSize)/2, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
CGRect middleRight = CGRectMake(self.bounds.size.width - kSPUserResizableViewInteractiveBorderSize, (self.bounds.size.height - kSPUserResizableViewInteractiveBorderSize)/2, kSPUserResizableViewInteractiveBorderSize, kSPUserResizableViewInteractiveBorderSize);
// (3) Create the gradient to paint the anchor points.
CGFloat colors [] = {
0.4, 0.8, 1.0, 1.0,
0.0, 0.0, 1.0, 1.0
};
CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceRGB();
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;
// (4) Set up the stroke for drawing the border of each of the anchor points.
CGContextSetLineWidth(context, 1);
CGContextSetShadow(context, CGSizeMake(0.5, 0.5), 1);
CGContextSetStrokeColorWithColor(context, [UIColor whiteColor].CGColor);
// (5) Fill each anchor point using the gradient, then stroke the border.
CGRect allPoints[8] = { upperLeft, upperRight, lowerRight, lowerLeft, upperMiddle, lowerMiddle, middleLeft, middleRight };
for (NSInteger i = 0; i < 8; i++) {
CGRect currPoint = allPoints[i];
CGContextSaveGState(context);
CGContextAddEllipseInRect(context, currPoint);
CGContextClip(context);
CGPoint startPoint = CGPointMake(CGRectGetMidX(currPoint), CGRectGetMinY(currPoint));
CGPoint endPoint = CGPointMake(CGRectGetMidX(currPoint), CGRectGetMaxY(currPoint));
CGContextDrawLinearGradient(context, gradient, startPoint, endPoint, 0);
CGContextRestoreGState(context);
CGContextStrokeEllipseInRect(context, CGRectInset(currPoint, 1, 1));
}
CGGradientRelease(gradient), gradient = NULL;
CGContextRestoreGState(context);
}
#end
Which I re-coded as this ...
import UIKit
class GripViewBorderView: UIView {
let kUserResizableViewInteractiveBorderSize:CGFloat = 10.0
required init?(coder aDecoder: NSCoder) {
super.init(coder: aDecoder)
}
override init(frame: CGRect) {
super.init(frame: frame)
}
override func draw(_ rect:CGRect) {
let context = UIGraphicsGetCurrentContext();
context!.saveGState();
// (1) Draw the bounding box.
context!.setLineWidth(1.0);
context!.setStrokeColor(UIColor.blue.cgColor)
//CGContextAddRect(context!, CGRectInset(self.bounds, (kSPUserResizableViewInteractiveBorderSize / 2.0), (kSPUserResizableViewInteractiveBorderSize / 2.0)));
context!.addRect(self.bounds.insetBy(dx: (kUserResizableViewInteractiveBorderSize / 2.0), dy: (kUserResizableViewInteractiveBorderSize / 2.0)))
context!.strokePath();
// (2) Calculate the bounding boxes for each of the anchor points.
let upperLeft = CGRect(x: 0.0, y: 0.0, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize)
let upperRight = CGRect(x: self.bounds.size.width - kUserResizableViewInteractiveBorderSize, y: 0.0, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
let lowerRight = CGRect(x: self.bounds.size.width - kUserResizableViewInteractiveBorderSize, y: self.bounds.size.height - kUserResizableViewInteractiveBorderSize, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
let lowerLeft = CGRect(x: 0.0, y: self.bounds.size.height - kUserResizableViewInteractiveBorderSize, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
let upperMiddle = CGRect(x: (self.bounds.size.width - kUserResizableViewInteractiveBorderSize)/2, y: 0.0, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
let lowerMiddle = CGRect(x: (self.bounds.size.width - kUserResizableViewInteractiveBorderSize)/2, y: self.bounds.size.height - kUserResizableViewInteractiveBorderSize, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
let middleLeft = CGRect(x: 0.0, y: (self.bounds.size.height - kUserResizableViewInteractiveBorderSize)/2, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
let middleRight = CGRect(x: self.bounds.size.width - kUserResizableViewInteractiveBorderSize, y: (self.bounds.size.height - kUserResizableViewInteractiveBorderSize)/2, width: kUserResizableViewInteractiveBorderSize, height: kUserResizableViewInteractiveBorderSize);
// (3) Create the gradient to paint the anchor points.
let baseSpace = CGColorSpaceCreateDeviceRGB()
//let gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2)
let colors = [UIColor.red.cgColor,
UIColor.yellow.cgColor]
let gradient = CGGradient(colorsSpace: baseSpace, colors: colors as CFArray, locations: nil)
// (4) Set up the stroke for drawing the border of each of the anchor points.
context!.setLineWidth(1)
context!.setShadow(offset: CGSize(width: 0.5, height: 0.5), blur: 1)
context!.setStrokeColor(UIColor.white.cgColor)
// (5) Fill each anchor point using the gradient, then stroke the border.
let allPoints:[CGRect] = [ upperLeft, upperRight, lowerRight, lowerLeft, upperMiddle, lowerMiddle, middleLeft, middleRight ];
for i in 0 ... 7 {
let currPoint = allPoints[i]
context!.saveGState()
context!.addEllipse(in: currPoint)
context!.clip()
let startPoint = CGPoint(x: currPoint.midX, y: currPoint.minY);
let endPoint = CGPoint(x: currPoint.midX, y: currPoint.maxY);
context!.drawLinearGradient(gradient!, start: startPoint, end: endPoint, options: .init(rawValue: 0))
context!.saveGState()
context!.strokeEllipse(in: currPoint.insetBy(dx: 1, dy: 1))
}
context!.restoreGState()
}
}
But I missed something cause the OOC is on the left and my new Swift on the right. For reasons I cannot figure I get only a single dot drawn in my version, the OOC version draws 8 dots [correctly].
You have written context!.saveGState() at the end of the for loop in place of CGContextRestoreGState(context). It should, of course, be context!.restoreGState(). Simple typo!
Also, please remove all of the semi-colons, and use guard let context = UIGraphicsGetCurrentContext() else { return } to get rid of all those forced unwrappings!

Rotating a CAShapeLayer arc about its center using CABasicAnimation

I have an arc that I have drawn using CAShapeLayer and I want it to rotate around the circle's center. I am trying to get this animation using a CABasicAnimation on the 'transform.rotation' property. But the rotation seems is happening about a point that is not the same as the circle's center.
-(void)drawRect:(CGRect)rect{
int radius = 100;
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
circle.fillColor = [UIColor orangeColor].CGColor;
circle.strokeColor = [UIColor blueColor].CGColor;
circle.lineWidth = 5;
circle.strokeStart = 0.0f;
circle.strokeEnd = 0.1f;
[self.layer addSublayer:circle];
CABasicAnimation *spinAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
spinAnimation.byValue = [NSNumber numberWithFloat:2.0f*M_PI];
spinAnimation.duration = 4;
spinAnimation.repeatCount = INFINITY;
[circle addAnimation:spinAnimation forKey:#"indeterminateAnimation"];
}
I know its an old problem, but whats the way out. I have tinkered a lot by setting the layer's bounds or the anchor point but it doesn't rotate about the center yet.
circle.bounds = self.frame;
Here is how I add the view to the view controller.
[self.view addSubview:[[ProgressIndicator alloc] initWithFrame:CGRectMake(50, 50, 200, 200)]];
This is what I eventually did.
The mistake was to add the animation to the sublayer and not the layer.
There is no need to tinker with anchorPoint or position here when the rotation is just needed about the center of the circle.
- (id)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.backgroundColor = [UIColor clearColor];
int radius = 50;
CAShapeLayer *circle = [CAShapeLayer layer];
circle.path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, 2.0*radius, 2.0*radius) cornerRadius:radius].CGPath;
circle.fillColor = [UIColor clearColor].CGColor;
circle.strokeColor = [UIColor blueColor].CGColor;
circle.lineWidth = 5;
circle.strokeStart = 0.0f;
circle.strokeEnd = 0.1f;
[self.layer addSublayer:circle];
}
return self; }
- (void)drawRect:(CGRect)rect {
CABasicAnimation *spinAnimation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
spinAnimation.byValue = [NSNumber numberWithFloat:2.0f*M_PI];
spinAnimation.duration = 4;
spinAnimation.repeatCount = INFINITY;
[self.layer addAnimation:spinAnimation forKey:#"indeterminateAnimation"]; }
Think is better to do something like this)
CGFloat center = CGRectGetWidth(frame) / 2;
CGFloat lineWidth = 5;
CGFloat radius = center - lineWidth / 2;
CGRect bounds = frame;
bounds.origin = CGPointZero;
CAShapeLayer *spinLayer = [CAShapeLayer layer];
spinLayer.path = [UIBezierPath bezierPathWithArcCenter:CGPointMake(center, center) radius:radius startAngle:0 endAngle:0.2 clockwise:YES].CGPath;
spinLayer.fillColor = [UIColor clearColor].CGColor;
spinLayer.strokeColor = [UIColor blueColor].CGColor;
spinLayer.lineWidth = 5;
spinLayer.lineCap = kCALineCapRound;
spinLayer.bounds = bounds;
spinLayer.position = CGPointMake(center, center);
[self.layer insertSublayer:spinLayer above:nil];
And animation:
CABasicAnimation *animation = [CABasicAnimation animationWithKeyPath:#"transform.rotation"];
animation.byValue = [NSNumber numberWithFloat:2.f * M_PI];
animation.duration = 1.5f;
animation.repeatCount = INFINITY;
[spinLayer addAnimation:animation forKey:#"lineRotation"];
[self setNeedsLayout];
Swift 3
var bounds = frame
bounds.origin = CGPoint.zero
let center: CGFloat = frame.size.width
let lineWidth: CGFloat = 5
let radius = center - lineWidth / 2
let spinLayer = CAShapeLayer()
spinLayer.path = UIBezierPath(arcCenter: CGPoint(x: center, y: center),
radius: radius,
startAngle: 0,
endAngle: 0.2,
clockwise: true).cgPath
spinLayer.strokeColor = UIColor.blue.cgColor
spinLayer.fillColor = UIColor.clear.cgColor
spinLayer.lineWidth = lineWidth
spinLayer.lineCap = kCALineCapRound
spinLayer.bounds = bounds
spinLayer.position = CGPoint(x: center, y: center)
view.layer.insertSublayer(spinLayer, above: nil)
let rotation = CABasicAnimation(keyPath: "transform.rotation")
rotation.byValue = NSNumber(value: 2*M_PI as Double)
rotation.duration = 1
rotation.repeatCount = Float.infinity
spinLayer.add(rotation, forKey: "lineRotation")

Core Graphics AddQuadCureToPoint from Center of View/Circle

What I am trying to accomplish is drawing curved lines from a center of a view. So far with the help of much googling and this site...I've accomplished the image below.
http://www.flickr.com/photos/57562417#N00/9100635690/
What I would like to do is have curved lines like the following image...
http://www.flickr.com/photos/57562417#N00/9100634674/
Any and all help would be appreciated. I've included the code thus far.
#import <UIKit/UIKit.h>
#interface ChartView : UIView
#property (nonatomic,assign) int angle;
#end
----------------------------------------------------------------------
#import "ChartView.h"
#import <QuartzCore/QuartzCore.h>
/** Helper Functions **/
#define degree_to_radians(deg) ( (M_PI * (deg)) / 180.0 )
#define radians_to_degrees(rad) ( (180.0 * (rad)) / M_PI )
#interface ChartView(){
int radius;
}
#end
#implementation ChartView
-(id)initWithFrame:(CGRect)frame{
self = [super initWithFrame:frame];
if(self){
self.backgroundColor = [UIColor whiteColor];
[self.layer setBorderWidth:1.0];
[self.layer setBorderColor:[UIColor redColor].CGColor];
//Define the circle radius taking into account the safe area
radius = self.frame.size.width/2;
//Initialize the Angle at 0
self.angle = 360;
}
return self;
}
-(void)drawRect:(CGRect)rect{
//Circle center
int numberOfSections = 96; //24 major lines
CGFloat angleSize = 2 * M_PI/numberOfSections;
CGContextRef context = UIGraphicsGetCurrentContext();
//draw the main outside circle
CGRect circleRect = CGRectMake(0.0, 0.0, 720., 720.);
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextStrokeEllipseInRect(context, circleRect);
CGPoint centerPoint = CGPointMake(circleRect.size.width/2 , circleRect.size.height/2);
//setup for drawing lines from center, straight lines, need curved lines
CGContextTranslateCTM(context, 0.0, 0.0);
for (int x = 0; x < numberOfSections; x++) {
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextMoveToPoint(context, self.frame.size.width/2, self.frame.size.height/2);
CGContextAddLineToPoint(context, centerPoint.x + radius * cos(angleSize * x) ,centerPoint.y + radius * sin(angleSize * x));
CGContextStrokePath(context);
}
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextSetRGBFillColor(context, 1., 1., 1., 1.0);
//Taken from Hypnotizer code
float maxRadius = 360.0;
CGContextSetLineWidth(context, 0.5f);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
//need to add 100 lines form a certain radius to a max radius
for (float currentRadius = maxRadius; currentRadius > 99; currentRadius -=2.6) {
CGContextAddArc(context, centerPoint.x, centerPoint.y, currentRadius, 0.0, M_PI * 2.0, YES);
CGContextStrokePath(context);
}
}
#end
Alright, I've got some code for you that I tried out and does the curved line effect you mentioned in that second picture:
- (void)drawRect:(CGRect)rect {
radius = self.frame.size.width / 2;
// Circle center
int numberOfSections = 96; // 24 major lines
CGFloat angleSize = 2 * M_PI/ numberOfSections;
CGContextRef context = UIGraphicsGetCurrentContext();
CGRect circleRect = CGRectMake(0.0, 0.0, 720., 720.);
CGPoint centerPoint = CGPointMake(circleRect.size.width / 2, circleRect.size.height / 2);
/* Create mask to create 'hole' in the center */
CGContextAddArc(context, centerPoint.x, centerPoint.y, 720 / 2.0, 0.0, M_PI * 2.0, YES);
CGContextAddArc(context, centerPoint.x, centerPoint.y, 100, 0.0, M_PI * 2.0, NO);
CGContextClip(context);
// draw the main outside circle
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextStrokeEllipseInRect(context, circleRect);
// setup for drawing lines from center, straight lines, need curved lines
CGContextTranslateCTM(context, 0.0, 0.0);
for (int x = 0; x < numberOfSections; x++) {
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
double angle = angleSize * x;
CGPoint outsidePoint = CGPointMake(centerPoint.x + radius * cos(angle), centerPoint.y + radius * sin(angle));
CGPoint control1 = CGPointMake(centerPoint.x + radius/3 * cos(angle-0.5), centerPoint.y + radius/3 * sin(angle-0.5));
CGPoint control2 = CGPointMake(centerPoint.x + (2*radius/3) * cos(angle-0.5), centerPoint.y + (2*radius/3) * sin(angle-0.5));
UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint:CGPointMake(circleRect.size.width / 2, circleRect.size.height / 2)];
[bezierPath addCurveToPoint:outsidePoint controlPoint1:control1 controlPoint2:control2];
CGContextAddPath(context, bezierPath.CGPath);
CGContextStrokePath(context);
}
CGContextSetLineWidth(context, .5);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
CGContextSetRGBFillColor(context, 1., 1., 1., 1.0);
// Taken from Hypnotizer code
float maxRadius = 360.0;
CGContextSetLineWidth(context, 0.5f);
CGContextSetRGBStrokeColor(context, 0.0, 2.0, 4.0, 1.0);
// need to add 100 lines form a certain radius to a max radius
for (float currentRadius = maxRadius; currentRadius > 99; currentRadius -= 2.6) {
CGContextAddArc(context, centerPoint.x, centerPoint.y, currentRadius, 0.0, M_PI * 2.0, YES);
CGContextStrokePath(context);
}
}

Existing implementation of cropImage:to:andScaleTo: and straightenAndScaleImage()?

I'm writing code to use UIImagePickerController. Corey previously posted some nice sample code on SO related to cropping and scaling. However, it doesn't have implementations of cropImage:to:andScaleTo: nor straightenAndScaleImage().
Here's how they're used:
newImage = [self cropImage:originalImage to:croppingRect andScaleTo:scaledImageSize];
...
UIImage *rotatedImage = straightenAndScaleImage([editInfo objectForKey:UIImagePickerControllerOriginalImage], scaleSize);
Since I'm sure someone must be using something very similar to Corey's sample code, there's probably an existing implementation of these two functions. Would someone like to share?
If you check the post you linked to, you'll see a link to the apple dev forums where I got some of this code, here are the methods you are asking about. Note: I may have made some changes relating to data types, but I can't quite remember. It should be trivial for you to adjust if needed.
- (UIImage *)cropImage:(UIImage *)image to:(CGRect)cropRect andScaleTo:(CGSize)size {
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();
CGImageRef subImage = CGImageCreateWithImageInRect([image CGImage], cropRect);
CGRect myRect = CGRectMake(0.0f, 0.0f, size.width, size.height);
CGContextScaleCTM(context, 1.0f, -1.0f);
CGContextTranslateCTM(context, 0.0f, -size.height);
CGContextDrawImage(context, myRect, subImage);
UIImage* croppedImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
CGImageRelease(subImage);
return croppedImage;
}
UIImage *straightenAndScaleImage(UIImage *image, int maxDimension) {
CGImageRef img = [image CGImage];
CGFloat width = CGImageGetWidth(img);
CGFloat height = CGImageGetHeight(img);
CGRect bounds = CGRectMake(0, 0, width, height);
CGSize size = bounds.size;
if (width > maxDimension || height > maxDimension) {
CGFloat ratio = width/height;
if (ratio > 1.0f) {
size.width = maxDimension;
size.height = size.width / ratio;
}
else {
size.height = maxDimension;
size.width = size.height * ratio;
}
}
CGFloat scale = size.width/width;
CGAffineTransform transform = orientationTransformForImage(image, &size);
UIGraphicsBeginImageContext(size);
CGContextRef context = UIGraphicsGetCurrentContext();
// Flip
UIImageOrientation orientation = [image imageOrientation];
if (orientation == UIImageOrientationRight || orientation == UIImageOrientationLeft) {
CGContextScaleCTM(context, -scale, scale);
CGContextTranslateCTM(context, -height, 0);
}else {
CGContextScaleCTM(context, scale, -scale);
CGContextTranslateCTM(context, 0, -height);
}
CGContextConcatCTM(context, transform);
CGContextDrawImage(context, bounds, img);
UIImage *newImage = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
return newImage;
}