使用物镜 c 用平底锅绘制箭头

Question

我的工作：

我一直在尝试向应用程序添加箭头，但最困难的是让它完成它需要做的事情。箭头需要从由手指触摸表示的起点绘制，并在用户在屏幕上拖动手指时增大箭头。然后箭头必须在手指抬起时停止绘制。

我遇到的问题：

当用户触摸箭头任一端的点并沿一个方向拖动手指时，箭头必须能够围绕起点和终点旋转。旋转时，箭头必须能够增大和减小它的大小。

我可以让箭头围绕起点旋转，但有问题。围绕终点旋转会导致“鱼尾”效果。我很确定我这样做的方式是完全错误的，但我不知道任何其他方式。这就是为什么要求社区引导我朝着正确的方向前进。

@implementation ViewController {
ArrowView *_selectedArrowView;
UIColor *_selectedColor;
CGFloat _selectedWeight;
CGFloat _initalAngle;
}

- (void)viewDidLoad {
    [super viewDidLoad];

    _selectedColor = [UIColor yellowColor];
    _selectedWeight = 3;

    UIPanGestureRecognizer *pan = [[UIPanGestureRecognizer alloc] initWithTarget:self action:@selector(panHandler:)];
    [self.view addGestureRecognizer:pan];

    _selectedArrowView = [[ArrowView alloc] initWithFrame:CGRectMake(300, 300, 150, 25) withColor:_selectedColor withWeight:_selectedWeight withStartPoint:CGPointMake(300, 300) withEndPoint:CGPointMake(450, 300)];
    _selectedArrowView.delegate = self;
    _selectedArrowView.layer.anchorPoint = CGPointMake(0, 0);
    _selectedArrowView.layer.position = CGPointMake(150,300);
    [self.view addSubview:_selectedArrowView];
    [self.view bringSubviewToFront:_selectedArrowView];
}

- (void) panHandler: (UIPanGestureRecognizer *) sender {
    CGPoint touchPoint = [sender locationInView:sender.view];

    if (sender.state == UIGestureRecognizerStateBegan) {
        _initalAngle = atan2(touchPoint.y, touchPoint.x);
    } else if (sender.state == UIGestureRecognizerStateChanged) {
        CGFloat currentAngle = atan2(touchPoint.y, touchPoint.x);
        CGFloat angle = _initalAngle - currentAngle;
        CGAffineTransform transform = CGAffineTransformMakeRotation(angle * -1);
        _selectedArrowView.transform = transform;
    }
}

@end

Link to code on GitHub

Answer 1

我认为您实际遇到的问题的核心是（来自您的评论）：

如果用户选择一端并在屏幕上移动手指，则箭头应围绕用户触摸的另一端旋转，并调整箭头的长度。

让我们假设箭头实际上是一个在自身内部绘制箭头的视图。所以这实际上是关于拉伸和旋转视图。现在让我们处理旋转部分。显然，这将通过应用“跟随”用户触摸的旋转变换来实现。这里要理解的是，一个视图实际上是一个层，一个层围绕它的anchorPoint旋转。

因此，当用户第一次触摸视图时，您必须查看触摸在视图中的位置，并确定这是哪一端。然后，您必须将anchorPoint 移动到 other 端，这样当我们随后旋转时，您将围绕另一端旋转。但是，更改 anchorPoint 会导致视图跳转，除非您还更改图层的 position 以进行补偿，因此您也将这样做。

我们现在已经安全地将anchorPoint 移动到用户手指对面的一端。现在我们只需要在手势继续时围绕它旋转以跟随用户的手指。您将通过将触摸坐标从笛卡尔坐标转换为极坐标来完成此操作，从而给出要应用的角度。在手势开始时，保存 initial 角度；随着手势的继续，从当前角度减去该角度，并使用产生的差异角度将 transform 设置为旋转变换。

这通常有助于简化问题。在这个例子中，我没有跟随手指 - 只是制作动画。如您所见，我可以轻松地绕箭头的一端旋转，然后绕另一端旋转，然后再绕第一端旋转，以此类推。这实际上显示了在应用旋转变换之前移动anchorPoint 和position 的效果。我建议您先解决问题的这个简单方面，然后再担心跟随用户的手指。