web-dev-qa-db-fra.com

Tracez un cercle avec UIBezierPath

J'essaie de dessiner un cercle à l'aide de la méthode UIBezierPath addArcWithCenter:

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 je reçois est le suivant:

enter image description here

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

Je vous remercie

METTRE À JOUR :

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

* Le cercle de fond est dessiné avec:

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

* J'essaie de dessiner le cercle rouge pas à pas en utilisant bezierPathWithOvalInRect Entre 2 valeurs: _volumeValue et volume

Mais je ne peux pas obtenir un cercle parfait, mais la partie horizontale après une certaine valeur.

enter image description here

objective-ccalayercashapelayercabasicanimation
11
Mosbah

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 devrait être compris entre 0 et 100.

En outre, vous créiez un chemin avec une ellipse et y ajoutiez un arc. Ne fais pas ça. Il suffit d’ajouter l’arc au chemin vide.

Si vous voulez changer le point de départ de l'arc, changez startAngle et endAngle lors de l'ajout de l'arc. Ne changez pas la valeur de départ du trait.

Animation du changement 

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

OK, cela va animer la propriété strokeEnd du chemin. Vous devez comprendre que ça marche comme ça ...

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 bougé. Vous ne "complétez" pas le reste de la ligne. Vous changez la ligne.

C’est pourquoi le début doit toujours être 0 et que vous changez simplement la fin du trait.

24
Fogmeister

Je n'ai aucune idée de ce à quoi vous vous attendez ni de ce qui ne va pas avec votre résultat réel, mais un rayon de 0 dans votre deuxième ligne de code semble louche. Il ajoute simplement un point sur center au chemin actuel (qui inclut déjà un cercle).

1
Nikolai Ruhe
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 x dirigé vers la droite et un axe y dirigé vers le bas.)

lisez ce document https://developer.Apple.com/library/ios/documentation/uikit/reference/UIBezierPath_class/index.html

spécifier un angle de départ de 0 radian, un angle de fin de π et définir le paramètre horaire dans le sens des aiguilles d'une montre sur YES dessine la moitié inférieure du cercle. Cependant, spécifier les mêmes angles de début et de fin, mais définir le paramètre de réglage des aiguilles d'une montre sur NO dessine la moitié supérieure du cercle.

0
Daxesh Nagar