绘制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。这清楚地显示了贝塞尔曲线点需要去的位置，以便得到我所追求的曲线。

Answer 2

UIBezierPath通常以moveToPoint开头，以设置曲线的起点。然后使用这些方法跟随任意数量的曲线段：      - addLineToPoint：      - addArcWithCenter：radius：startAngle：endAngle：顺时针：      - addCurveToPoint：controlPoint1：controlPoint2：      - addQuadCurveToPoint：controlPoint：

你没有具体说明你遇到什么问题，所以我要做一个跳跃，并假设你正在努力的addCurveToPoint：controlPoint1：controlPoint2。

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

理解它如何波动的最简单方法是想象将第一个点（在前一个方法调用中建立）连接到第一个控制点（让我们称之为控制点线段1）的行，以及连接第一个参数的另一行（要添加的段的结束点）到第二个控制点（让我们称之为控制点线段2）。

起点处的贝塞尔曲线与控制点线段1相切。它与曲线末端的控制点线段2相切。

因此，如果要绘制具有多个贝塞尔曲线的曲线，使它们形成平滑线，则需要确保一条曲线的控制点线段2的斜率与控制点线段的斜率相同加入它的下一条曲线中的1条。

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

我的一个朋友用这种方式想象它。想象一下从A点到B点的太空飞船。太空船的起点是由控制点线段1的斜率确定的航向和由其长度决定的速度。航向逐渐变为控制点线段2的斜率。同时，速度逐渐变为控制点线段2的长度。当太空船到达B点时，它正在切向于该点。段。