iOS - How To Draw Point On A Line In Which The User Touches When Dragging

Question

I have a rectangular view which contains vertical thin lines in which I drew programatically.

This is the code I used to draw the lines:

- (void)drawLines
{
    CGFloat spacing = _bgView.frame.size.width / 11.0f;

    for(int i = 1; i < 11; i++)
    {
        UIView *line = [[UIView alloc] initWithFrame:CGRectMake((CGFloat)(i * spacing), 0, 1, _bgView.frame.size.height)];
        line.backgroundColor = [UIColor whiteColor];
        line.tag = i;

        [_bgView addSubview:line];
    }
}

The lines are separated by equally distributed spaces calculated from the width of the rectangular view( _bgView ).

Here's an overview of what it looks like:

When the user performs a drag in the rectangular view, and when his/her finger passes through or touches a line, a dot will be drawn on that specific point.

Here's the code that detects the point of touch of the user on the line, and draws a dot on that point.

- (IBAction)drawDots:(id)sender
{
    UIPanGestureRecognizer *pan = (UIPanGestureRecognizer *)sender;

    CGPoint pannedPoint = [pan locationInView:_bgView];

    for (UIView *subview in _bgView.subviews)
    {
        if (CGRectContainsPoint(subview.frame, pannedPoint) && subview.tag > 0)
        {
            NSLog(@"Point x:%.2f y:%.2f TAG:%i", pannedPoint.x, pannedPoint.y, subview.tag);

            UIView *point = [[UIView alloc] initWithFrame:CGRectMake(pannedPoint.x - 2.5, pannedPoint.y - 2.5, 5, 5)];
                point.backgroundColor = [UIColor redColor];

            [_bgView addSubview:point];
        }
    }
}

Now, if the user pans really fast, this will be the result:

As can be seen, only some points are drawn, that's why there are a lot of missing dots on the other lines.

This should be expected result:

But, this happens only when the user pans super slow.

How can I draw the points in the lines intercepted by the touch of the user even if his finger moved really fast?

Thanks!

Answer 1

Instead of pan gestures you should use UIResponder methods to detect user touches:

- touchesBegan:withEvent:
- touchesMoved:withEvent:
- touchesEnded:withEvent:
- touchesCancelled:withEvent:

The second method - touchesMoved:withEvent: calls when user keeps moving its finger through the screen, so you can get its finger location:

UITouch *touch = [[event allTouches] anyObject];
CGPoint touchLocation = [touch locationInView:touch.view];    

Then just add your detection logic.

Check the docs for more details: https://developer.apple.com/library/ios/documentation/UIKit/Reference/UIResponder_Class/

Answer 2

please refer this code

for your requirement

  - (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event {

//    NSLog(@"DEBUG: Touches moved" );

[super touchesMoved:touches withEvent:event];

if ([[event allTouches] count] > 1) {

} else {

    UITouch *touch = [[event allTouches] anyObject];
    UIView *view = touch.view;


    NSLog(@"DEBUG: Touches Moved");

   CGPoint location = [touch locationInView:self.bgView];
    for (UIView *subview in _bgView.subviews)
    {
        if (CGRectContainsPoint(subview.frame, location) && subview.tag > 0) {

            NSLog(@"Point x:%.2f y:%.2f TAG:%i", location.x, location.y, subview.tag);

            UIView *point = [[UIView alloc] initWithFrame:CGRectMake(location.x - 2.5, location.y - 2.5, 5, 5)];
            point.backgroundColor = [UIColor redColor];

            [_bgView addSubview:point];

        }


    }





    }
}

Will help you