iOS 拖动固定到中心的形状

Question

从这篇文章开始下一步 Drag UIView around Shape Comprised of CGMutablePaths ，我试图添加一条线，该线的一端固定在 pathLayer_ 的中心，另一端与路径上的圆形对象(handleView_ 中的 circleLayer)一起被拖动(图 8)。

该行有自己的图层和 View 以及在 (void)initHandleView 中启动的路径。

首先:我无法让线穿过 pathLayer_ 的中心:

- (void)viewDidLoad {
[super viewDidLoad];
[self initPathLayer];
[self initHandleView];
[self initHandlePanGestureRecognizer];
}


- (void)initPathLayer {
pathLayer_ = [CAShapeLayer layer];
pathLayer_.lineWidth = 1;
pathLayer_.fillColor = nil;
pathLayer_.strokeColor = [UIColor lightGrayColor].CGColor;
pathLayer_.lineCap = kCALineCapButt;
pathLayer_.lineJoin = kCALineJoinRound;
pathLayer_.frame = self.view.bounds;
pathLayerCenter_ = CGPointMake(CGRectGetMidX(pathLayer_.frame), CGRectGetMidY(pathLayer_.frame));
[self.view.layer addSublayer:pathLayer_];
}


- (void)initHandleView {
handlePathPointIndex_ = 0;
CGRect rect = CGRectMake(0, 0, 30, 30);
CAShapeLayer *circleLayer = [CAShapeLayer layer];
circleLayer.fillColor = [UIColor redColor].CGColor;
circleLayer.strokeColor = [UIColor redColor].CGColor;
circleLayer.lineWidth = 2;
UIBezierPath *circlePath = [UIBezierPath bezierPathWithOvalInRect:CGRectInset(rect, circleLayer.lineWidth, circleLayer.lineWidth)];
circleLayer.frame = rect;
circleLayer.path = circlePath.CGPath;
handleView_ = [[UIView alloc] initWithFrame:rect];

CGRect lineRect = CGRectMake(0,0,CGRectGetMaxX([[UIScreen mainScreen] bounds]), CGRectGetMaxY([[UIScreen mainScreen] bounds]));
CGPoint center = CGPointMake(CGRectGetMidX(pathLayer_.frame), CGRectGetMidY(pathLayer_.frame));
lineView_ = [[UIView alloc] initWithFrame:lineRect];
CAShapeLayer *lineLayer = [CAShapeLayer layer];
lineLayer.fillColor = [UIColor blueColor].CGColor;
lineLayer.strokeColor = [UIColor blueColor].CGColor;
lineLayer.lineWidth = 2;
lineLayer.frame = self.view.bounds;
UIBezierPath *linePath = [UIBezierPath bezierPath];
CGPoint circlePoint = CGPointMake(handleView_.center.x, handleView_.center.y);
[linePath moveToPoint:center]; //Center
[linePath addLineToPoint:circlePoint];
[linePath moveToPoint:circlePoint]; //Handle
lineLayer.path = linePath.CGPath;

[handleView_.layer insertSublayer:circleLayer above:handleView_.layer];
[handleView_.layer insertSublayer:lineLayer above:handleView_.layer];
//  handleView_.layer.masksToBounds = YES;
float direction = DEGREES_TO_RADIANS(10);

CGAffineTransform rotationTransform = CGAffineTransformMakeRotation(direction);
[handleView_ setTransform:rotationTransform];


[self.view addSubview:lineView_];
[self.view addSubview:handleView_];

}

其次:我不确定我用 PanGesturerecognizer 做了正确的事情:

- (void)handleWasPanned:(UIPanGestureRecognizer *)recognizer {
switch (recognizer.state) {
    case UIGestureRecognizerStateBegan: {
        desiredHandleCenter_ = handleView_.center;
        break;
    }

    case UIGestureRecognizerStateChanged:
    case UIGestureRecognizerStateEnded:
    case UIGestureRecognizerStateCancelled: {
        CGPoint translation = [recognizer translationInView:self.view];
        desiredHandleCenter_.x += translation.x;
        desiredHandleCenter_.y += translation.y;
        [self moveHandleTowardPointAndRotateLine:desiredHandleCenter_];
        break;
    }

    default:
        break;
}

[recognizer setTranslation:CGPointZero inView:self.view];
}

- (void)moveHandleTowardPointAndRotateLine:(CGPoint)point {
CGFloat earlierDistance = [self distanceToPoint:point ifHandleMovesByOffset:-1];
CGFloat currentDistance = [self distanceToPoint:point ifHandleMovesByOffset:0];
CGFloat laterDistance = [self distanceToPoint:point ifHandleMovesByOffset:1];
if (currentDistance <= earlierDistance && currentDistance <= laterDistance)
    return;

NSInteger step;
CGFloat distance;
if (earlierDistance < laterDistance) {
    step = -1;
    distance = earlierDistance;
} else {
    step = 1;
    distance = laterDistance;
}

NSInteger offset = step;
while (true) {
    NSInteger nextOffset = offset + step;
    CGFloat nextDistance = [self distanceToPoint:point ifHandleMovesByOffset:nextOffset];
    if (nextDistance >= distance)
        break;
    distance = nextDistance;
    offset = nextOffset;
}
handlePathPointIndex_ += offset;

// Make one end of the line move with handle (point) while the other is pinned to center of pathLayer_ (ie. in figure8 its the cross point, in a circle it's center)

//CGFloat rot = [self getTouchAngle:point];
CGFloat rot = atan2f((point.x - pathLayerCenter_.x), -(point.y - pathLayerCenter_.y));
handleView_.layer.transform = CATransform3DMakeRotation(rot, 0., 0., 1.);
[self layoutHandleView];
}

Answer 1

我将忽略您的代码并告诉您如何修改我的原始答案以添加您想要的行。

首先，我要为线条使用专用的形状图层，因此我将添加一个实例变量来引用线条图层:

@implementation ViewController {
    CAShapeLayer *lineLayer_; // NEW!!!
    UIBezierPath *path_;
    CAShapeLayer *pathLayer_;
    etc.

加载 View 时需要初始化线层:

- (void)viewDidLoad {
    [super viewDidLoad];
    [self initPathLayer];
    [self initHandleView];
    [self initHandlePanGestureRecognizer];
    [self initLineLayer]; // NEW!!!
}

- (void)initLineLayer {
    lineLayer_ = [CAShapeLayer layer];
    lineLayer_.lineWidth = 1;
    lineLayer_.fillColor = nil;
    lineLayer_.strokeColor = [UIColor redColor].CGColor;
    lineLayer_.lineCap = kCALineCapRound;
    lineLayer_.lineJoin = kCALineJoinRound;
    [self.view.layer addSublayer:lineLayer_];
}

在布置顶层 View 时(首次显示和旋转时)我需要布置线层:

- (void)viewDidLayoutSubviews {
    [super viewDidLayoutSubviews];
    [self createPath];
    [self createPathPoints];
    [self layoutPathLayer];
    [self layoutHandleView];
    [self layoutLineLayer]; // NEW!!!
}

- (void)layoutLineLayer {
    lineLayer_.frame = self.view.bounds;
    CGRect bounds = self.view.bounds;
    CGPoint start = CGPointMake(CGRectGetMidX(bounds), CGRectGetMidY(bounds));
    CGPoint end = pathPoints_[handlePathPointIndex_];
    UIBezierPath *path = [UIBezierPath bezierPath];
    [path moveToPoint:start];
    [path addLineToPoint:end];
    lineLayer_.path = path.CGPath;
}

最后，每当更新句柄时，我都需要再次布置线层(以更新其路径):

- (void)moveHandleTowardPoint:(CGPoint)point {
    // I have omitted most of this method body for brevity.
    // Just copy it from the original answer.

    ...
    ...

    handlePathPointIndex_ += offset;
    [self layoutHandleView];
    [self layoutLineLayer]; // NEW!!!
}

结果: