How to Create Bezier path with different different colour? - ios

I have made sample demo for creating random path using UIBezier object.
I know I asked same type of question which was already asked, But I was not able to solve so.
Code
#implementation RandomShape
#synthesize randomPath,size,color;
- (void)drawRect:(CGRect)rect {
self.size = 1.0;
[self.color setStroke];
[self.randomPath stroke];
}
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
self.randomPath = [UIBezierPath bezierPath];
[self.randomPath stroke];
}
return self;
}
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *touch = [touches anyObject];
[self.randomPath moveToPoint:[touch locationInView:self]];
[self.randomPath setLineWidth:size];
[self setNeedsDisplay];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {
UITouch *mytouch=[touches anyObject];
[self.randomPath addLineToPoint:[mytouch locationInView:self]];
[self setNeedsDisplay];
}
-(void)clearRandomShape
{
self.randomPath = nil; //Set current path nil
self.randomPath = [UIBezierPath bezierPath]; //Create new path
[self.randomPath setLineWidth:2.0];
[self setNeedsDisplay];
}
1) I have select the colour from the picker view.
Now My problem is,
-->When I select colour from the picker it change all previous line colour as it is.
(It displays last colour which I choose in all random path.)
--->My requirement is I wand different different colour's random Path.
Please help Me I am confuse.
Thank you.

Write this code wherever you want to create path..
//path 1
UIBezierPath *linePath = [[UIBezierPath alloc] init];
[linePath moveToPoint:CGPointMake(100, 100)];
[linePath addLineToPoint:CGPointMake(275, 100)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.strokeColor = [UIColor redColor].CGColor;
shapeLayer.fillColor = [UIColor clearColor].CGColor;
shapeLayer.lineWidth = 2;
shapeLayer.lineJoin = kCALineJoinRound;
shapeLayer.lineCap = kCALineCapRound;
shapeLayer.path = linePath.CGPath;
[self.view.layer addSublayer:shapeLayer];
//Path 2
UIBezierPath *verticalLinePath = [[UIBezierPath alloc] init];
[verticalLinePath moveToPoint:CGPointMake(100, 200)];
[verticalLinePath addLineToPoint:CGPointMake(275, 200)];
CAShapeLayer *horizontalLayer = [CAShapeLayer layer];
horizontalLayer.strokeColor = [UIColor greenColor].CGColor;
horizontalLayer.fillColor = [UIColor clearColor].CGColor;
horizontalLayer.lineWidth = 2;
horizontalLayer.lineJoin = kCALineJoinRound;
horizontalLayer.lineCap = kCALineCapRound;
horizontalLayer.path = verticalLinePath.CGPath;
[self.view.layer addSublayer:horizontalLayer];
//Path
UIBezierPath *path3 = [[UIBezierPath alloc] init];
[path3 moveToPoint:CGPointMake(100, 300)];
[path3 addLineToPoint:CGPointMake(275, 300)];
CAShapeLayer *horizontalLayer3 = [CAShapeLayer layer];
horizontalLayer3.strokeColor = [UIColor blueColor].CGColor;
horizontalLayer3.fillColor = [UIColor cyanColor].CGColor;
horizontalLayer3.lineWidth = 2;
horizontalLayer3.lineJoin = kCALineJoinRound;
horizontalLayer3.lineCap = kCALineCapRound;
horizontalLayer3.path = path3.CGPath;
[self.view.layer addSublayer:horizontalLayer3];
Output of this code is ->

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

How to Disable click event out side the button ?

I am creating one custom button class inherit from the UIControl.
I am creating Button with Kite Shape as shown in image using Bizer Path.
Code
.h
import
#interface CustomButton : UIControl
-(instancetype)initWithFrame:(CGRect)frame;
#end
.m
#import "CustomButton.h"
#implementation CustomButton
-(instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
UIBezierPath *path = [UIBezierPath new];
// [path moveToPoint:(CGPoint){0, 0}];
[path moveToPoint:(CGPoint){100,50}];
[path addLineToPoint:(CGPoint){100, 100}];
[path addLineToPoint:(CGPoint){150, 100}];
[path addLineToPoint:(CGPoint){200, 0}];
[path addLineToPoint:(CGPoint){100, 50}];
// Create a CAShapeLayer with this triangular path
// Same size as the original imageView
CAShapeLayer *mask = [CAShapeLayer new];
mask.frame = self.bounds;
mask.path = path.CGPath;
// Mask the imageView's layer with this shape
self.layer.mask = mask;
}
return self;
}
#end
VC .m
CustomButton *button = [[CustomButton alloc]initWithFrame:CGRectMake(20, 20, 200, 200)];
button.backgroundColor = [UIColor redColor];
[button addTarget:self action:#selector(buttonPressed:) forControlEvents:UIControlEventTouchUpInside] ;
[self.view addSubview:button];
}
- (void)buttonPressed:(id)sender
{
NSLog(#"pressing");
}
Image
My Question Is,
When I clicked outside the button(Red Portion) It gives me a click event.
I do not want to do this.
Please help me,How can i solve it?
Thank You
I am updating my answer for UIBUtton
CustomButton.h
#import <UIKit/UIKit.h>
#interface CustomButton : UIControl
-(instancetype)initWithFrame:(CGRect)frame;
#end
CustomButton.m
#import "CustomButton.h"
#implementation CustomButton
-(instancetype)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if(self)
{
UIBezierPath *path = [UIBezierPath new];
[path moveToPoint:(CGPoint){100,50}];
[path addLineToPoint:(CGPoint){100, 100}];
[path addLineToPoint:(CGPoint){150, 100}];
[path addLineToPoint:(CGPoint){200, 0}];
[path addLineToPoint:(CGPoint){100, 50}];
CAShapeLayer *mask = [CAShapeLayer new];
mask.frame = self.bounds;
mask.path = path.CGPath;
// Mask the imageView's layer with this shape
self.layer.mask = mask;
}
return self;
}
In your controller viewDidLoad
CustomButton *buttonCustom = [[CustomButton alloc] initWithFrame:CGRectMake(20, 20, 200, 200)];
[buttonCustom setBackgroundColor:[UIColor redColor]];
[buttonCustom addTarget:self action:#selector(buttonCustom:forEvent:) forControlEvents:UIControlEventTouchUpInside];
[buttonCustom setTag:1000];
[self.view addSubview:buttonCustom];
Add these methods in your Controller
-(void)buttonCustom:(UIButton *)sender forEvent:(UIEvent*)event{
UITouch *touch = [[event touchesForView:sender] anyObject];
CGPoint location = [touch locationInView:self.view];
UIColor *color = [self colorOfPoint:location];
if([color isEqual:[UIColor redColor]]){
NSLog(#"red ");
}else{
NSLog(#"White Color");
}
}
- (UIColor *) colorOfPoint:(CGPoint)point
{
unsigned char pixel[4] = {0};
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(pixel, 1, 1, 8, 4, colorSpace, kCGBitmapAlphaInfoMask & kCGImageAlphaPremultipliedLast);
CGContextTranslateCTM(context, -point.x, -point.y);
[self.view.layer renderInContext:context];
CGContextRelease(context);
CGColorSpaceRelease(colorSpace);
UIColor *color = [UIColor colorWithRed:pixel[0]/255.0 green:pixel[1]/255.0 blue:pixel[2]/255.0 alpha:pixel[3]/255.0];
return color;
}
If you have multiple UIButton then use the tag property to distinguish your button.

How to find out uncoloured area uibeizerpath?

That greycolour is UIImageView and the White colour font is Image.
That image Placed inside UIImageView.
I like to colour only inside the font ,not an whole UIImageview for that i am going to find out the coordinates of the image .
i am new to this kind of concept so kindly some one guide me how to colour only inside the image ,there are 50+ images is there ,it is not static so give some good idea .
This is the code i am using to draw inside the UIImageView:
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches] anyObject];
touchPoint = [touch locationInView:self.imgColor];
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(touchPoint.x,touchPoint.y)];
[path addLineToPoint:CGPointMake(startingPoint.x,startingPoint.y)];
startingPoint=touchPoint;
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor redColor] CGColor];
[self.imgColor.layer addSublayer:shapeLayer];
[arrLayer addObject:shapeLayer];
NSLog(#"Touch moving point =x : %f Touch moving point =y : %f", touchPoint.x, touchPoint.y);
}
Use this custom UIImage view:
CustomView.h
#interface CustomView : UIImageView
#end
CustomView.m
#interface CustomView ()
{
CGPoint touchPoint,startingPoint;
UIView *drawingView;
}
#end
#implementation CustomView
-(void)awakeFromNib
{
drawingView = [[UIView alloc] initWithFrame:self.bounds];
drawingView.backgroundColor = [UIColor clearColor];
[self addSubview:drawingView];
[self updateMask];
}
- (void)updateMask
{
CALayer *maskLayer = [CALayer layer];
maskLayer.geometryFlipped = YES;
maskLayer.contents = (id)self.image.CGImage;
switch (self.contentMode)
{
case UIViewContentModeScaleToFill:
maskLayer.contentsGravity = kCAGravityResize;
break;
case UIViewContentModeScaleAspectFit:
maskLayer.contentsGravity = kCAGravityResizeAspect;
break;
case UIViewContentModeScaleAspectFill:
maskLayer.contentsGravity = kCAGravityResizeAspectFill;
break;
case UIViewContentModeCenter:
maskLayer.contentsGravity = kCAGravityCenter;
break;
case UIViewContentModeTop:
maskLayer.contentsGravity = kCAGravityTop;
break;
case UIViewContentModeBottom:
maskLayer.contentsGravity = kCAGravityBottom;
break;
case UIViewContentModeLeft:
maskLayer.contentsGravity = kCAGravityLeft;
break;
case UIViewContentModeRight:
maskLayer.contentsGravity = kCAGravityRight;
break;
case UIViewContentModeTopLeft:
maskLayer.contentsGravity = kCAGravityTopLeft;
break;
case UIViewContentModeTopRight:
maskLayer.contentsGravity = kCAGravityTopRight;
break;
case UIViewContentModeBottomLeft:
maskLayer.contentsGravity = kCAGravityBottomLeft;
break;
case UIViewContentModeBottomRight:
maskLayer.contentsGravity = kCAGravityBottomRight;
break;
default:
break;
}
maskLayer.frame = drawingView.bounds;
drawingView.layer.mask = maskLayer;
}
- (void)setImage:(UIImage *)image
{
[super setImage:image];
[self updateMask];
}
- (void)layoutSubviews
{
[super layoutSubviews];
drawingView.frame = self.bounds;
drawingView.layer.mask.frame = drawingView.bounds;
}
-(void)touchesMoved:(NSSet<UITouch *> *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [[event allTouches] anyObject];
touchPoint = [touch locationInView:self];
if (!CGPointEqualToPoint(startingPoint, CGPointZero))
{
UIBezierPath *path = [UIBezierPath bezierPath];
[path moveToPoint:CGPointMake(touchPoint.x,touchPoint.y)];
[path addLineToPoint:CGPointMake(startingPoint.x,startingPoint.y)];
CAShapeLayer *shapeLayer = [CAShapeLayer layer];
shapeLayer.path = [path CGPath];
shapeLayer.strokeColor = [[UIColor blueColor] CGColor];
shapeLayer.lineWidth = 3.0;
shapeLayer.fillColor = [[UIColor redColor] CGColor];
[drawingView.layer addSublayer:shapeLayer];
}
startingPoint=touchPoint;
// [arrLayer addObject:shapeLayer];
NSLog(#"Touch moving point =x : %f Touch moving point =y : %f", touchPoint.x, touchPoint.y);
}
- (void)touchesEnded:(NSSet<UITouch *> *)touches withEvent:(nullable UIEvent *)event;
{
startingPoint = CGPointZero;
}
#end

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!

How to make selected area of a superview transparent

Is there any way we can make only the selected area of a superview transparent? I have a UIView with black (alpha 0.5) background color. I am putting some hollow circles on the UIView and want the underneath UIView to be transparent so that I could see through it. Any idea
- (id)initWithFrame:(CGRect)iFrame andHollowFrames:(NSArray *)iHollowFrames withRadius:(NSNumber *)iRadius {
if ((self = [super initWithFrame:iFrame]) != nil) {
self.hollowFrames = [[NSSet setWithArray:iHollowFrames] allObjects];
self.hollowCircleRadius = iRadius;
[self addShadowView];
}
return self;
}
- (void)addShadowView {
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(0, 0, self.bounds.size.width, self.bounds.size.height) cornerRadius:0];
for (NSValue *point in self.hollowFrames) {
UIBezierPath *circlePath = [UIBezierPath bezierPathWithRoundedRect:CGRectMake(point.CGPointValue.x - self.hollowCircleRadius.floatValue, point.CGPointValue.y - self.hollowCircleRadius.floatValue, 2.0 * self.hollowCircleRadius.floatValue, 2.0 * self.hollowCircleRadius.floatValue) cornerRadius:self.hollowCircleRadius.floatValue];
[path appendPath:circlePath];
}
[path setUsesEvenOddFillRule:YES];
CAShapeLayer *fillLayer = [CAShapeLayer layer];
fillLayer.path = path.CGPath;
fillLayer.fillRule = kCAFillRuleEvenOdd;
fillLayer.fillColor = [UIColor blackColor].CGColor;
fillLayer.opacity = 0.5;
[self.layer addSublayer:fillLayer];
}
Here is a UIView subclass solution. In order for this to work you must leave the superviews backgroundColor property as nil witch is the default value. If this UIView-subclass is in the storyboard then make sure you set the background color to "Clear color" in the attributes inspector.
- (void)drawRect:(CGRect)rect
{
CGContextRef ctx = UIGraphicsGetCurrentContext();
UIColor *blackBackgroundColor = [UIColor colorWithRed:0 green:0 blue:0 alpha:0.5];
CGContextSetFillColorWithColor(ctx, blackBackgroundColor.CGColor);
CGContextFillRect(ctx, rect);
CGRect transparentPart = CGRectMake(10, 10, 120, 80);
CGContextClearRect(ctx, transparentPart);
}

Resources