Chart howto

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Ich würde gerne wissen wie ich am besten mit Core Animation ein solches Diagramm mit ganzahligen Prozenten animiere.
    Mach ich das am besten mit

    Quellcode

    1. - (void)drawRect:(CGRect)rect {
    2. CGContextMoveToPoint(context, 100, 100);
    3. CGContextAddArcToPoint(context, 100,200, 300,200, 100);
    4. }

    oder kennt wer ein Framework dafür?
    Dateien
    • image.jpg

      (24,96 kB, 397 mal heruntergeladen, zuletzt: )
  • Wenn es um die Umrandung geht: Dafür kannst Du einen CAShapeLayer mit einem Bogen als Pfad verwenden. Der Shape-Layer unterstützt auch die Animation des Pfades; Du musst dazu nur in einer CATransaction den Pfad setzen, ungefähr so:

    Quellcode

    1. ​[CATransaction begin];
    2. [CATransaction setAnimationDuration:1.0];
    3. theShapeLayer.path = theArcPath;
    4. [CATransaction end];
    „Meine Komplikation hatte eine Komplikation.“
  • macmoonshine schrieb:

    Wenn es um die Umrandung geht: Dafür kannst Du einen CAShapeLayer mit einem Bogen als Pfad verwenden. Der Shape-Layer unterstützt auch die Animation des Pfades; Du musst dazu nur in einer CATransaction den Pfad setzen, ungefähr so:

    Quellcode

    1. [CATransaction begin];
    2. [CATransaction setAnimationDuration:1.0];
    3. theShapeLayer.path = theArcPath;
    4. [CATransaction end];

    dickes like @macmoonshine
    Ich habe es jetzt mit dem erwähnten CAShapeLayer und einer CABasicAnimation gelöst.

    Quellcode

    1. CGPoint center = CGPointMake(self.frame.size.width / 2.0, self.frame.size.height / 2.0);
    2. int lineWidth = 4;
    3. // bezier
    4. UIBezierPath *path = [UIBezierPath bezierPath];
    5. [path addArcWithCenter:center radius:50 startAngle:0 endAngle:90*M_PI/180 clockwise:YES];
    6. [[UIColor grayColor] setStroke];
    7. [path setLineWidth:lineWidth];
    8. [path stroke];
    9. // shapelayer
    10. CAShapeLayer *progressLayer = [[CAShapeLayer alloc] init];
    11. progressLayer.path = path.CGPath;
    12. progressLayer.strokeColor = [UIColor blueColor].CGColor;
    13. progressLayer.fillColor = [UIColor clearColor].CGColor;
    14. progressLayer.lineWidth = lineWidth;
    15. progressLayer.strokeStart = 0;
    16. progressLayer.strokeEnd = 1;
    17. [self.layer addSublayer:progressLayer];
    18. // animation
    19. CABasicAnimation *animateStrokeEnd = [CABasicAnimation animationWithKeyPath:@"strokeEnd"];
    20. animateStrokeEnd.duration = 1;
    21. animateStrokeEnd.fromValue = [NSNumber numberWithFloat:0.0f];
    22. animateStrokeEnd.toValue = [NSNumber numberWithFloat:1.0f];
    23. [progressLayer addAnimation:animateStrokeEnd forKey:nil];
    Alles anzeigen
  • Danke fürs Hochladen! Hab es gerade am Mac nachgebaut, wobei es gewisse Komplikationen gibt, wie z.B, dass es path.CGPath nicht gibt (oder täusche ich mich?). Das hab ich mir dann "händisch" nachgebaut (gibt im Web recht viel Code dazu, einfach nach "Convert NSBezierPath to CGPath" googlen). Allerdings scheint bei mir der Kreis ein wenig pixlig... War das bei dir auch so, markusschalk?
  • Michael schrieb:

    Osxer schrieb:

    Hab es gerade am Mac nachgebaut, wobei es gewisse Komplikationen gibt, wie z.B, dass es path.CGPath nicht gibt (oder täusche ich mich?).

    Der Code von markusschalk ist für iOS.


    Ja, ich weiß. Darum habe ich ja auch vom "Nachbauen" am Mac geschrieben.

    macmoonshine schrieb:

    Osxer schrieb:

    Allerdings scheint bei mir der Kreis ein wenig pixlig...

    Hast Du das contentsScale und die Anti-Aliasing-Einstellungen des Shape-Layers geprüft und ggf. angepasst?


    Danke für die Stichwörter! Nein, habe ich noch nicht aber probiere das mal aus...
  • Ich gebe zu, das ist jetzt nicht so mein Spezialgebiet... ;)
    Ich hab mich auf jeden Fall in wenig erkundigt, aber alles was ich ausprobiert habe, hat nichts geholfen.
    Den magnificationFilter auf kCAFilterNearest, contentScale auf [[NSScreen mainScreen] backingScaleFactor] gesetzt, aber auch beim Spielen mit anderen Werten kommt nichts heraus.
  • Osxer schrieb:

    Danke fürs Hochladen! Hab es gerade am Mac nachgebaut, wobei es gewisse Komplikationen gibt, wie z.B, dass es path.CGPath nicht gibt (oder täusche ich mich?). Das hab ich mir dann "händisch" nachgebaut (gibt im Web recht viel Code dazu, einfach nach "Convert NSBezierPath to CGPath" googlen). Allerdings scheint bei mir der Kreis ein wenig pixlig... War das bei dir auch so, markusschalk?

    Bitte gerne. Nein, bei mir war nichts pixelig.

    Osxer schrieb:

    Ich gebe zu, das ist jetzt nicht so mein Spezialgebiet... ;)
    Ich hab mich auf jeden Fall in wenig erkundigt, aber alles was ich ausprobiert habe, hat nichts geholfen.
    Den magnificationFilter auf kCAFilterNearest, contentScale auf [[NSScreen mainScreen] backingScaleFactor] gesetzt, aber auch beim Spielen mit anderen Werten kommt nichts heraus.

    In OS X hab ich es leider auch noch nicht gemacht.