0

字母

大家好，我正在研究如何绘制上图中的形状。我一直在寻找和阅读，但对如何使用 UIBezierPath 绘制曲线感到有些困惑。我发现了非常好的代码，它使用带有动画的 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];
}
4

2 回答 2

1

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 点时，它正与该点相切。部分。

于 2013-05-12T19:14:07.350 回答
1

我解决这类问题的方法是在 Illustrator 等绘图程序中绘制形状。这清楚地显示了贝塞尔曲线点需要去哪里才能得到我想要的曲线。

于 2013-04-10T22:58:47.283 回答