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

この種の問題を解決する方法は、Illustrator などの描画プログラムで形状を描画することです。これは、私が求めている曲線を得るためにベジエ曲線のポイントがどこに行く必要があるかを明確に示しています。

于 2013-04-10T22:58:47.283 に答える
1

通常、UIBezierPath は moveToPoint で始まり、曲線の始点を設定します。次に、これらのメソッドを使用して任意の数の曲線セグメントが続きます。 – addLineToPoint: – addArcWithCenter:radius:startAngle:endAngle:clockwise: – addCurveToPoint:controlPoint1:controlPoint2: – addQuadCurveToPoint:controlPoint:

何に問題があるのか​​を具体的に述べていないので、飛躍して、あなたが苦労しているのは addCurveToPoint:controlPoint1:controlPoint2 であると仮定します。

この呼び出しによって追加されたセグメントは、最初の引数までの曲線内で最後に追加または移動されたポイントから始まるセグメントを描画します。どのように波打つかは、コントロール ポイントによって決まります。

それがどのように波打つかを理解する最も簡単な方法は、最初の点 (前のメソッド呼び出しで確立された) を最初の制御点 (この制御点の線分 1 としましょう) に接続する線と、最初の引数 (終了点) を接続する別の線を想像することです。追加されるセグメントの) を 2 番目のコントロール ポイント (このコントロール ポイント ライン セグメント 2 と呼びます) に接続します。

始点でのベジエ曲線は、制御点の線分 1 に接しています。曲線の終点で、制御点の線分 2 に接しています。

したがって、滑らかな線を形成するように複数のベジエで曲線を描きたい場合は、1 つの曲線の制御点線分 2 の傾きが、曲線の制御点線分 1 の傾きと同じであることを確認する必要があります。それに結合する次のカーブ。

開始点から最初の制御点までの距離と、終了点から 2 番目の制御点までの距離によって、曲線の曲率が決まります。

私の友人は、このように想像しています。地点 A から地点 B に移動する宇宙船を想像してください。宇宙船は、コントロール ポイント ライン セグメント 1 の勾配によって決定される方向と、その長さによって決定される速度で出発します。進行方向はコントロールポイント線分 2 の傾きに徐々に変更されます。一方、速度はコントロールポイント線分 2 の長さに徐々に変更されます。宇宙船が点 B に到着するまでに、宇宙船はそれに接して移動します。セグメント。

于 2013-05-12T19:14:07.350 に答える