How to append arrow head to UIBezierPath - ios

I need help in adding arrow head to UIBezierPath.
I have created multiple lines by using UIBezierPath, which are in different directions.
Now, I want to create arrow head at the end point of the line.
I tried to add UIImage to UILable using NSAttributedString to UILable with NSTextAttachment.
But, here problem is arrow head is always down. And I want to align arrow along the line.
Here is my code:
UIBezierPath *ShotPath = [UIBezierPath bezierPath];
NSValue *PointValue = [[[PathArray objectAtIndex:i] valueForKey:#"ShotPath"] objectAtIndex:k];
CGPoint FirstPoint; = [PointValue CGPointValue];
[ShotPath moveToPoint:FirstPoint];
CAShapeLayer *line = [CAShapeLayer layer];
line.lineWidth = 4.0;
line.path=ShotPath.CGPath;
line.fillColor = [UIColor clearColor].CGColor;
line.strokeColor = [UIColor colorWithRed:231/255.0 green:83/255.0 blue:73/255.0 alpha:1].CGColor;
[[BaseView layer] addSublayer:line];
NSValue *PointValue = [[[PathArray objectAtIndex:i] valueForKey:#"ShotPath"] objectAtIndex:[[[PathArray objectAtIndex:i] valueForKey:#"ShotPath"] count]-1];
CGPoint OtherPoint = [PointValue CGPointValue];
UILabel *lbl = [[UILabel alloc]initWithFrame:CGRectMake(OtherPoint.x-6, OtherPoint.y-8, 12, 12)];
lbl.backgroundColor =[UIColor clearColor];
NSTextAttachment *attachment = [[NSTextAttachment alloc] init];
attachment.image = [UIImage imageNamed:#"DropDown_Icon"];
NSAttributedString *attachmentString = [NSAttributedString attributedStringWithAttachment:attachment];
lbl.attributedText = attachmentString;
[lbl setTextColor:[UIColor blackColor]];
lbl.font =[UIFont boldSystemFontOfSize:22.0];
[BaseView addSubview:lbl];
Here is my current output :

By the reference of this answer:
append arrowhead to UIBezierPath
Solved my query:
Answer:
- (void)viewDidLoad {
[super viewDidLoad];
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint point1 = CGPointMake(100, 100);
CGPoint point2 = CGPointMake(300, 300);
[path moveToPoint:point1];
[path addQuadCurveToPoint:point2 controlPoint:point1];
CAShapeLayer *shape = [CAShapeLayer layer];
shape.path = path.CGPath;
shape.lineWidth = 10;
shape.strokeColor = [UIColor blueColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
shape.frame = self.view.bounds;
[self.view.layer addSublayer:shape];
CGFloat angle = atan2f(point2.y - point1.y, point2.x - point1.x);
CGFloat distance = 15.0;
path = [UIBezierPath bezierPath];
[path moveToPoint:point2];
[path addLineToPoint:[self calculatePointFromPoint:point2 angle:angle + M_PI_2 distance:distance]]; // to the right
[path addLineToPoint:[self calculatePointFromPoint:point2 angle:angle distance:distance]]; // straight ahead
[path addLineToPoint:[self calculatePointFromPoint:point2 angle:angle - M_PI_2 distance:distance]]; // to the left
[path closePath];
shape = [CAShapeLayer layer];
shape.path = path.CGPath;
shape.lineWidth = 2;
shape.strokeColor = [UIColor redColor].CGColor;
shape.fillColor = [UIColor redColor].CGColor;
shape.frame = self.view.bounds;
[self.view.layer addSublayer:shape];
}
- (CGPoint)calculatePointFromPoint:(CGPoint)point angle:(CGFloat)angle distance:(CGFloat)distance {
return CGPointMake(point.x + cosf(angle) * distance, point.y + sinf(angle) * distance);
}

Related

How to set corner radius value with CAShaperLayer?

i drew a vertical line with UIBeizerPath and i need this line to have a corner radius with a value of 5. i tried to recall [pathLayer setCornerRadius: 5]; but I do not get results ... Can you help me? how can I assign a corner radius value? this is the code I use
// crea le barre del grafico e gli assegna l'altezza della label y corrispondente
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(xPaddingFromYAxis +spaceBetweenBar *j, 200)];
[path addLineToPoint:CGPointMake(xPaddingFromYAxis +spaceBetweenBar *j, yLabelValue.center.y )];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.bounds;
pathLayer.path = path.CGPath;
pathLayer.strokeColor = [UIColor darkGrayColor].CGColor;
pathLayer.fillColor = nil;
pathLayer.lineWidth = 50;
[pathLayer setCornerRadius:5];
pathLayer.masksToBounds = NO;
[scroll.layer addSublayer:pathLayer];
You need to set mask to bound as 'YES'. pathLayer.masksToBounds = YES;
Try this and see:
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(xPaddingFromYAxis +spaceBetweenBar *j, 200)];
[path addLineToPoint:CGPointMake(xPaddingFromYAxis +spaceBetweenBar *j, yLabelValue.center.y )];
CAShapeLayer *pathLayer = [CAShapeLayer layer];
pathLayer.frame = self.bounds;
pathLayer.path = path.CGPath;
pathLayer.strokeColor = [UIColor darkGrayColor].CGColor;
pathLayer.fillColor = nil;
pathLayer.lineWidth = 50;
[pathLayer setCornerRadius:5];
pathLayer.masksToBounds = YES;
[scroll.layer addSublayer:pathLayer];

CAShapeLayer Random Fill Color

So I have a pie chart/color wheel that I made using CAShapeLayer and UIBezierPath. The wheel can have a max of 8 sections. I need it so each section is a different color. I've tried setting up an array (colorsArray) with different colors and inserting into the CAShapeLayer's fillColor method but it just takes the last color in the colorsArray. Is there a way to make sure a different color is in each layer section that is created? I'm a little lost right now. Here is my code below. Thanks in advance.
-(void) drawWheel {
CGPoint circleCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
//1 Create a view that we’ll put everything else inside.
container = [[UIView alloc] initWithFrame:self.frame];
container.backgroundColor = [UIColor whiteColor];
container.layer.cornerRadius = 100.0;
container.layer.borderColor = [UIColor blackColor].CGColor;
container.layer.borderWidth = 1.0;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int i = 0; i < numberOfSections; i++) {
CAShapeLayer *slice = [CAShapeLayer layer];
*************************************************
UIColor * color = [UIColor blueColor];
//THIS MAKES THE WHOLE THING One Color - the last color in the colorsArray
for (int i = 0; i < self.colorsArray.count; i++) {
color = [self.colorsArray objectAtIndex:i];
slice.fillColor = (__bridge CGColorRef)(color);
}
*************************************************
slice.strokeColor = [UIColor whiteColor].CGColor;
slice.lineWidth = 3.0;
CGPoint center = CGPointMake(100.0, 100.0);
CGFloat radius = 100.0;
CGFloat startAngle = angleSize * i;
UIBezierPath *piePath = [UIBezierPath bezierPath];
[piePath moveToPoint:center];
[piePath addLineToPoint:circleCenter];
[piePath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:startAngle + angleSize clockwise:YES];
[piePath closePath]; // this will automatically add a straight line to the center
slice.path = piePath.CGPath;
int i = 0;
i++;
[container.layer addSublayer:slice];
}
//7 Adds the container to the main control.
container.userInteractionEnabled = NO;
[self addSubview:container];
//8 Initialize sectors
sectors = [NSMutableArray arrayWithCapacity:numberOfSections];
if (numberOfSections % 2 == 0) {
[self buildSectorsEven];
} else {
[self buildSectorsOdd];
}
}
I figured it out. I took loop that goes through my colorArray. I assigned a variable of "UIColor *color" to the object at the index (i) that matches the number of sections in my for loop "color = [self.colorsArray objectAtIndex:i];" I then assigned the variable color to the slice's fillColor.
Snippet:
for (int i = 0; i < numberOfSections; i++) {
CAShapeLayer *slice = [CAShapeLayer layer];
UIColor *color;
color = [self.colorsArray objectAtIndex:i];
slice.fillColor = [UIColor colorWithCGColor:(__bridge CGColorRef _Nonnull)(color)].CGColor;
Full Code:
-(void) drawWheel {
CGPoint circleCenter = CGPointMake(self.bounds.size.width / 2, self.bounds.size.height / 2);
//1 Create a view that we’ll put everything else inside.
container = [[UIView alloc] initWithFrame:self.frame];
container.backgroundColor = [UIColor whiteColor];
container.layer.cornerRadius = 100.0;
container.layer.borderColor = [UIColor blackColor].CGColor;
container.layer.borderWidth = 1.0;
CGFloat angleSize = 2*M_PI/numberOfSections;
for (int i = 0; i < numberOfSections; i++) {
CAShapeLayer *slice = [CAShapeLayer layer];
UIColor *color;
color = [self.colorsArray objectAtIndex:i];
slice.strokeColor = [UIColor whiteColor].CGColor;
slice.lineWidth = 3.0;
slice.fillColor = [UIColor colorWithCGColor:(__bridge CGColorRef _Nonnull)(color)].CGColor;
CGPoint center = CGPointMake(100.0, 100.0);
CGFloat radius = 100.0;
CGFloat startAngle = angleSize * i;
UIBezierPath *piePath = [UIBezierPath bezierPath];
[piePath moveToPoint:center];
[piePath addLineToPoint:circleCenter];
[piePath addArcWithCenter:center radius:radius startAngle:startAngle endAngle:startAngle + angleSize clockwise:YES];
[piePath closePath]; // this will automatically add a straight line to the center
slice.path = piePath.CGPath;
[container.layer addSublayer:slice];
}
//7 Adds the container to the main control.
container.userInteractionEnabled = NO;
[self addSubview:container];
//8 Initialize sectors
sectors = [NSMutableArray arrayWithCapacity:numberOfSections];
if (numberOfSections % 2 == 0) {
[self buildSectorsEven];
} else {
[self buildSectorsOdd];
}
}

View with UIBezierPath and shadow?

I have a view in a UITableViewCell which has 3 rounded corners and a shadow. I am using UIBezierPath for rounded corners but i can't drop the shadow.
This is lines of code used:
CGRect bounds2 = cell.backgroundMessageView.bounds;
UIBezierPath *maskPath2 = [UIBezierPath bezierPathWithRoundedRect:bounds2
byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomRight
cornerRadii:CGSizeMake(5, 5)];
CAShapeLayer *maskLayer2 = [CAShapeLayer layer];
maskLayer2.frame = bounds2;
maskLayer2.path = maskPath2.CGPath;
cell.backgroundMessageView.layer.mask = maskLayer2;
//drop shadow
[cell.backgroundMessageView.layer setShadowColor:[UIColor blackColor].CGColor];
[cell.backgroundMessageView.layer setShadowOpacity:1];
[cell.backgroundMessageView.layer setShadowRadius:3.0];
[cell.backgroundMessageView.layer setShadowOffset:CGSizeMake(2, 2)];
And this need to be the result:
Any ideas?
Thank you!
SOLUTION!
cell.backgroundMessageView.layer.cornerRadius=5;
CGRect bounds2 = cell.backgroundMessageView.bounds;
UIBezierPath *maskPath2 = [UIBezierPath bezierPathWithRoundedRect:bounds2
byRoundingCorners:UIRectCornerTopLeft|UIRectCornerTopRight|UIRectCornerBottomRight
cornerRadii:CGSizeMake(5, 5)];
CAShapeLayer *maskLayer2 = [CAShapeLayer layer];
maskLayer2.frame = bounds2;
maskLayer2.path = maskPath2.CGPath;
maskLayer2.shadowRadius = 2;
maskLayer2.shadowOpacity = 0.1;
maskLayer2.shadowColor =[UIColor blackColor].CGColor;
maskLayer2.fillColor = [UIColor colorWithRed:252/256.0 green:252/256.0 blue:252/256.0 alpha:1].CGColor;
maskLayer2.shadowOffset = CGSizeMake(0, 1);
[cell.backgroundMessageView.layer insertSublayer:maskLayer2 atIndex:0];

Draw Triangle iOS

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);

UIBezierPath doesn't work

Before the thought of posting this question came into my mind I had already spent a few hours on this small snippet of code... So I wrote two different pieces of code in two different classes, and both were used to cut out a specific shape. But for some reason only one of them worked!?!? I have ABSOLUTELY no idea why this happened, for they have the exact same structure.
Below is the snippet that WORKS.
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor = [UIColor blackColor];
UIBezierPath *arrowPath = [UIBezierPath bezierPath];
CGPoint start = CGPointMake(self.frame.size.width - 2, self.frame.size.height / 2);
[arrowPath moveToPoint:start];
[arrowPath addLineToPoint:CGPointMake(7, 7)];
[arrowPath addLineToPoint:CGPointMake(2, 7)];
[arrowPath addLineToPoint:CGPointMake(self.frame.size.width - 7, self.frame.size.height/2)];
[arrowPath addLineToPoint:CGPointMake( 2, self.frame.size.height - 7)];
[arrowPath addLineToPoint:CGPointMake(7, self.frame.size.height - 7)];
[arrowPath addLineToPoint:start];
[arrowPath closePath];
UIView *arrow = [[UIView alloc]initWithFrame:self.frame];
arrow.backgroundColor = [UIColor whiteColor];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.frame = self.frame;
mask.backgroundColor = (__bridge CGColorRef)([UIColor clearColor]);
mask.path = arrowPath.CGPath;
arrow.layer.mask = mask;
[self addSubview:arrow];
}
return self;
}
And here is the piece of code that only works PARTIALLY.
- (id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
UIView *roundedRectView = [[UIView alloc]initWithFrame:CGRectMake(0, 0, self.frame.size.width, self.frame.size.height - 20)];
roundedRectView.backgroundColor = [UIColor clearColor];
[self addSubview:roundedRectView];
UIBezierPath *roundedRectPath = [UIBezierPath bezierPathWithRoundedRect:roundedRectView.frame cornerRadius:10];
UIView *rectangle = [[UIView alloc]initWithFrame:roundedRectView.frame];
rectangle.backgroundColor = [UIColor blackColor];
CAShapeLayer *mask = [CAShapeLayer layer];
mask.frame = rectangle.frame;
mask.path = roundedRectPath.CGPath;
mask.backgroundColor = (__bridge CGColorRef)([UIColor clearColor]);
rectangle.layer.mask = mask;
rectangle.alpha = 0.8;
[roundedRectView addSubview:rectangle];
UIView *rectangleTwo = [[UIView alloc]initWithFrame:CGRectMake(0, self.frame.size.height - 20, self.frame.size.width, 20)];
rectangleTwo.backgroundColor = [UIColor redColor];
UIBezierPath *trianglePath = [UIBezierPath bezierPath];
CGPoint start = CGPointMake(rectangleTwo.frame.size.width / 2 - 15, 0);
[trianglePath moveToPoint:start];
[trianglePath addLineToPoint:CGPointMake(start.x + 20, start.y)];
[trianglePath addLineToPoint:CGPointMake(start.x + 10, start.y + 20)];
[trianglePath addLineToPoint:start];
[trianglePath closePath];
CAShapeLayer *triangleMask = [CAShapeLayer layer];
triangleMask.frame = rectangleTwo.frame;
triangleMask.path = trianglePath.CGPath;
rectangleTwo.layer.mask = triangleMask;
[self addSubview:rectangleTwo];
}
return self;
}
Allocating this speech bubble using CGRectMake(0,0,80,60), only the rounded rectangle showed up on the screen, but the triangle was no where to be seen.
Can anyone point out what's wrong with this code? Any help is appreciated, thanks!!
Problem solved!
Turned out that my triangleMask.frame wasn't defined properly. Instead of triangleMask.path = rectangleTwo.frame I should've used triangleMask.frame = CGRectMake(0, 0, rectangleTwo.frame.size.width, rectangleTwo.frame.size.height); instead! CAShapeLayer's origin is relative to that of the shape on which you want to place it!

Resources