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.

enter image description here

might be this helpful: http://stackoverflow.com/questions/13528898/how-can-i-draw-an-arrow-using-core-graphics — Nitin Gohel, Jun 26 '14 at 06:17
@NitinGohel Thanks for link and I have implement that code and make a demo but its not helpful for me is any other idea? — Nikunj Jadav, Jun 26 '14 at 06:43
http://code4app.net/ios/Quartz2d-Demo/515a7e116803fa2f60000003 I guess you could use this.. — Eddwin Paz, Jul 28 '14 at 13:45
@Rayfleck do you have and idea how can I develop this feature? — Nikunj Jadav, Jul 30 '14 at 10:54

score 3 · Answer 1 · answered Aug 01 '14 at 13:50

3

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.

answered Aug 01 '14 at 13:50

Wyetro

8,439
9
46
64

Thanks for help but I require that when start drawing line with finger its show start point and leave the finger at that time show end point with "?" in center of the line and its also rotate from start or end point with finger touch and I think, you told me that first tap on view its created start point and on second tap its show end point with draw line between two point but I need above concept so please give me any idea or suggestion and also appreciate your help. – Nikunj Jadav Aug 07 '14 at 11:45
Just read up on the UIBezierPath reference documents. You are going to want to that. You could also try drawing with Core Graphics. – Wyetro Aug 07 '14 at 12:53
Thanks for reply and I already refer UIBezierPath Apple doc but if possible please send me link and that will be appreciate for me. – Nikunj Jadav Aug 07 '14 at 13:56
This should be enough: http://www.raywenderlich.com/32283/core-graphics-tutorial-lines-rectangles-and-gradients – Wyetro Aug 07 '14 at 13:57

score 2 · Answer 2 · edited May 23 '17 at 12:19

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:

Thanks for help but I require that when start drawing line with finger its show start point and leave the finger at that time show end point with "?" in center of the line and its also rotate from start or end point with finger touch and I think, you told me that first tap on view its created start point and on second tap its show end point with draw line between two point but I need above concept so please give me any idea or suggestion and also appreciate your help. — Nikunj Jadav, Aug 07 '14 at 11:44

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

2 Answers2

Linked