UIBezierPath doesn't work - ios

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!

Related

How to append arrow head to UIBezierPath

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

Drawing bezierPath

I was tinkering around with BezierPath and noticed something that I can't seem to figure out. This is the code-
UIBezierPath *path = [UIBezierPath new];
CGSize screenDimensions = CGSizeMake([UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
CGPoint firstPoint = CGPointMake(screenDimensions.width/2, screenDimensions.height/2);
CGPoint secondPoint = CGPointMake(screenDimensions.width/2 + 10, screenDimensions.height/2 + 10);
CGPoint thirdPoint = CGPointMake(screenDimensions.width/2 - 10, screenDimensions.height/2 + 10);
[path moveToPoint:firstPoint];
[path addLineToPoint:secondPoint];
[path addLineToPoint:thirdPoint];
[path addLineToPoint:firstPoint];
[path closePath];
CAShapeLayer *tempLayer = [CAShapeLayer new];
[tempLayer setPath:path.CGPath];
UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(screenDimensions.width/2 - 30, screenDimensions.height/2 - 30, 100, 100)];
// UIView *tempView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
[tempView setBackgroundColor:[UIColor blueColor]];
tempView.layer.mask = tempLayer;
[self.view addSubview:tempView];
If i run the above code block, nothing is drawn on the UIView that is added on the screen. But if i were to comment the current "tempView" and uncomment the currently commented allocation, it would draw on screen perfectly. Can anyone please point out what am I doing wrong here when setting the frame or is it something else?
UIBezierPath *path = [UIBezierPath bezierPath];
CGPoint point1 = CGPointMake(100, 100);
CGPoint point2 = CGPointMake(200, 200);
CGPoint point3 = CGPointMake(300, 300);
[path moveToPoint:point1];
[path addQuadCurveToPoint:point3 controlPoint:point2];
CAShapeLayer *shape = [CAShapeLayer layer];
shape.path = path.CGPath;
shape.lineWidth = 5;
shape.strokeColor = [UIColor blueColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
shape.frame = self.view.bounds;
[self.view.layer addSublayer:shape];
You can see below output :
It's a simple problem.
Let's say the screen dimensions are 320x480 (and old iPhone). This means that firstPoint will be 160, 240.
In the current code, your view's frame is 130, 210, 100, 100. It's width and height are both 100.
The shape layer will be drawn relative to the view's bounds, not its frame. So as far as the layer and bezier path are concerned, the view's bounds are 0, 0, 100, 100. Since firstPoint is outside those bounds, it doesn't appear. It's actually drawn but outside the visible bounds of the view.
When you switch the two lines that create the view, the view's frame becomes 0, 0, 320, 480. This means its bounds is also 0, 0, 320, 480. The view is much larger now and the layer and bezier path fit and can be seen.
The proper solution is to create the coordinates of the bezier path based on the size of the view it will be applied to, not the size of the screen. This way, the bezier path will fit inside its view no matter how big it is.
More like this:
CGSize screenDimensions = CGSizeMake([UIScreen mainScreen].bounds.size.width, [UIScreen mainScreen].bounds.size.height);
UIView *tempView = [[UIView alloc] initWithFrame:CGRectMake(screenDimensions.width/2 - 30, screenDimensions.height/2 - 30, 100, 100)];
// UIView *tempView = [[UIView alloc] initWithFrame:[UIScreen mainScreen].bounds];
UIBezierPath *path = [UIBezierPath new];
CGPoint firstPoint = CGPointMake(tempView.bounds.size.width/2, tempView.bounds.size.height/2);
CGPoint secondPoint = CGPointMake(tempView.bounds.size.width/2 + 10, tempView.bounds.size.height/2 + 10);
CGPoint thirdPoint = CGPointMake(tempView.bounds.size.width/2 - 10, tempView.bounds.size.height/2 + 10);
[path moveToPoint:firstPoint];
[path addLineToPoint:secondPoint];
[path addLineToPoint:thirdPoint];
[path addLineToPoint:firstPoint];
[path closePath];
CAShapeLayer *tempLayer = [CAShapeLayer new];
[tempLayer setPath:path.CGPath];
[tempView setBackgroundColor:[UIColor blueColor]];
tempView.layer.mask = tempLayer;
[self.view addSubview:tempView];

Custom button in Objective C

I want to design a custom button in Objective C and the button is like a tick mark given bellow . Is it possible to design without using images?
Use UIBezierPath & CAShapeLayer as follow..
UIBezierPath* mybezierpath = [[UIBezierPath alloc]init];
[mybezierpath moveToPoint:CGPointMake(40.0, 55.0)];
[mybezierpath addLineToPoint:CGPointMake(130.0,160.0)];
[mybezierpath addLineToPoint:CGPointMake(200.0, 60.0)];
CAShapeLayer *lines = [CAShapeLayer layer];
lines.path = mybezierpath.CGPath;
lines.bounds = CGPathGetBoundingBox(lines.path);
lines.strokeColor = [UIColor greenColor].CGColor;
lines.fillColor = [UIColor clearColor].CGColor; /*if you just want lines*/
lines.lineWidth = 3;
lines.position = CGPointMake(self.myButton.frame.size.width/2.0, self.myButton.frame.size.height/2.0);
lines.anchorPoint = CGPointMake(.5, .5);
[self.myButton.layer addSublayer:lines];
This will Give you result like this..
Adjust points of path According to the Button you have...
Hope this helps.
Apply CAShapeLayer to your UIButton's Layer
Here is an example for you:
UIButton *btn = [[UIButton alloc] initWithFrame:CGRectMake(100, 100, 100, 90)];
btn.backgroundColor = [UIColor purpleColor];
UIBezierPath *bPath = [UIBezierPath bezierPath];
[bPath moveToPoint:CGPointMake(25, 40)];
[bPath addLineToPoint:CGPointMake(35, 60)];
[bPath addLineToPoint:CGPointMake(75, 20)];
CAShapeLayer *sLayer = [CAShapeLayer layer];
sLayer.strokeColor = [UIColor greenColor].CGColor;
sLayer.lineWidth = 3.0f;
sLayer.path = bPath.CGPath;
sLayer.fillColor = [UIColor clearColor].CGColor;
[btn.layer addSublayer:sLayer];
[self.view addSubview:btn];
Output:
Hope this helps!

How to add a border to this delimited layer?

I have an image above which I delimitate a transparent rectangle using layer and mask.
I would like this transparent rectangle to be red bordered. But I could find a way to achieve this :
Here is what I have done :
My ViewController has a darkenedView property.
- (void)loadView {
UIView *const rootView = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 50, 50)];
rootView.backgroundColor = [UIColor whiteColor];
self.view = rootView;
[self addContentSubviews];
}
- (void)addContentSubviews {
UIImageView *const imageView = [[UIImageView alloc] initWithImage:[UIImage imageNamed:#"DSC_0823.jpg"]];
imageView.contentMode = UIViewContentModeScaleAspectFill;
imageView.frame = self.view.bounds;
imageView.autoresizingMask = UIViewAutoresizingFlexibleHeight | UIViewAutoresizingFlexibleWidth;
[self.view addSubview:imageView];
}
- (void)viewDidLoad {
[super viewDidLoad];
[self addDarkenedSubview];
}
- (void)viewDidLayoutSubviews {
CGRect const bounds = self.view.bounds;
darkenedView.center = CGPointMake(CGRectGetMidX(bounds), 0);
}
- (void)addDarkenedSubview {
darkenedView = [[UIView alloc] initWithFrame:CGRectMake(10, 30, 400, 1200)];
darkenedView.backgroundColor = [UIColor colorWithWhite:0.0 alpha:0.6];
darkenedView.autoresizingMask = 0;
[self.view addSubview:darkenedView];
[self addMaskToDarkenedView];
}
- (void)addMaskToDarkenedView {
CGRect bounds = darkenedView.bounds;
CAShapeLayer *maskLayer = [CAShapeLayer layer];
maskLayer.frame = bounds;
CGRect const myRect = CGRectMake(CGRectGetMidX(bounds) - 100,
CGRectGetMidY(bounds) + 100,
200, 200);
UIBezierPath *path = [UIBezierPath bezierPathWithRect:myRect];
[path appendPath:[UIBezierPath bezierPathWithRect:bounds]];
maskLayer.path = path.CGPath;
maskLayer.fillRule = kCAFillRuleEvenOdd;
darkenedView.layer.mask = maskLayer;
}
I've tried without success :
maskLayer.strokeColor = [UIColor redColor].CGColor;
maskLayer.lineWidth = 3.0f;
Instead of giving stroke to maskLayer object create CAShapeLayer and addSublayer to darkenedView view below is sample code Hope it help
CAShapeLayer *shape = [CAShapeLayer layer];
shape.frame = darkenedView.bounds;
shape.path = path.CGPath;
shape.lineWidth = 3.0f;
shape.strokeColor = [UIColor redColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
[darkenedView.layer addSublayer:shape];

How to render image of UIView containing UIBezierPath subviews

I have a UIView that contains some subviews - drawn using UIBezierPath. Every subview contains a scrollview having image as mask. When I try to render image of whole view (overall), instead of making image from path, it draws image of individual rect of subviews. Let me make it clear by figure:
Original View:
What I am getting after rendering Image:
I don't know what am I missing. Please guide me. Thanks.
Code:
IrregularSquare
#interface IrregularSquare : UIView
{
UIScrollView *imageResizer;
CAShapeLayer *maskLayer;
}
#end
#implementation IrregularSquare
- (id)initWithFrame:(CGRect)frame index:(NSInteger) index
{
self = [super initWithFrame:frame];
if (self) {
// Initialization code
self.backgroundColor = [UIColor clearColor];
self.layer.backgroundColor = [UIColor clearColor].CGColor;
}
return self;
}
-(void) drawRect:(CGRect)rect
{
UIBezierPath *aPath = [UIBezierPath bezierPath];
[aPath moveToPoint:CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect))];
[aPath addLineToPoint:CGPointMake(CGRectGetMaxX(rect), CGRectGetMinY(rect))];
[aPath addLineToPoint:CGPointMake(CGRectGetMaxX(rect) - 20, CGRectGetMidY(rect) - 10)];
[aPath addLineToPoint:CGPointMake(CGRectGetMaxX(rect) - 5, CGRectGetMaxY(rect) - 10)];
[aPath addLineToPoint:CGPointMake(CGRectGetMidX(rect) + 10, CGRectGetMaxY(rect))];
[aPath addLineToPoint:CGPointMake(CGRectGetMidX(rect) - 20, CGRectGetMaxY(rect) - 20)];
[aPath addLineToPoint:CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect) - 20)];
[aPath closePath];
aPath.lineWidth = 2;
[[UIColor whiteColor] setStroke];
[aPath stroke];
[self initializeImageWithPath]; //this method adds scrollview to main view and assigns an image to scrollview with mask
}
-(void) initializeImageWithPath
{
CGRect aFrame = somevalue;
self.backImage = [[UIImageView alloc] initWithFrame:aFrame];
self.backImage.contentMode = UIViewContentModeScaleAspectFill;
self.backImage.clipsToBounds = YES;
imageResizer = [[UIScrollView alloc] initWithFrame:self.bounds];
imageResizer.showsHorizontalScrollIndicator = imageResizer.showsVerticalScrollIndicator = NO;
imageResizer.scrollEnabled = YES;
imageResizer.backgroundColor = [UIColor clearColor];
imageResizer.zoomScale = 1.0;
imageResizer.delegate = self;
imageResizer.clipsToBounds = YES;
[imageResizer addSubview:self.backImage];
[self addSubview: imageResizer];
maskLayer = [CAShapeLayer layer];
maskLayer.path = [aPath CGPath];
self.layer.mask = maskLayer;
}
IrregularShapesContainer.m
#implementation IrregularShapesContainer
-(void) drawSubviews
{
for(UIView *aView in self.subviews)
[aView removeFromSuperview];
IrregularSquare *sq1 = [[IrregularSquare alloc] initWithFrame:CGRectMake(HORIPADDING, VERTICALPADDING, (self.frame.size.width - (HORIPADDING * 2) - (SPACING * 2)) * .5, (self.frame.size.height - (VERTICALPADDING) - SPACING) * .5) index:1];
[self addSubview:sq1];
[sq1.layer display];
[self randomlyPlaceImage:sq1];
sq1.irrViewDelegate = self;
//many similar instances are added in following code
}
#end
I hope my Question is clear.. Any help is appreciated.

Resources