Restricting pan gesture to move to 90 degree

问题

If I have created a line for ex. shown in the figure as connecting A and B through CAShapeLayer and in that line's centre I have a UIView which has pan gesture integrated in it.

How to make that UIView to move to a certain direction that creates 90 degrees to that line as shown in the figure the red line indicated the direction that the UIView can be moved?

The mid-point should start moving from the centre of the line, in the direction that shown in the figure that I have updated.

回答1:

I assume you can handle the pan, and you are able to get the touch point. What you want is to calculate the projection of the touch point to the red line and place the UIView there.

The red line is perpendicular to AB and consist the midpoint of AB.

//
//when the pan gesture recognizer reports state change event

/*you have 
    CGPoint A;
    CGPoint B;
    CGPoint T; //touch point
*/

//midpoint
CGPoint M = {(A.x+B.x)/2, (A.y+B.y)/2}; 

//AB distance
CGFloat distAB = sqrtf(powf(B.x-A.x, 2) + powf(B.y-A.y, 2));

//direction of the red line with unit length
CGVector v = {(B.y-A.y)/distAB, -(B.x-A.x)/distAB};

// vector from midpoint to touch point
CGVector MT = {T.x-M.x, T.y-M.y};

// dot product of v and MT
// which is the signed distance of the projected point from M
CGFloat c = v.dx*MT.dx + v.dy*MT.dy;

// projected point is M + c*v
CGPoint projectedPoint = {M.x + c*v.dx, M.y + c*v.dy};

//TODO: set the center of the moving UIView to projectedPoint

UPDATE:

Your comment reveals, that the utilization of this soulution is not clear enough for you. Therefore I have embedded this idea into a working example.

@interface ViewController ()

@end

@implementation ViewController {
    CGPoint A;
    CGPoint B;
    CGPoint M; //midpoint of AB
    CGVector v; //direction of the red line with unit length

    UIView* pointMover;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    A = CGPointMake(50,50);
    B = CGPointMake(300,200);

    M = CGPointMake((A.x+B.x)/2, (A.y+B.y)/2);
    CGFloat distAB = sqrtf(powf(B.x-A.x, 2) + powf(B.y-A.y, 2));
    v = CGVectorMake((B.y-A.y)/distAB, -(B.x-A.x)/distAB);

    pointMover = [[UIView alloc] initWithFrame:CGRectMake(0, 0, 44, 44)];
    pointMover.center = M;
    pointMover.backgroundColor = [UIColor blueColor];
    pointMover.layer.cornerRadius = 22.0f;
    [self.view addSubview:pointMover];

    UIPanGestureRecognizer* panRecognizer = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(handlePan:)];
    [pointMover addGestureRecognizer:panRecognizer];

    UIBezierPath* blackLinePath = [UIBezierPath bezierPath];
    [blackLinePath moveToPoint:A];
    [blackLinePath addLineToPoint:B];
    CAShapeLayer *blackLineLayer = [CAShapeLayer layer];
    blackLineLayer.path = [blackLinePath CGPath];
    blackLineLayer.strokeColor = [[UIColor blackColor] CGColor];
    blackLineLayer.lineWidth = 2.0;
    [self.view.layer addSublayer:blackLineLayer];


}

- (void)handlePan:(UIPanGestureRecognizer*)recognizer {

    //touch point
    CGPoint T = [recognizer locationInView:self.view];

    // vector from midpoint to touch point
    CGVector MT = {T.x-M.x, T.y-M.y};

    // dot product of v and MT
    CGFloat c = v.dx*MT.dx + v.dy*MT.dy;

    // projected point is M + c*v
    CGPoint projectedPoint = {M.x + c*v.dx, M.y + c*v.dy};

    pointMover.center = projectedPoint;
}


@end

来源：https://stackoverflow.com/questions/37324822/restricting-pan-gesture-to-move-to-90-degree

标签

ios

objective-c

line

uibezierpath

cashapelayer