iOS draw line with both arrow with start-end point while finger touch end and rotate from start or end point

Question

I need help making a drawing demo.

When the user draws a line using their finger, the line has directional arrows on both ends. When their finger releases, it draws the line with "?" (question-mark) in center of the line.

Then, when user taps on the "?", it will show a new view and the user can enter a value, and the value is in that line.

And we can add multiple lines on capture-image and also we can delete selected line.

I don't understand how can I start developing these features so please give me an idea or any link, or suggestion to start develop this feature.

Answer 1

You should use a UITapGestureRecognizer and a UIBezierPath . Have it so that person taps at one point and then taps at a second point, then make a UIBezierPath between the two points. To get the question mark in the middle you could make it so that the line goes from the first point to (half the distance between point 1 and point 2 - 20pt). And then do the same with the other half of the line (so that you now have a space in the middle of the line.

Answer 2

You can take advantage of the Core Graphics Framework to draw shapes in iOS. This allows you to draw lines, circles, arrows, rectangles etc. Here is some example code to draw a line between 2 points (taken from: How do I draw a line on the iPhone? ):

CGContextRef c = UIGraphicsGetCurrentContext();

CGFloat red[4] = {1.0f, 0.0f, 0.0f, 1.0f};
CGContextSetStrokeColor(c, red);
CGContextBeginPath(c);
CGContextMoveToPoint(c, 5.0f, 5.0f);
CGContextAddLineToPoint(c, 50.0f, 50.0f);
CGContextStrokePath(c);

First define a subclass of UIView to create a space to draw in. Then use a UITapGestureRecognizer to detect taps. As @WyattMufson suggested in his answer , I would get the user to tap once to get the start point of the line and then tap again to get the end point. This is done to ensure that only straight lines can be drawn.

Once you have the start point and end point you can calculate the mid point and connect the two points with a '?' character in between. Then save these line coordinates (start, mid and end points) in some sort of data structure to keep track of all the lines that have been drawn.

When the user taps on a specific line, you can use the saved line coordinates information to detect whether the tap occurred on a line or not (you will have to perform some calculations to do this). If so, display a popover that accepts user input. Once the user inputs a value, close the popover and replace the '?' with the new value.

For line deletion, you could use the UILongPressGestureRecognizer . The user would tap and hold on a drawn line, which would bring up a popover to confirm whether the user wants to proceed with deletion or not. If they do, access the saved line coordinates to detect whether the hold occurred on a line or not. If so, erase that line.

Here are some references to get you started:

• How make a simple drawing app with UIKit
• How do I draw a line on the iPhone?
• Check is a point (x,y) is between two points drawn on a straight line
• How to get UITouch location from UIGestureRecognizer