绘制CGPath UIBezierCurve

Question

​

​

大家好，我正在研究如何绘制一个类似于上面插图的形状。我一直在寻找和阅读，但对如何使用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之类的绘图程序中绘制形状。这清楚地显示了bezier曲线点需要去哪里才能得到我想要的曲线。

Answer 2

UIBezierPath通常以moveToPoint开始，以设置曲线的起点。然后是使用以下方法的任意数量的曲线段：- addArcWithCenter:radius:startAngle:endAngle:clockwise：：- addLineToPoint：-addQuadCurveToPoint：

您没有明确说明您遇到了什么问题，所以我将进行一次跳跃，并假设您正在努力处理的是addCurveToPoint: trouble Point1:trouble Point2。

此调用添加的线段从最近添加或移动到曲线中的第一个参数的点开始绘制线段。它的起伏方式由控制点决定。

理解它如何波动的最简单方法是想象连接第一个点(在前面的方法调用中建立的)和第一个控制点(让我们将这个控制点称为line segment 1)的线，以及连接第一个参数(正在添加的段的结束点)到第二个控制点(让我们将这个控制点称为line segment 2)的另一条线。

起点处的Bezier曲线与控制点线段1相切。它与曲线终点处的控制点线段2相切。

因此，如果要绘制具有多个Bezier的曲线，以便它们形成一条平滑线，则需要确保一条曲线的控制点线段2的坡度与连接到该曲线的下一条曲线的控制点线段1的坡度相同。

从起点到第一个控制点的距离以及从终点到第二个控制点的距离决定了曲线的曲率。

我的一个朋友就是这样想象的。想象一艘从A点到B点的太空船，它的航向由控制点线段1的斜率决定，速度由它的长度决定。航向逐渐改变为控制点线段2的斜率，同时速度逐渐改变为控制点线段2的长度。当航天器到达B点时，它正与该线段相切行进。