How to get custom shape using UIBezierPath and make it as subview - ios

Question

I am drawing a rect using UIBezierPath. The following code creates the rect in my view controller:
#interface ViewController ()
{
TargetAreaView *targetView; //TargetAreaView is a subclass of UIView
UIView *detectionView;
}
#end
#implementation ViewController
- (void)viewDidLoad {
[super viewDidLoad];
CGRect frame = self.view.frame;
frame.size.height = frame.size.height - 200;
detectionView = [[UIView alloc]initWithFrame:frame];
targetView = [[TargetAreaView alloc]initWithFrame:detectionView.frame];
targetView.backgroundColor = [UIColor clearColor];
[self.view addSubview:targetView];
// Do any additional setup after loading the view, typically from a nib.
}
I am using the bezier path to draw the rect in TargetAreaView class.
I have used the following code in the UIView subclass:(TargetAreaView)
#interface TargetAreaView : UIView
{
NSMutableArray *points;
CGRect superViewFrame;
CGPoint selectedPoint;
}
-(id)initWithFrame:(CGRect)frame
{
self = [super initWithFrame:frame];
if (self)
{
superViewFrame = frame;
points = [[NSMutableArray alloc]init];
CGPoint startPoint = CGPointMake(superViewFrame.size.width / 2 - 200/2, superViewFrame.size.height / 2 - 200/2);
CGPoint heightPoint1 = CGPointMake(startPoint.x, startPoint.y + 200);
CGPoint widthPoint1 = CGPointMake(startPoint.x + 200, startPoint.y + 200);
CGPoint heightPoint2 = CGPointMake(startPoint.x + 200, startPoint.y);
CGPoint widthPoint2 = CGPointMake(startPoint.x, startPoint.y);
[points addObject:[NSValue valueWithCGPoint:startPoint]];
[points addObject:[NSValue valueWithCGPoint:heightPoint1]];
[points addObject:[NSValue valueWithCGPoint:widthPoint1]];
[points addObject:[NSValue valueWithCGPoint:heightPoint2]];
[points addObject:[NSValue valueWithCGPoint:widthPoint2]];
}
return self;
}
- (void)drawRect:(CGRect)rect
{
if (points && points.count > 0)
{
[self drawTargetArea:points];
[self setNeedsDisplay];
}
}
-(void)drawTargetArea:(NSMutableArray *)savedPoints
{
UIBezierPath *aPath = [UIBezierPath bezierPath];
// Set the starting point of the shape.
for (int idx = 0; idx < savedPoints.count; idx++)
{
if (idx == 0)
{
NSValue *startPoint = [savedPoints objectAtIndex:idx];
[aPath moveToPoint:startPoint.CGPointValue]; // Starting Point
}
else
{
NSValue *drawPoints = [savedPoints objectAtIndex:idx];
[aPath addLineToPoint:drawPoints.CGPointValue]; // Add lines from previous to current point
}
}
[aPath closePath]; // close the final path
aPath.lineWidth = 10.0f;
[[UIColor redColor] setStroke];
[aPath stroke];
}
The above UIView subclass code generates the rect as shown below:
I have written the logic to move the corners of rect to change its shape as shown below:
- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint startTouchPoint = [touch locationInView:self]; //get the user touch position and check it is nearer in 10px range to any of the position in rect
for (NSValue *aPoint in points)
{
CGPoint currentPoint = aPoint.CGPointValue;
CGFloat distance = [self touchPositionDifference:startTouchPoint WithCornerPosition:currentPoint]; // Calculate the distance between user touch position and rect points
if (distance < 10)
{
selectedPoint = currentPoint; // get the nearest point in a global variable
break;
}
}
}
-(CGFloat)touchPositionDifference:(CGPoint)touchPosition WithCornerPosition:(CGPoint)cornnerPosition
{
CGFloat dx= touchPosition.x - cornnerPosition.x;
CGFloat dy= touchPosition.y - cornnerPosition.y;
CGFloat distance= sqrt(dx*dx + dy*dy);
return distance; // calculate and return distance between two points
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
UITouch *touch = [touches anyObject];
CGPoint touchEndPoint = [touch locationInView:self];
for (int idx = 0; idx < points.count; idx++)
{
NSValue *aPoint = [points objectAtIndex:idx];
CGPoint currentPoint = aPoint.CGPointValue;
if (CGPointEqualToPoint(currentPoint, selectedPoint))
{
[points replaceObjectAtIndex:idx withObject:[NSValue valueWithCGPoint:touchEndPoint]]; // get the global point value and touch ended value and replace the new value with old value
}
}
[self setNeedsDisplay];// and draw the shape with new points
}
I can able to get the output like following
I have return code to get the bezier path as follows:
-(UIBezierPath *)getPath
{
if (points.count <= 0) return nil;
NSArray *oldPoints = points;
UIBezierPath *aPath = [UIBezierPath bezierPath];
// Set the starting point of the shape.
CGPoint p1 = [[oldPoints objectAtIndex:0] CGPointValue];
[aPath moveToPoint:CGPointMake(p1.x, p1.y)];
for (uint i=1; i<oldPoints.count; i++)
{
CGPoint p = [[oldPoints objectAtIndex:i] CGPointValue];
[aPath addLineToPoint:CGPointMake(p.x, p.y)];
}
[aPath closePath];
return aPath; //This returns me a bezier path of the already drawn shape
}
I am getting the entire view(within that view i am having the irregular shape View is represented in green color and the shape is represented in red border color) as shown below
I want to get that particular shape alone(the irregular shape) As shown below
How can I achieve this? Am I following the right path?

Answer 1

You can use the following code to draw the above mentioned shape.
- (void)drawCanvas1WithFrame: (CGRect)frame
{
//// Color Declarations
UIColor* color = [UIColor colorWithRed: 1 green: 0 blue: 0 alpha: 1];
//// Bezier Drawing
UIBezierPath* bezierPath = UIBezierPath.bezierPath;
[bezierPath moveToPoint: CGPointMake(CGRectGetMinX(frame) + 77.5, CGRectGetMinY(frame) + 39.5)];
[bezierPath addCurveToPoint: CGPointMake(CGRectGetMinX(frame) + 130.5, CGRectGetMinY(frame) + 14.5) controlPoint1: CGPointMake(CGRectGetMinX(frame) + 130.5, CGRectGetMinY(frame) + 14.5) controlPoint2: CGPointMake(CGRectGetMinX(frame) + 130.5, CGRectGetMinY(frame) + 14.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 122.5, CGRectGetMinY(frame) + 75.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 61.5, CGRectGetMinY(frame) + 110.5)];
[bezierPath addLineToPoint: CGPointMake(CGRectGetMinX(frame) + 77.5, CGRectGetMinY(frame) + 39.5)];
[UIColor.greenColor setFill];
[bezierPath fill];
[color setStroke];
bezierPath.lineWidth = 1;
[bezierPath stroke];
}