CODEWITHSUNDEEP
objective-ciosxcode
Craig
Craig

Reputation: 1085

Making a constant line between a dot and your finger

I want to do a similar thing to what the app Scalar did, where they made a capability to drag from a point onto the notepad to paste the number to the location they draged the dot too. What I'm really interested in is the line that stays connected to the dot and your finger as shown here:

enter image description here

My problem is that I don't really know what this is called, so I am having trouble searching for how I would do this. Does anyone know what this would be called, have any tutorials they have came across on this subject? And even better if you have some code for me to look at would be awesome.

Thanks.

Upvotes: 2

Views: 371

Answers (3)

Ivan Andriollo
Ivan Andriollo

Reputation: 378

This example of a UIView that draws lines when a finger is dragged on it and detects the first view to be touched should help you start.

//this goes in the header file called "UILineView.h"

#import <UIKit/UIKit.h>

@interface UILineView : UIView

@end

//this in the implementation file called "UILineView.m"

#import "UILineView.h"

@implementation UILineView

{
    CGPoint _originOfTouchPoint; // your fist touch detected in touchesBegan: method
    CGPoint _currentFingerPositionPoint; // the position you have dragged your finger to
    CGFloat _strokeWidth; // the width of the line you wish to draw
    id _touchStartedObject; // the object(UIView) that the first touch was detected on
}

// If you use Interface Builder to design your interface, Objects in a nib file are reconstituted and then initialized using
// their initWithCoder: method
- (id)initWithCoder:(NSCoder *)decoder
{
    self = [super initWithCoder:decoder];
    if (self) {
        // Initialization code
        _originOfTouchPoint = CGPointMake( 0.0, 0.0 );
        _currentFingerPositionPoint = CGPointMake( 100.0, 100.0 );
        _strokeWidth = 2.0;
    }
    return self;
}
/*
// Use initWithFrame if you are not loding the UIView from a nib file
- (id)initWithFrame:(CGRect)frame
{
    self = [super initWithFrame:frame];
    if (self) {
        // Initialization code
        _originOfTouchPoint = CGPointMake( 0.0, 0.0 );
        _currentFingerPositionPoint = CGPointMake( 100.0, 100.0 );
        _strokeWidth = 2.0;
    }
    return self;
}
*/

// Only override drawRect: if you perform custom drawing.
// An empty implementation adversely affects performance during animation.
- (void)drawRect:(CGRect)rect
{
    CGContextRef context    = UIGraphicsGetCurrentContext();
    CGContextSetStrokeColorWithColor( context, [UIColor blueColor].CGColor );
    CGContextSetLineWidth( context, _strokeWidth );
    // fisrt point of line
    CGContextMoveToPoint( context, _originOfTouchPoint.x, _originOfTouchPoint.y );
    // last point of line
    CGContextAddLineToPoint( context, _currentFingerPositionPoint.x, _currentFingerPositionPoint.y );
    // draw the line
    CGContextStrokePath( context );
}

#pragma mark touches

- (void)touchesBegan:(NSSet *)touches withEvent:(UIEvent *)event
{
    // get starting point and first view touched (if you need to send that view messages)
    _originOfTouchPoint = [[touches anyObject] locationInView:self];
    _touchStartedObject = [[touches anyObject] view];
}
- (void)touchesMoved:(NSSet *)touches withEvent:(UIEvent *)event
{
    CGPoint movedToPoint = [[touches anyObject] locationInView:self];
    // if moved to a new point redraw the line 
    if ( CGPointEqualToPoint( movedToPoint, _currentFingerPositionPoint ) == NO )
    {
        _currentFingerPositionPoint = movedToPoint;
        // calls drawRect: method to show updated line
        [self setNeedsDisplay];
    }
}
- (void)touchesEnded:(NSSet *)touches withEvent:(UIEvent *)event
{
    // reset values
    _originOfTouchPoint = CGPointZero;
    _currentFingerPositionPoint = CGPointZero;
    _touchStartedObject = nil;
}

@end

Upvotes: 1

AppyMike
AppyMike

Reputation: 2064

It will involving subclassing UIView and implemeting the touchesBegan and touchesMoved method and drawing a line in your view subclass drawRect method from the initial touch to your current touch.

heres a previous question that will help How do I draw a line on the iPhone?

you will just need to change the following so that the coordinates are those of your initial touch and current touch that you obtain from the touches methods

CGContextMoveToPoint(c, 5.0f, 5.0f);
CGContextAddLineToPoint(c, 50.0f, 50.0f);

then calling [self setNeedsDisplay]; in the touchesMoved method will redraw the line to follow your finger as you move.

Then implement touchesEnded for code when the finger is lifted off.

Hoope it helps!

Upvotes: 1

Peter DeWeese
Peter DeWeese

Reputation: 18333

A UIGestureRecognizer can do this without confusing the touch and drag logic with a view. I have used them for editing shapes on maps, long press dragging, etc. See this tutorial.

Upvotes: 0

Related Questions