Рисование CGPath UIBezierCurve

Question

Привет всем Я ищу в пути, как я могу нарисовать фигуру как на рисунке above.I искали и читать, но получить немного запутался, как кривые рисуются с использованием UIBezierPath. Я нашел действительно nice code, который использует CAShapeLayer с анимацией для рисования линий.

код до сих пор у меня есть:

@synthesize animationLayer = _animationLayer; 
@synthesize pathLayer = _pathLayer; 
@synthesize penLayer = _penLayer; 


- (void) setupDrawingLayer 
{ 
    if (self.pathLayer != nil) { 
    [self.penLayer removeFromSuperlayer]; 
    [self.pathLayer removeFromSuperlayer]; 
    self.pathLayer = nil; 
    self.penLayer = nil; 
    } 


CGPoint upperCurve = CGPointMake(101, 100); 
CGPoint lowerCurve = CGPointMake(224,200); 



UIBezierPath *path = [UIBezierPath bezierPath]; 
path.lineCapStyle = kCGLineCapRound; 
path.miterLimit = -10.0f; 
path.lineWidth = 10.0f; 

[path moveToPoint:lowerCurve]; 
[path addQuadCurveToPoint:upperCurve controlPoint:lowerCurve]; 




CAShapeLayer *pathLayer = [CAShapeLayer layer]; 

pathLayer.frame = self.animationLayer.bounds; 

pathLayer.path = path.CGPath; 

pathLayer.strokeColor = [[UIColor blackColor] CGColor]; 

pathLayer.fillColor = nil; 

pathLayer.lineWidth = 10.0f; 

pathLayer.lineJoin = kCALineJoinBevel; 

[self.animationLayer addSublayer:pathLayer]; 

self.pathLayer = pathLayer; 

} 


-(void) startAnimation 
{ 
[self.pathLayer removeAllAnimations]; 


CABasicAnimation *pathAnimation = [CABasicAnimation animationWithKeyPath:@"strokeEnd"]; 
pathAnimation.duration = 10.0; 
pathAnimation.fromValue = [NSNumber numberWithFloat:0.0f]; 
pathAnimation.toValue = [NSNumber numberWithFloat:1.0f]; 
[self.pathLayer addAnimation:pathAnimation forKey:@"strokeEnd"]; 

} 

- (void)viewDidLoad 
{ 
[super viewDidLoad]; 

self.animationLayer = [CALayer layer]; 
self.animationLayer.frame = CGRectMake(20.0f, 64.0f, 
             CGRectGetWidth(self.view.layer.bounds) - 40.0f, 
             CGRectGetHeight(self.view.layer.bounds) - 84.0f); 
[self.view.layer addSublayer:self.animationLayer]; 

[self setupDrawingLayer]; 
[self startAnimation]; 
} 

Answer 1

Как я решить такого рода проблемы, чтобы нарисовать форму в программе рисования, такие как Illustrator. Это ясно показывает, где точки кривой безье должны идти, чтобы получить кривую, за которой я буду.

Answer 2

UIBezierPath обычно начинается с moveToPoint, чтобы установить начальную точку кривой. Тогда за ним следует любое количество сегментов кривой, используя эти методы: - addLineToPoint: - addArcWithCenter: радиус: StartAngle: endAngle: по часовой стрелке: - addCurveToPoint: controlPoint1: controlPoint2: - addQuadCurveToPoint: ControlPoint:

Вы Ждут» t конкретно, с чем вы столкнулись, поэтому я собираюсь сделать прыжок и предположить, что это addCurveToPoint: controlPoint1: controlPoint2, с которым вы боретесь.

Сегмент, добавленный этим вызовом, вытягивает сегмент, начинающийся с самого последнего добавленного или перемещенного в точку на кривой до первого аргумента. Как это волнообразно определяется контрольными точками.

Простейший способ понять, как он волнообразен - представить линии, соединяющие первую точку (установленную в предыдущем вызове метода) с первой контрольной точкой (давайте назовем этот отрезок 1 линии контрольной точки), а другая строка, соединяющая первый аргумент (конечная точка добавляемого сегмента) во вторую контрольную точку (назовем этот сегмент линии контрольной точки 2).

Кривая Безье в начальной точке касается отрезка линии 1 контрольной точки. Она касается участка 2 линии контрольной точки в конце кривой.

Итак, если вы хотите нарисовать кривую с несколькими безьерами, чтобы они образовывали плавную линию, вам нужно убедиться, что наклон участка 2 линии контрольной точки одной кривой такой же, как наклон линии контрольной точки сегмент 1 следующей кривой, которая присоединяется к нему.

Расстояние от начальной точки до первой контрольной точки и конечная точка до второй контрольной точки определяют кривизну кривой.

Друг мой воображает это таким образом. Представьте себе космический корабль, идущий от точки A до точки B. Космический корабль начинается с курса, определяемого наклоном сегмента 1 линии контрольной точки и скоростью, определяемой его длиной. Заголовок постепенно изменяется на наклон сегмента линии контрольной точки 2. Между тем, скорость постепенно изменяется на длину участка линии линии контрольной точки 2. К тому времени, когда космический корабль прибывает в точку B, он перемещается касательно к этому сегмент.