Добавить стрелку к UIBezierPath

Question

Мне нужна ваша помощь:

Я пытаюсь создать график, используя UIBezierPaths с переменной шириной и состоящий из кривой Безье с двумя контрольными точками. Теперь я хотел бы добавить наконечники стрел в конце (с правой стороны) этих путей. Есть ли способ сделать это, то есть путем добавления подпути с меньшим lineWidth, который содержит треугольник? Вот примерное изображение некоторых путей, к которым я хотел бы добавить стрелки:

Спасибо за вашу помощь!

Answer 1

Предположим, вы нарисовали одну из дуг примерно так:

UIBezierPath *path = [UIBezierPath bezierPath];

[path moveToPoint:point1];
[path addQuadCurveToPoint:point3 controlPoint:point2];

CAShapeLayer *shape = [CAShapeLayer layer];
shape.path = path.CGPath;
shape.lineWidth = 10;
shape.strokeColor = [UIColor blueColor].CGColor;
shape.fillColor = [UIColor clearColor].CGColor;
shape.frame = self.view.bounds;
[self.view.layer addSublayer:shape];

Ты можешь использовать atan2 Для расчета угла от контрольной точки до конечной точки:

CGFloat angle = atan2f(point3.y - point2.y, point3.x - point2.x);

Обратите внимание, что на самом деле не имеет значения, используете ли вы четырехугольник Безье или кубик, идея та же. Рассчитайте угол от последней контрольной точки до конечной точки.

Затем вы можете поместить наконечник стрелки, вычислив углы треугольника следующим образом:

CGFloat distance = 15.0;
path = [UIBezierPath bezierPath];
[path moveToPoint:point3];
[path addLineToPoint:[self calculatePointFromPoint:point3 angle:angle + M_PI_2 distance:distance]]; // to the right
[path addLineToPoint:[self calculatePointFromPoint:point3 angle:angle          distance:distance]]; // straight ahead
[path addLineToPoint:[self calculatePointFromPoint:point3 angle:angle - M_PI_2 distance:distance]]; // to the left
[path closePath];

shape = [CAShapeLayer layer];
shape.path = path.CGPath;
shape.lineWidth = 2;
shape.strokeColor = [UIColor blueColor].CGColor;
shape.fillColor = [UIColor blueColor].CGColor;
shape.frame = self.view.bounds;
[self.view.layer addSublayer:shape];

Где мы используем sinf а также cosf рассчитать углы так:

- (CGPoint)calculatePointFromPoint:(CGPoint)point angle:(CGFloat)angle distance:(CGFloat)distance {
    return CGPointMake(point.x + cosf(angle) * distance, point.y + sinf(angle) * distance);
}

Это дает что-то похожее на:

Понятно, просто настроить distance параметры для управления формой треугольника.