Dessiner un cercle avec UIBezierPath

Je suis en train de dessiner un cercle à l'aide de UIBezierPath addArcWithCenter méthode :

UIBezierPath *bezierPath = 
  [UIBezierPath bezierPathWithOvalInRect:CGRectMake(0., 0., 100., 100.)];

[bezierPath addArcWithCenter:center 
                      radius:0. 
                  startAngle:0 endAngle:2 * M_PI clockwise:YES];

CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];

[progressLayer setPath:bezierPath.CGPath];
[progressLayer setStrokeColor:[UIColor colorWithWhite:1. alpha:.2].CGColor];
[progressLayer setFillColor:[UIColor clearColor].CGColor];
[progressLayer setLineWidth:.3 * self.bounds.size.width];
[progressLayer setStrokeStart:_volumeValue/100.];
[progressLayer setStrokeEnd:volume/100.]; //between 0 and 100

[_circleView.layer addSublayer:progressLayer];

mais ce que j'ai est le suivant :

Dessiner un cercle avec UIBezierPath

J'ai essayé de jouer avec les différents paramètres, mais pas de chance

Merci

Mise à JOUR :

Je suis désolé si je n'ai pas expliqué ce que je suis en train de faire:

*L'arrière-plan du cercle est dessiné à l'aide de :

[UIBezierPath bezierPathWithOvalInRect:CGRectMake(0., 0., 100., 100.)]

*Je suis en train de dessiner le cercle rouge, étape par étape, à l'aide de bezierPathWithOvalInRect
entre 2 valeurs : _volumeValue et le volume

Mais je ne peux pas obtenir un cercle parfait, au lieu-je obtenir de l'horizontale de la partie après une certaine valeur.

Dessiner un cercle avec UIBezierPath

source d'informationauteur Mosbah | 2014-09-23

  1. 23

    OK, essayez ceci...

    UIBezierPath *bezierPath = [UIBezierPath bezierPath];
[bezierPath addArcWithCenter:center radius:50 startAngle:0 endAngle:2 * M_PI clockwise:YES];

CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];
[progressLayer setPath:bezierPath.CGPath];
[progressLayer setStrokeColor:[UIColor colorWithWhite:1.0 alpha:0.2].CGColor];
[progressLayer setFillColor:[UIColor clearColor].CGColor];
[progressLayer setLineWidth:0.3 * self.bounds.size.width];
[progressLayer setStrokeEnd:volume/100];
[_circleView.layer addSublayer:progressLayer];

    volume doit être comprise entre 0 et 100.

    Aussi, vous avez été la création d'un chemin avec une ellipse, puis en ajoutant un arc. Ne pas le faire. Ajoutez simplement de l'arc pour le vide chemin.

    Si vous souhaitez changer l'emplacement où l'arc commence à partir puis changer le startAngle et endAngle lors de l'ajout de l'arc. Ne pas modifier le contour de la valeur de départ.

    L'animation de changement

    [CATransaction begin];
CABasicAnimation *animateStrokeDown = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
animateStrokeDown.toValue = [NSNumber numberWithFloat:volume/100.];
[progressLayer addAnimation:animateStrokeDown forKey:@"animateStrokeDown"];
[CATransaction commit];

    OK, ce que cela va faire est d'animer la strokeEnd propriété du chemin d'accès. Vous devez comprendre si, il fonctionne comme ceci...

    Begin state: start = 0, end = 6
0123456
-------

//increase volume
Animate to: end = 9
0123456789
----------

//decrease volume
Animate to: end = 1
01
--

    Le début n'a pas bougé. La fin a été déplacé. Vous n'êtes pas "remplir" le reste de la ligne. Vous êtes à la modification de la ligne.

    C'est pourquoi le départ doit toujours être égal à 0 et il suffit de changer la fin de course.

  2. 1

    Je n'ai aucune idée de ce que vous attendez et ce qui est erroné avec votre résultat réel—mais un rayon de 0 dans la deuxième ligne de code semble louche. Il ajoute juste un point à center pour le chemin d'accès actuel (qui comprend déjà un cercle).

  3. 0
    startAngle:degreesToRadians(-90) endAngle:0 clockwise:YES

    (La raison en est que le système de coordonnées par défaut sur iOS a un axe des x vers la droite, et un axe y vers le bas.)

    la lecture de ce document
    https://developer.apple.com/library/ios/documentation/uikit/reference/UIBezierPath_class/index.html

    spécifiant un angle de 0 radians, un angle de la fin de π radians, et le réglage de la dans le sens des aiguilles paramètre sur OUI attire la moitié inférieure du cercle. Toutefois, en spécifiant le même début et de fin des angles mais la définition des aiguilles d'une montre paramètre est réglé à NO attire la moitié supérieure du cercle.