I am using CoreGraphics to draw a rounded rectangle, I am familiar with the CG API ready made to draw the rounded rectangle, but I do not want to use it because the rectangle is not a fully-uniform rounded rectangle, part of it would be a rounded rectangle, the other parts would be a set of connected paths, for example, the top-left and top-right would be a rounded rectangle edges, however, the bottom edges are a group of connected Bezier paths.
My question is, if I want to draw the entire shape as Bezier path, how should I calculate the control points in addCurveToPoint for the corners? I know the radius and the coordinates of the points (based on radius too).
(UPDATE)
I have a sample code, I am trying to understand the math behind it:
UIBezierPath * rectangle = [UIBezierPath bezierPath];
[rectangle moveToPoint:CGPointMake(0, 8)];
[rectangle addCurveToPoint:CGPointMake(8.01, 0) controlPoint1:CGPointMake(0, 3.58) controlPoint2:CGPointMake(3.59, 0)];
[rectangle addLineToPoint:CGPointMake(208, 0)];
[rectangle addCurveToPoint:CGPointMake(224, 16.01) controlPoint1:CGPointMake(216.84, 0) controlPoint2:CGPointMake(224, 7.16)];
[rectangle addLineToPoint:CGPointMake(224, 175)];
[rectangle addCurveToPoint:CGPointMake(192, 207) controlPoint1:CGPointMake(224, 192.67) controlPoint2:CGPointMake(209.67, 207)];
[rectangle addLineToPoint:CGPointMake(64, 207)];
[rectangle addCurveToPoint:CGPointMake(0, 142.99) controlPoint1:CGPointMake(28.65, 207) controlPoint2:CGPointMake(0, 178.35)];
[rectangle addLineToPoint:CGPointMake(0, 8)];
[rectangle closePath];
The corners radius are 8, 16, 32 and 64 for top-left, top-right, bottom-right and bottom-left
Thanks
I assume you want to add a 90 degree arc for the rounded corner. Use addArc instead of addCurveToPoint.
In Swift 3:
var path = UIBezierPath()
...
let center = CGPoint(x: topLeft.x + width - radius, y: topLeft.y)
path.addArc(withCenter: center, radius: radius, startAngle: CGFloat.pi, endAngle: CGFloat.pi * CGFloat(1.5), clockwise: true)
Of course, your parameters will vary.
Update
Based on your code, it should look like this:
UIBezierPath * rectangle = [UIBezierPath bezierPath];
[rectangle moveToPoint:CGPointMake(0, 8)];
[rectangle addArcWithCenter:CGPointMake(8, 8) radius:8 startAngle:M_PI endAngle:M_PI*1.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(208, 0)];
[rectangle addArcWithCenter:CGPointMake(208, 16) radius:16 startAngle:M_PI*1.5 endAngle:0 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(224, 175)];
[rectangle addArcWithCenter:CGPointMake(208, 175) radius:32 startAngle:0 endAngle:M_PI*0.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(64, 207)];
[rectangle addArcWithCenter:CGPointMake(64, 175) radius:64 startAngle:M_PI*0.5 endAngle:M_PI clockwise:YES];
[rectangle closePath];
Based on #Codo answer, this is the final solution:
UIBezierPath * rectangle = [UIBezierPath bezierPath];
[rectangle moveToPoint:CGPointMake(0, 8)];
[rectangle addArcWithCenter:CGPointMake(8, 8) radius:8 startAngle:M_PI endAngle:M_PI*1.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(208, 0)];
[rectangle addArcWithCenter:CGPointMake(208, 16) radius:16 startAngle:M_PI*1.5 endAngle:0 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(224, 175)];
[rectangle addArcWithCenter:CGPointMake(192, 175) radius:32 startAngle:0 endAngle:M_PI*0.5 clockwise:YES];
[rectangle addLineToPoint:CGPointMake(64, 207)];
[rectangle addArcWithCenter:CGPointMake(64, 143) radius:64 startAngle:M_PI*0.5 endAngle:M_PI clockwise:YES];
[rectangle addLineToPoint:CGPointMake(0, 8)];
[rectangle closePath];
Related
Is it possible to draw a path around the visible part of a UIBezierPath?
Here's an example of my problem
Here's what I'd like to accomplish
Here's what I got so far:
- (void)drawRect:(CGRect)rect {
CGFloat side = MIN(rect.size.width, rect.size.height);
CGPoint center = CGPointMake(rect.size.width / 2.0f, rect.size.height / 2.0f);
UIColor *yinYangColor = [UIColor whiteColor];
UIBezierPath *yinYangPath = [UIBezierPath bezierPath];
// Draw Yin&Yang part
[yinYangPath addArcWithCenter:CGPointMake(center.x, center.y - side / 4.0f) radius:side / 4.0f startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:YES];
[yinYangPath addArcWithCenter:CGPointMake(center.x, center.y + side / 4.0f) radius:side / 4.0f startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
[yinYangPath addArcWithCenter:CGPointMake(center.x, center.y) radius:side / 2.0f startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
[yinYangPath closePath];
[yinYangColor setFill];
[yinYangPath fill];
// Add border
CAShapeLayer *borderLayer = [[CAShapeLayer alloc] init];
borderLayer.path = yinYangPath.CGPath;
borderLayer.fillColor = [UIColor clearColor].CGColor;
borderLayer.strokeColor = [UIColor blackColor].CGColor;
borderLayer.lineWidth = 5.0f;
[self.layer addSublayer:borderLayer];
}
The angle π/2 radians is along the positive y axis.
In standard UIKit geometry, the positive y axis points down toward the bottom of the screen. Therefore the top arc (at center.y - side/4) needs to start at angle -π/2 and end at angle π/2. Since you got these backward, your second arc doesn't start where your first arc ended, so your path contains a straight line connecting those points. Ditto for your second and third arcs. The single straight line visible in your image is actually the combination of those two lines.
Also, incidentally, the rect passed to drawRect: is in theory not necessarily the bounds of the view. It's better not to treat it as such.
Also also, you shouldn't add sublayers in drawRect:. You should do that in init or layoutSubviews and you should make sure you don't duplicate layers. I guess maybe you're using a CAShapeLayer because you don't want the border cut off. I would solve that by insetting the view bounds by the border width:
- (void)drawRect:(CGRect)dirtyRect {
CGFloat lineWidth = 4;
CGRect rect = CGRectInset(self.bounds, lineWidth / 2, lineWidth / 2);
CGFloat side = MIN(rect.size.width, rect.size.height);
CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat smallRadius = side / 4;
[path addArcWithCenter:CGPointMake(center.x, center.y - smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:NO];
[path addArcWithCenter:CGPointMake(center.x, center.y + smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
[path addArcWithCenter:center radius:side / 2 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
[path closePath];
[path setLineJoinStyle:kCGLineJoinRound];
[path setLineWidth:lineWidth];
[[UIColor whiteColor] setFill];
[path fill];
[[UIColor blackColor] setStroke];
[path stroke];
}
Result:
If you want the bottom tip to be more pointy, I would do that by clipping all drawing to the path, then drawing the border twice as thick. Half the border will be drawn outside the path and clipped away, leaving a sharp point. In this case, you don't have to inset the bounds.
- (void)drawRect:(CGRect)dirtyRect {
CGFloat lineWidth = 4 * 2;
CGRect rect = self.bounds;
CGFloat side = MIN(rect.size.width, rect.size.height);
CGPoint center = CGPointMake(CGRectGetMidX(rect), CGRectGetMidY(rect));
UIBezierPath *path = [UIBezierPath bezierPath];
CGFloat smallRadius = side / 4;
[path addArcWithCenter:CGPointMake(center.x, center.y - smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:NO];
[path addArcWithCenter:CGPointMake(center.x, center.y + smallRadius) radius:smallRadius startAngle:-M_PI_2 endAngle:M_PI_2 clockwise:YES];
[path addArcWithCenter:center radius:side / 2 startAngle:M_PI_2 endAngle:-M_PI_2 clockwise:NO];
[path closePath];
[path setLineJoinStyle:kCGLineJoinRound];
[path addClip];
[path setLineWidth:lineWidth];
[[UIColor whiteColor] setFill];
[path fill];
[[UIColor blackColor] setStroke];
[path stroke];
}
Result:
I am trying to create a resizable version of the following image (40x28, the small triangle at the bottom should be centered horizontally):
UIEdgeInsets imageInsets = UIEdgeInsetsMake(4.0f, 4.0f, 8.0f, 4.0f);
UIImage *pinImage = [[UIImage imageNamed:#"map_pin"] resizableImageWithCapInsets:imageInsets];
As per the documentation, this simple approach won't work since my triangle falls into resizable area (fixed height but scalable width):
This will cause the same problem as described in this very similar SO post - duplicated (tiled) triangles. But unfortunately their solution doesn't work for my particular case since excluding the triangle from scalable area causes its misplacement and it won't be centered horizontally due to obvious reasons.
So I wonder... is it possible to achieve my goal using the [UIImage resizableImageWithCapInsets:] method at all? Or may be I should try something else like drawing everything in the code instead?
Basically, I would like to implement something like Info Windows from Google Maps SDK:
You can achieve that by using UIBezierPath.The following code in swift but you should be able to achieve the same thing in Objective-C
Instead of starting the code with a straight line :
path.moveToPoint(CGPoint(x: 300, y: 0))
I instead start with an arc (upper right):
path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2) , clockwise: true) //1st rounded corner
and by doing this, I have four rounded corners and I just need to add a straight line at the end of the code right before:
path.closePath()
Here is the code and a screenshot:
let path = UIBezierPath()
path.addArcWithCenter(CGPoint(x: 300-10, y: 50), radius: 10 , startAngle: 0 , endAngle: CGFloat(M_PI/2) , clockwise: true) //1st rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 50), radius:10, startAngle: CGFloat(2 * M_PI / 3), endAngle:CGFloat(M_PI) , clockwise: true)// 2rd rounded corner
path.addArcWithCenter(CGPoint(x: 200, y: 10), radius:10, startAngle: CGFloat(M_PI), endAngle:CGFloat(3 * M_PI / 2), clockwise: true)// 3rd rounded corner
// little triangle
path.addLineToPoint(CGPoint(x:240 , y:0))
path.addLineToPoint(CGPoint(x: 245, y: -10))
path.addLineToPoint(CGPoint(x:250, y: 0))
path.addArcWithCenter(CGPoint(x: 290, y: 10), radius: 10, startAngle: CGFloat(3 * M_PI / 2), endAngle: CGFloat(2 * M_PI ), clockwise: true)
path.addLineToPoint(CGPoint(x:300 , y:50))
path.closePath()
I decided to go with UIBezierPath as Assam Al-Zookery suggested. Here is the complete code in Objective-C (should be reusable and flexible enough):
#implementation TestView
- (instancetype)initWithFrame:(CGRect)frame {
self = [super initWithFrame:frame];
if (self) {
self.clipsToBounds = YES;
self.opaque = NO;
}
return self;
}
- (void)drawRect:(CGRect)rect {
UIBezierPath *path = [UIBezierPath bezierPath];
path.lineWidth = 2.0f;
path.lineJoinStyle = kCGLineJoinRound;
[[UIColor blackColor] setStroke];
[[UIColor redColor] setFill];
CGFloat arcRadius = 5.0f;
CGFloat padding = 5.0f;
CGFloat triangleSide = 20.0f;
CGFloat triangleHeight = ((triangleSide * sqrtf(3.0f)) / 2);
CGFloat rectHeight = CGRectGetHeight(rect) - triangleHeight - padding - (arcRadius * 2);
// Top left corner
[path addArcWithCenter:CGPointMake(arcRadius + padding, arcRadius + padding)
radius:arcRadius
startAngle:DEGREES_TO_RADIANS(180)
endAngle:DEGREES_TO_RADIANS(270)
clockwise:YES];
// Top edge
[path addLineToPoint:CGPointMake(CGRectGetWidth(rect) - arcRadius - padding, path.currentPoint.y)];
// Top right corner
[path addArcWithCenter:CGPointMake(path.currentPoint.x, path.currentPoint.y + arcRadius)
radius:arcRadius
startAngle:DEGREES_TO_RADIANS(270)
endAngle:DEGREES_TO_RADIANS(0)
clockwise:YES];
// Right edge
[path addLineToPoint:CGPointMake(CGRectGetWidth(rect) - padding, rectHeight + padding)];
// Bottom right corner
[path addArcWithCenter:CGPointMake(path.currentPoint.x - arcRadius, path.currentPoint.y)
radius:arcRadius
startAngle:DEGREES_TO_RADIANS(0)
endAngle:DEGREES_TO_RADIANS(90)
clockwise:YES];
// Bottom edge (right part)
[path addLineToPoint:CGPointMake((CGRectGetWidth(rect) / 2) + (triangleSide / 2), path.currentPoint.y)];
// Triangle
[path addLineToPoint:CGPointMake(path.currentPoint.x - (triangleSide / 2), path.currentPoint.y + triangleHeight)];
[path addLineToPoint:CGPointMake(path.currentPoint.x - (triangleSide / 2), path.currentPoint.y - triangleHeight)];
// Bottom edge (left part)
[path addLineToPoint:CGPointMake(padding + arcRadius, path.currentPoint.y)];
// Bottom left corner
[path addArcWithCenter:CGPointMake(path.currentPoint.x, path.currentPoint.y - arcRadius)
radius:arcRadius
startAngle:DEGREES_TO_RADIANS(90)
endAngle:DEGREES_TO_RADIANS(180)
clockwise:YES];
[path closePath];
[path stroke];
[path fill];
}
#end
I'm trying to draw a somewhat similar image to this, using Core Graphics:
I was able to draw the main arc, but I am not able to understand, how to divide arc into parts/draw graduation on arc? My current code to draw the arc is:
[path addArcWithCenter:point radius:radius startAngle:DEGREES_TO_RADIANS(specific_start_angle) endAngle:DEGREES_TO_RADIANS(specific_end_angle) clockwise:NO];
I tried using strokeWithBlendMode but I am facing problem with position of graduations or ticks.
Teja's solution will work fine for you, but it does require that you calculate your own start and end points for the graduations.
I suggest you create a function that let's you draw the graduations at a given angle of the arc, that will calculate the start and end points of the graduations, given a length.
static inline void drawGraduation(CGPoint center, CGFloat radius, CGFloat angle, CGFloat length, CGFloat width, CGColorRef color) {
CGContextRef c = UIGraphicsGetCurrentContext();
CGFloat radius2 = radius+length; // The radius of the end points of the graduations
CGPoint p1 = (CGPoint){cos(angle)*radius+center.x, sin(angle)*radius+center.y}; // the start point of the graduation
CGPoint p2 = (CGPoint){cos(angle)*radius2+center.x, sin(angle)*radius2+center.y}; // the end point of the graduation
CGContextMoveToPoint(c, p1.x, p1.y);
CGContextAddLineToPoint(c, p2.x, p2.y);
CGContextSetStrokeColorWithColor(c, color);
CGContextSetLineWidth(c, width);
CGContextStrokePath(c);
}
You can then call this in a for loop (or however you want to do it) when you draw your arc for the main scale of your VU meter. You can also easily customise the color, width and length of given graduations at given intervals (for example, this code gives a thicker & longer red line every 5 graduations).
- (void)drawRect:(CGRect)rect {
CGRect r = self.bounds;
CGFloat startAngle = -M_PI*0.2; // start angle of the main arc
CGFloat endAngle = -M_PI*0.8; // end angle of the main arc
NSUInteger numberOfGraduations = 16;
CGPoint center = (CGPoint){r.size.width*0.5, r.size.height*0.5}; // center of arc
CGFloat radius = (r.size.width*0.5)-20; // radius of arc
CGFloat maxGraduationWidth = 1.5; // the maximum graduation width
CGFloat maxGraduationWidthAngle = maxGraduationWidth/radius; // the maximum graduation width angle (used to prevent the graduations from being stroked outside of the main arc)
// draw graduations
CGFloat deltaArc = (endAngle-startAngle+maxGraduationWidthAngle)/(numberOfGraduations-1); // the change in angle of the arc
CGFloat startArc = startAngle-(maxGraduationWidthAngle*0.5); // the starting angle of the arc
for (int i = 0; i < numberOfGraduations; i++) {
if (i % 5 == 0) {
drawGraduation(center, radius, startArc+(i*deltaArc), 14, 1.5, [UIColor redColor].CGColor); // red graduation every 5 graduations.
} else {
drawGraduation(center, radius, startArc+(i*deltaArc), 10, 1, [UIColor blackColor].CGColor);
}
}
// draw main arc
UIBezierPath* mainArc = [UIBezierPath bezierPathWithArcCenter:center radius:radius startAngle:startAngle endAngle:endAngle clockwise:NO];
[[UIColor blackColor] setStroke];
mainArc.lineWidth = 2;
[mainArc stroke];
}
Output
Full project: https://github.com/hamishknight/VU-Meter-Arc
You can draw bezier path with dashes ,something like this::
//// Bezier Drawing
UIBezierPath* bezierPath = [UIBezierPath bezierPath];
[bezierPath moveToPoint: CGPointMake(54.5, 62.5)];
[bezierPath addCurveToPoint: CGPointMake(121.5, 39.5) controlPoint1: CGPointMake(54.5, 62.5) controlPoint2: CGPointMake(87.5, 39.5)];
[bezierPath addCurveToPoint: CGPointMake(190.5, 62.5) controlPoint1: CGPointMake(155.5, 39.5) controlPoint2: CGPointMake(190.5, 62.5)];
[UIColor.blackColor setStroke];
bezierPath.lineWidth = 10;
CGFloat bezierPattern[] = {24, 2};
[bezierPath setLineDash: bezierPattern count: 2 phase: 0];
[bezierPath stroke];
Else You can draw multiple bezier path and draw it similar to what you want:
Something like this:
For the small line:
UIBezierPath* bezier2Path = [UIBezierPath bezierPath];
[bezier2Path moveToPoint: CGPointMake(65, 45)];
[bezier2Path addLineToPoint: CGPointMake(75, 63)];
[UIColor.blackColor setStroke];
bezier2Path.lineWidth = 1.5;
[bezier2Path stroke];
In my app im currently using the following image, however, going forward I would like to create it programatically using a UIView so I can have more control over it.
I have tried the following but could not achieve the desired result: https://stackoverflow.com/a/4444039/2654425
Also is it more optimal (performance wise not time wise) to use .pngs like I am doing or programmatically create said views?
I did a similar thing with chat-style bubbles in UITableViewCells.
Here's the code I used to achieve the effect. You could easily adapt UIBezierPath to your needs:
- (void)drawBubbleForRect:(CGRect)rect {
CGRect bubbleRect = // Get your rect somehow, or just use rect
// The size of the "blip" in the side of the chat bubble (which points up for this bubble)
CGFloat blipWidth = 11.0f;
CGFloat blipHeight = 7.0f;
CGFloat blipLeft = CGRectGetMinX(bubbleRect) + blipWidth;
CGFloat blipMiddle = blipLeft + (blipWidth / 2.0f);
CGFloat blipRight = blipLeft + blipWidth;
CGFloat blipBottom = CGRectGetMinY(bubbleRect);
CGFloat blipTop = blipBottom - blipHeight;
CGFloat cornerRadius = 3.0f;
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint: CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius, blipBottom)];
[path addLineToPoint: CGPointMake(blipLeft, blipBottom)];
[path addLineToPoint: CGPointMake(blipMiddle, blipTop)];
[path addLineToPoint: CGPointMake(blipRight, blipBottom)];
[path addLineToPoint: CGPointMake(CGRectGetMaxX(bubbleRect) - cornerRadius, blipBottom)];
[path addArcWithCenter: CGPointMake(CGRectGetMaxX(bubbleRect) - cornerRadius, blipBottom + cornerRadius) radius:cornerRadius startAngle:(3 * M_PI / 2) endAngle:0 clockwise:YES];
[path addLineToPoint: CGPointMake(CGRectGetMaxX(bubbleRect), CGRectGetMaxY(bubbleRect) - cornerRadius)];
[path addArcWithCenter: CGPointMake(CGRectGetMaxX(bubbleRect) - cornerRadius, CGRectGetMaxY(bubbleRect) - cornerRadius) radius:cornerRadius startAngle:0 endAngle:(M_PI / 2) clockwise:YES];
[path addLineToPoint: CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius, CGRectGetMaxY(bubbleRect))];
[path addArcWithCenter: CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius, CGRectGetMaxY(bubbleRect) - cornerRadius) radius:cornerRadius startAngle:(M_PI / 2) endAngle:M_PI clockwise:YES];
[path addLineToPoint: CGPointMake(CGRectGetMinX(bubbleRect), CGRectGetMinY(bubbleRect) + cornerRadius)];
[path addArcWithCenter: CGPointMake(CGRectGetMinX(bubbleRect) + cornerRadius, CGRectGetMinY(bubbleRect) + cornerRadius) radius:cornerRadius startAngle:M_PI endAngle:(3 * M_PI / 2) clockwise:YES];
[someColor setFill];
[path fill];
}
I've been using the following code to create views with rounded corners:
- (void)setMaskTo:(UIView*)view byRoundingCorners:(UIRectCorner)corners
{
UIBezierPath* rounded = [UIBezierPath bezierPathWithRoundedRect:view.bounds
byRoundingCorners:corners
cornerRadii:CGSizeMake(_cornerRadius, _cornerRadius)];
CAShapeLayer* shape = [[CAShapeLayer alloc] init];
[shape setPath:rounded.CGPath];
view.layer.mask = shape;
}
So I've been calling it with something like:
[self setMaskTo:someView byRoundingCorners:UIRectCornerAllCorners];
Or:
[self setMaskTo:someOtherView byRoundingCorners:UIRectCornerBottomRight];
I now want to create some views corresponding to one of the bits on the outside of a single rounded corner...
A good approach (think I) is to create the appropriate path so that I can create a CAShapeLayer and then use that as the mask for the view (similar to above).
I'm not sure what the best approach is, which methods etc., when using the UIBezierPath class (or CGPath).
Any suggestions?
Using UIViews and a mask layer, to get the shapes that I wanted, I just needed to play around creating paths with an arc...
I'm aware that the methods for working with a CGPath can be used, but I've worked with what is available with UIBezierPath.
I've used the following methods to create the paths that I need:
- (UIBezierPath*)oppositeArcOfPathForBottomRightCorner
{
float width = _cornerRadius;
UIBezierPath* path = [UIBezierPath new];
[path moveToPoint:CGPointMake(0, width)];
[path addLineToPoint:CGPointMake(width, width)];
[path addLineToPoint:CGPointMake(width, 0)];
[path addArcWithCenter:CGPointMake(0, 0) radius:width startAngle:0 endAngle:(M_PI / 2.0f) clockwise:YES];
[path closePath];
return path;
}
- (UIBezierPath*)oppositeArcOfPathForTopLeftCorner
{
float width = _cornerRadius;
UIBezierPath* path = [UIBezierPath new];
[path moveToPoint:CGPointMake(0, width)];
[path addArcWithCenter:CGPointMake(width, width) radius:width startAngle:M_PI endAngle:(M_PI * 1.5f) clockwise:YES];
[path addLineToPoint:CGPointMake(0, 0)];
[path closePath];
return path;
}
And then something like this to use as a mask with a UIView:
- (void)setMaskTo:(UIView*)view fromPath:(UIBezierPath*)path
{
CAShapeLayer* shape = [[CAShapeLayer alloc] init];
[shape setPath:path.CGPath];
view.layer.mask = shape;
}