I am trying to display a UIView similar to this image url
Click here to view uiview image
This is a UIView containing UIimageview and label.
Is there a way to set layer effect similar to this?
Thanks in advance
Joe.
#import <QuartzCore/QuartzCore.h>
you can use
imageView.layer.shadowRadius = 2.0;
imageView.layer.shadowOpacity = 0.7;
imageView.layer.shadowColor = [UIColor blackColor].CGColor;
imageView.layer.shadowPath = [self createArcShadowPathForRect:imageView.frame].CGPath
#define archeight 25
-(UIBezierPath *)createArcShadowPathForRect:(CGRect)rect {
CGFloat h_padding = (self.imageView.frame.size.width - rect.size.width) /2;
CGFloat v_padding = (self.imageView.frame.size.height - rect.size.height) /2-10;
CGPoint startPoint = CGPointMake(0 + h_padding, rect.size.height + v_padding) ;
CGPoint pointTwo = CGPointMake(0 + h_padding, rect.size.height + archeight + v_padding) ;
CGPoint controlCenterPoint = CGPointMake(rect.size.width/2 + h_padding, rect.size.height + v_padding+ 10);
CGPoint leftDownPoint = CGPointMake(rect.size.width + h_padding, rect.size.height + archeight + v_padding) ;
CGPoint leftUpPoint = CGPointMake(rect.size.width + h_padding, rect.size.height + v_padding) ;
UIBezierPath *path = nil;
if(!path) {
path = [[UIBezierPath bezierPath] retain];
[path moveToPoint:startPoint];
[path moveToPoint:pointTwo];
[path addQuadCurveToPoint:leftDownPoint controlPoint:controlCenterPoint];
[path addLineToPoint:leftUpPoint];
[path addLineToPoint:startPoint];
[path closePath];
}
return path;
}
Related
I try to hexagon and I have some issue in the close path.
Here is my hexagon, and the close path is not smooth.
Here is my drawing code
CAShapeLayer* shapeLayer = [CAShapeLayer layer];
UIBezierPath* path = [UIBezierPath bezierPath];
// [path setLineJoinStyle:kCGLineJoinRound];
// [path setLineJoinStyle:kCGLineJoinBevel];
[path setLineJoinStyle:kCGLineJoinMiter];
// CGFloat dashes[] = {6, 2};
// [path setLineDash:dashes count:2 phase:0];
// [path stroke];
CGFloat radians = 100.0;
NSInteger num = 6;
CGFloat interval = 2*M_PI/num;
NSInteger initX = radians*cosf(interval);
NSInteger initY = radians*sinf(interval);
[path moveToPoint:CGPointMake(location.x - semiWidth + initX, location.y - semiHeight + initY)];
for(int i=1; i<=num; i++){
CGFloat x = radians*cosf(i*interval);
CGFloat y = radians*sinf(i*interval);
[path addLineToPoint:CGPointMake(location.x - semiWidth + x, location.y - semiHeight + y)];
}
[path closePath];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor yellowColor] CGColor];
shapeLayer.fillColor = [[UIColor brownColor] CGColor];
shapeLayer.lineWidth = 4.0f;
Also I try to use different options as following with no luck
[path setLineJoinStyle:kCGLineJoinRound];
[path setLineJoinStyle:kCGLineJoinBevel];
[path setLineJoinStyle:kCGLineJoinMiter];
The problem is that you're not making your first point (the point you move-to) the same way you're making your other points (the points you line-to).
NSInteger initX = radians*cosf(interval);
NSInteger initY = radians*sinf(interval);
[path moveToPoint:CGPointMake(
location.x - semiWidth + initX, location.y - semiHeight + initY)];
Instead, make the first point completely parallel with the others:
CGFloat x = radians*cosf(0*interval);
CGFloat y = radians*sinf(0*interval);
[path moveToPoint:CGPointMake(
location.x - semiWidth + x, location.y - semiHeight + y)];
That's exactly the same as what you'll do later with i*interval, and to emphasize that parallelism, I've written 0 as 0*interval. Here's what I ended up with:
I am drawing a hexagon with 3 different colors. I gave a color for each line.
Here is my code;
- (void)drawRect:(CGRect)rect {
self.colors = [[NSMutableArray alloc] initWithObjects:[UIColor yellowColor],[UIColor yellowColor],[UIColor blueColor],[UIColor blueColor],[UIColor greenColor],[UIColor greenColor], nil];
[self addPointsToArray];
CGPoint startPoint = [[self.points objectAtIndex:self.pointCounter] CGPointValue];
CGPoint endPoint = [[self.points objectAtIndex:self.pointCounter+1] CGPointValue];
UIColor *color = [self.colors objectAtIndex:self.pointCounter];
[self drawingEachLineWithDifferentBezier:startPoint endPoint:endPoint color:color];
self.pointCounter++;
}
- (void)addPointsToArray {
self.points = [[NSMutableArray alloc] init];
float polySize = self.frame.size.height/2;
CGFloat hexWidth = self.frame.size.width;
CGFloat hexHeight = self.frame.size.height;
CGPoint center = CGPointMake(hexWidth/2, hexHeight/2);
CGPoint startPoint = CGPointMake(center.x, 0);
for(int i = 3; i >= 1 ; i--) {
CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
NSLog(#"x = %f, y= %f",x,y);
CGPoint point = CGPointMake(center.x + x, center.y + y);
[self.points addObject:[NSValue valueWithCGPoint:point]];
}
for(int i = 6; i > 3 ; i--) {
CGFloat x = polySize * sinf(i * 2.0 * M_PI / 6);
CGFloat y = polySize * cosf(i * 2.0 * M_PI / 6);
CGPoint point = CGPointMake(center.x + x, center.y + y);
[self.points addObject:[NSValue valueWithCGPoint:point]];
}
[self.points addObject:[NSValue valueWithCGPoint:startPoint]];
}
- (void)drawingEachLineWithDifferentBezier:(CGPoint)startPoint endPoint:(CGPoint)endPoint color:(UIColor *)color {
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:startPoint];
[path addLineToPoint:endPoint];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.bounds;
pathLayer.path = path.CGPath;
pathLayer.lineCap = kCALineCapRound;
//pathLayer.lineCap = kCALineCapSquare;
pathLayer.strokeColor = [color CGColor];
pathLayer.fillColor = nil;
pathLayer.lineWidth = 15.0f;
pathLayer.cornerRadius = 2.0f;
pathLayer.lineJoin = kCALineJoinBevel;
//pathLayer.lineDashPattern = #[#15];
[self.layer addSublayer:pathLayer];
CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:#"strokeEnd"];
pathAnimation.duration = 0.3f;
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f];
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f];
pathAnimation.delegate = self;
[pathLayer addAnimation:pathAnimation forKey:#"strokeEnd"];
}
- (void)animationDidStop:(CAAnimation *)theAnimation finished:(BOOL)flag{
if (self.pointCounter < self.points.count - 1) {
CGPoint startPoint = [[self.points objectAtIndex:self.pointCounter] CGPointValue];
CGPoint endPoint = [[self.points objectAtIndex:self.pointCounter+1] CGPointValue];
UIColor *color = [self.colors objectAtIndex:self.pointCounter];
[self drawingEachLineWithDifferentBezier:startPoint endPoint:endPoint color:color];
self.pointCounter++;
}
}
and I got this view.
My purpose is, i want to be yellow color until red point on 3. line. So i thought if i can find red point coodinate, i can add new point in my points array. Than i can draw yellow line from end of 2. line to red point and blue line from red point to end of 3. line.
Am i on wrong way? If i am not, how can i find red point coordinate or what is your advice?
Thanks for your answer and interest :).
I'm creating a dotted line from a UIBezierPath which looks like this:
This is the code I use to construct and draw the path:
const CGContextRef context = UIGraphicsGetCurrentContext();
const CGSize visibleSize = CGSizeMake(self.width - (kIndent * 2), self.height - (kIndent * 2));
UIBezierPath *borderPath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(kIndent, kIndent, visibleSize.width, visibleSize.height) cornerRadius:kCornerRadius];
CGContextSetStrokeColorWithColor(context, [UIColor colorWithWhite:1.0 alpha:0.5].CGColor);
[borderPath setLineWidth:2.0];
[borderPath setLineCapStyle:kCGLineCapRound];
const CGFloat pattern[] = {6, 6};
[borderPath setLineDash:pattern count:2 phase:0];
[borderPath stroke];
What I want is for each corner of my square to have the exact same curvatures as each other. I know this will ultimately be determined by my pattern values. I have tried calculating different values from the width of the shape (the width changes with screen width), but I can't get my desired look.
Has anyone done this before, or have any ideas to share about how I'd do this?
This is what I done before. Not perfect but I think this can help you.
- (void)tailorRect:(CGRect)aRect dotsWidth:(CGFloat)dotWidth radius:(CGFloat)radius withColor:(UIColor*)color{
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSaveGState(c);
CGFloat minSpacing = 10;
CGFloat mWidth = aRect.size.width - radius *2;
CGFloat mHeight = aRect.size.height - radius *2;
int countW = mWidth / (dotWidth + minSpacing);
int countH = mHeight / (dotWidth + minSpacing);
CGFloat spacingW = (mWidth - (dotWidth * countW)) / (countW + 1);
CGFloat spacingH = (mHeight -(dotWidth * countH)) / (countH + 1);
CGContextSetLineCap(c, kCGLineCapRound);
CGContextSetLineWidth(c, 1.2);
CGRect tempRect = aRect;
for (int r = 0; r<=1; r++)
{
if (r==0)
{
CGContextSetStrokeColorWithColor(c, [[UIColor whiteColor] colorWithAlphaComponent:0.9].CGColor);
aRect = CGRectOffset(tempRect, 0, 0.5);
}
else
{
CGContextSetStrokeColorWithColor(c, color.CGColor);
aRect = tempRect;
}
for (int w = 0; w<=1; w++)
{
CGFloat y = (w==0) ? aRect.origin.y : CGRectGetMaxY(aRect);
CGPoint pointsW[countW*2];
for (int i = 0; i<countW*2; i++)
{
CGFloat x;
CGFloat startPointX = radius + spacingW +aRect.origin.x;
if (i%2 != 0)
{
x = startPointX
+ dotWidth * (i+1)/ 2
+ spacingW * ((int)i/2);
}
else
{
x = startPointX
+ (dotWidth+spacingW) * ((int)i/2);
}
pointsW[i] = CGPointMake(x, y);
}
CGContextStrokeLineSegments(c, pointsW, countW*2);
}
for (int h = 0; h<=1; h++)
{
CGFloat x = (h==0) ? aRect.origin.x : CGRectGetMaxX(aRect);
CGPoint pointsH[countH*2];
for (int j = 0; j<countH*2; j++)
{
CGFloat startY = radius + spacingH + aRect.origin.y;
CGFloat y;
if (j%2 != 0)
{
y = startY + dotWidth * (j+1)/2 + spacingH * ((int)j/2);
}
else
{
y = startY + (dotWidth + spacingH) * ((int)j/2);
}
pointsH[j] = CGPointMake(x, y);
}
CGContextStrokeLineSegments(c, pointsH, countH*2);
}
//radius
for (int i = 0; i<4; i++)
{
CGPoint point0;
CGPoint point1;
CGPoint point2;
switch (i) {
case 0:
point0 = CGPointMake(CGRectGetMinX(aRect), CGRectGetMinY(aRect) + radius);
point1 = CGPointMake(CGRectGetMinX(aRect), CGRectGetMinY(aRect));
point2 = CGPointMake(CGRectGetMinX(aRect) + radius, CGRectGetMinY(aRect));
break;
case 1:
point0 = CGPointMake(CGRectGetMaxX(aRect) - radius, CGRectGetMinY(aRect));
point1 = CGPointMake(CGRectGetMaxX(aRect), CGRectGetMinY(aRect));
point2 = CGPointMake(CGRectGetMaxX(aRect) , CGRectGetMinY(aRect) +radius);
break;
case 2:
point0 = CGPointMake(CGRectGetMaxX(aRect), CGRectGetMaxY(aRect) - radius);
point1 = CGPointMake(CGRectGetMaxX(aRect), CGRectGetMaxY(aRect));
point2 = CGPointMake(CGRectGetMaxX(aRect) - radius, CGRectGetMaxY(aRect));
break;
case 3:
point0 = CGPointMake(CGRectGetMinX(aRect), CGRectGetMaxY(aRect) - radius);
point1 = CGPointMake(CGRectGetMinX(aRect), CGRectGetMaxY(aRect));
point2 = CGPointMake(CGRectGetMinX(aRect) + radius, CGRectGetMaxY(aRect));
break;
default:
break;
}
CGContextMoveToPoint(c, point0.x, point0.y);
CGContextAddArcToPoint(c, point1.x, point1.y, point2.x, point2.y, radius);
CGContextStrokePath(c);
}
}
CGContextRestoreGState(c);
}
It's very simple:
[yourView.layer setBorderWidth:5.0];
[yourView.layer setBorderColor:[[UIColor colorWithPatternImage:[UIImage imageNamed:#"DotedImage.png"]] CGColor]];///just add image name and create image with dashed or doted drawing and add here
Here you're just required to add QuartzCore/QuartzCore.h framework in project and import it as below in .m file
#import <QuartzCore/QuartzCore.h>
Or try using
- (void)drawDashedBorderAroundView:(UIView *)v
{
//border definitions
CGFloat cornerRadius = 10;
CGFloat borderWidth = 2;
NSInteger dashPattern1 = 8;
NSInteger dashPattern2 = 8;
UIColor *lineColor = [UIColor orangeColor];
//drawing
CGRect frame = v.bounds;
CAShapeLayer *_shapeLayer = [CAShapeLayer layer];
//creating a path
CGMutablePathRef path = CGPathCreateMutable();
//drawing a border around a view
CGPathMoveToPoint(path, NULL, 0, frame.size.height - cornerRadius);
CGPathAddLineToPoint(path, NULL, 0, cornerRadius);
CGPathAddArc(path, NULL, cornerRadius, cornerRadius, cornerRadius, M_PI, -M_PI_2, NO);
CGPathAddLineToPoint(path, NULL, frame.size.width - cornerRadius, 0);
CGPathAddArc(path, NULL, frame.size.width - cornerRadius, cornerRadius, cornerRadius, -M_PI_2, 0, NO);
CGPathAddLineToPoint(path, NULL, frame.size.width, frame.size.height - cornerRadius);
CGPathAddArc(path, NULL, frame.size.width - cornerRadius, frame.size.height - cornerRadius, cornerRadius, 0, M_PI_2, NO);
CGPathAddLineToPoint(path, NULL, cornerRadius, frame.size.height);
CGPathAddArc(path, NULL, cornerRadius, frame.size.height - cornerRadius, cornerRadius, M_PI_2, M_PI, NO);
//path is set as the _shapeLayer object's path
_shapeLayer.path = path;
CGPathRelease(path);
_shapeLayer.backgroundColor = [[UIColor clearColor] CGColor];
_shapeLayer.frame = frame;
_shapeLayer.masksToBounds = NO;
[_shapeLayer setValue:[NSNumber numberWithBool:NO] forKey:#"isCircle"];
_shapeLayer.fillColor = [[UIColor clearColor] CGColor];
_shapeLayer.strokeColor = [lineColor CGColor];
_shapeLayer.lineWidth = borderWidth;
_shapeLayer.lineDashPattern = [NSArray arrayWithObjects:[NSNumber numberWithInt:dashPattern1], [NSNumber numberWithInt:dashPattern2], nil];
_shapeLayer.lineCap = kCALineCapRound;
//_shapeLayer is added as a sublayer of the view, the border is visible
[v.layer addSublayer:_shapeLayer];
v.layer.cornerRadius = cornerRadius;
}
You can have some study in
http://lukagabric.com/cashapelayer-example-round-corners-view-with-dashed-line-border/
https://github.com/lukagabric/LBorderView
drawing dashed line using CALayer
UIView with a Dashed line
Here is a UIView subclass that can work for any project, it also works for round views:
import UIKit
class CustomDashedView: UIView {
#IBInspectable var cornerRadius: CGFloat = 0 {
didSet {
layer.cornerRadius = cornerRadius
layer.masksToBounds = cornerRadius > 0
}
}
#IBInspectable var dashWidth: CGFloat = 0
#IBInspectable var dashColor: UIColor = .clear
#IBInspectable var dashLength: CGFloat = 0
#IBInspectable var betweenDashesSpace: CGFloat = 0
var dashBorder: CAShapeLayer?
override func layoutSubviews() {
super.layoutSubviews()
dashBorder?.removeFromSuperlayer()
let dashBorder = CAShapeLayer()
dashBorder.lineWidth = dashWidth
dashBorder.strokeColor = dashColor.cgColor
dashBorder.lineDashPattern = [dashLength, betweenDashesSpace] as [NSNumber]
dashBorder.frame = bounds
dashBorder.fillColor = nil
if cornerRadius > 0 {
dashBorder.path = UIBezierPath(roundedRect: bounds, cornerRadius: cornerRadius).cgPath
} else {
dashBorder.path = UIBezierPath(rect: bounds).cgPath
}
layer.addSublayer(dashBorder)
self.dashBorder = dashBorder
}
}
This way you can edit from the Storyboard like this:
The code below is drawing me a circle, how can I modify the existing code to draw a triangle instead?
_colorDotLayer = [CALayer layer];
CGFloat width = self.bounds.size.width-6;
_colorDotLayer.bounds = CGRectMake(0, 0, width, width);
_colorDotLayer.allowsGroupOpacity = YES;
_colorDotLayer.backgroundColor = self.annotationColor.CGColor;
_colorDotLayer.cornerRadius = width/2;
_colorDotLayer.position = CGPointMake(self.bounds.size.width/2, self.bounds.size.height/2);
While there are shown several Core Graphics solution, I want to add a Core Animation based solution.
- (void)viewDidLoad
{
[super viewDidLoad];
UIBezierPath* trianglePath = [UIBezierPath bezierPath];
[trianglePath moveToPoint:CGPointMake(0, view3.frame.size.height-100)];
[trianglePath addLineToPoint:CGPointMake(view3.frame.size.width/2,100)];
[trianglePath addLineToPoint:CGPointMake(view3.frame.size.width, view2.frame.size.height)];
[trianglePath closePath];
CAShapeLayer *triangleMaskLayer = [CAShapeLayer layer];
[triangleMaskLayer setPath:trianglePath.CGPath];
UIView *view = [[UIView alloc] initWithFrame:CGRectMake(0,0, size.width, size.height)];
view.backgroundColor = [UIColor colorWithWhite:.75 alpha:1];
view.layer.mask = triangleMaskLayer;
[self.view addSubview:view];
}
code based on my blog post.
#implementation TriangleView {
CAShapeLayer *_colorDotLayer;
}
- (void)layoutSubviews {
[super layoutSubviews];
if (_colorDotLayer == nil) {
_colorDotLayer = [CAShapeLayer layer];
_colorDotLayer.fillColor = self.annotationColor.CGColor;
[self.layer addSublayer:_colorDotLayer];
}
CGRect bounds = self.bounds;
CGFloat radius = (bounds.size.width - 6) / 2;
CGFloat a = radius * sqrt((CGFloat)3.0) / 2;
CGFloat b = radius / 2;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(0, -radius)];
[path addLineToPoint:CGPointMake(a, b)];
[path addLineToPoint:CGPointMake(-a, b)];
[path closePath];
[path applyTransform:CGAffineTransformMakeTranslation(CGRectGetMidX(bounds), CGRectGetMidY(bounds))];
_colorDotLayer.path = path.CGPath;
}
- (void)awakeFromNib {
[super awakeFromNib];
self.annotationColor = [UIColor redColor];
}
#end
Result:
I think is more easy than this solutions:
UIBezierPath *path = [UIBezierPath new];
[path moveToPoint:(CGPoint){20, 0}];
[path addLineToPoint:(CGPoint){40, 40}];
[path addLineToPoint:(CGPoint){0, 40}];
[path addLineToPoint:(CGPoint){20, 0}];
// Create a CAShapeLayer with this triangular path
// Same size as the original imageView
CAShapeLayer *mask = [CAShapeLayer new];
mask.frame = self.viewTriangleCallout.bounds;
mask.path = path.CGPath;
This is my white triangle:
You can change points or rotate if you want:
UIBezierPath *path = [UIBezierPath new];
[path moveToPoint:(CGPoint){0, 0}];
[path addLineToPoint:(CGPoint){40, 0}];
[path addLineToPoint:(CGPoint){20, 20}];
[path addLineToPoint:(CGPoint){0, 0}];
// Create a CAShapeLayer with this triangular path
// Same size as the original imageView
CAShapeLayer *mask = [CAShapeLayer new];
mask.frame = self.viewTriangleCallout.bounds;
mask.path = path.CGPath;
Example code, it is based on this SO Answer which draws stars:
#implementation TriangleView
-(void)drawRect:(CGRect)rect {
CGContextRef context = UIGraphicsGetCurrentContext();
int sides = 3;
double size = 100.0;
CGPoint center = CGPointMake(160.0, 100.0);
double radius = size / 2.0;
double theta = 2.0 * M_PI / sides;
CGContextMoveToPoint(context, center.x, center.y-radius);
for (NSUInteger k=1; k<sides; k++) {
float x = radius * sin(k * theta);
float y = radius * cos(k * theta);
CGContextAddLineToPoint(context, center.x+x, center.y-y);
}
CGContextClosePath(context);
CGContextFillPath(context); // Choose for a filled triangle
// CGContextSetLineWidth(context, 2); // Choose for a unfilled triangle
// CGContextStrokePath(context); // Choose for a unfilled triangle
}
#end
Use UIBezeierPaths
CGFloat radius = 20;
CGMutablePathRef path = CGPathCreateMutable();
CGPathMoveToPoint(path, NULL, (center.x + bottomLeft.x) / 2, (center.y + bottomLeft.y) / 2);
CGPathAddArcToPoint(path, NULL, bottomLeft.x, bottomLeft.y, bottomRight.x, bottomRight.y, radius);
CGPathAddArcToPoint(path, NULL, bottomRight.x, bottomRight.y, center.x, center.y, radius);
CGPathAddArcToPoint(path, NULL, center.x, center.y, bottomLeft.x, bottomLeft.y, radius);
CGPathCloseSubpath(path);
UIBezierPath *bezierPath = [UIBezierPath bezierPathWithCGPath:path];
CGPathRelease(path);
I expected to find the answer to this question easily, but, unfortunately, my search produced no results. How to draw such a circle in iOS?
I ended up using UIBezierPath. This is how i draw the given circle:
CGFloat DegreesToRadians(CGFloat degrees)
{
return degrees * M_PI / 180;
};
- (void)drawRect:(CGRect)rect
{
CGFloat radius = 70;
CGPoint center = CGPointMake(90 + radius, 170 + radius);
CGFloat start = DegreesToRadians(-90), end;
NSArray *angles = #[#"0", #"60", #"-90"];
NSArray *colors = #[[UIColor yellowColor], [UIColor blueColor], [UIColor redColor]];
int col_counter = 0;
for (NSString *angle in angles)
{
CGFloat value = [angle floatValue];
end = DegreesToRadians(value);
CGPoint next;
next.x = center.x + radius * cos(start);
next.y = center.y + radius * sin(start);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:center];
[path addLineToPoint:next];
[path addArcWithCenter:center radius:radius startAngle:start endAngle:end clockwise:YES];
[path addLineToPoint:center];
UIColor *color = colors[col_counter];
[color set];
[path fill];
col_counter++;
start = end;
}
}
Using Andrey's answer I was able to add a short piece of code after the loop to add a white circle in the middle to create what looks like a white circle with a thick, multi-coloured border.
end = DegreesToRadians(360);
start = DegreesToRadians(-90);
int width = 10; // thickness of the circumference
radius -= width;
CGPoint next;
next.x = center.x + radius * cos(start);
next.y = center.y + radius * sin(start);
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:center];
[path addLineToPoint:next];
[path addArcWithCenter:center radius:radius startAngle:start endAngle:end clockwise:YES];
[path addLineToPoint:center];
UIColor *color = [UIColor whiteColor];
[color set];
[path fill];