Görüntü kullanılarak gösterildiği gibi parçaları çizmek için bir yol bulmaya çalışıyorum.

Etmek istiyorum

a) parça çizmek a) eğimleri vardır b) gölgeler vardır d) n açı 0 ile çizim animasyon

CGContextAddArc ve benzeri telefonlar ile bunu yapmak için çalışıyorum ama çok fazla değil.

Herkes yardımcı olabilir ?

Sorunuzun pek çok bölümü vardır.

Yol alıyorum

Böyle bir kesim için yol oluşturmak çok da zor olmasa gerek. İki yay ve iki düz çizgiler vardır. Bunu burada yapmayacağım yani previously explained how you can break down a path like that ettim. Bunun yerine süslü ve başka bir yol okşayarak tarafından yol oluşturmak için gidiyorum. Elbette arıza okuma ve yolunu Kendin çiz. Okşayarak bahsediyorum arc gri çizgili son sonuç turuncu arc içinde.

İnme yolunu biz ilk gerekir. aslında bu kadar basithareket içinbaşlangıç ve bir çizim noktasıarc merkezi etrafındaaçısı geçerli açı kesimi karşılamak istiyorsunuz.

CGMutablePathRef arc = CGPathCreateMutable();
CGPathMoveToPoint(arc, NULL,
                  startPoint.x, startPoint.y);
CGPathAddArc(arc, NULL,
             centerPoint.x, centerPoint.y,
             radius,
             startAngle,
             endAngle,
             YES);

Bu yolu varsa (tek arc) belirli bir genişlik ile temsil yeni bir segment oluşturabilirsiniz. Sonuç yolu iki düz çizgiler ve iki yay var. İnme eşit mesafede içe ve dışa doğru merkezi olur.

CGFloat lineWidth = 10.0;
CGPathRef strokedArc =
    CGPathCreateCopyByStrokingPath(arc, NULL,
                                   lineWidth,
                                   kCGLineCapButt,
                                   kCGLineJoinMiter, // the default
                                   10); // 10 is default miter limit

Çizim

Sıradaki çizim ve genellikle iki ana seçenek vardır: Temel Animasyon ile drawRect: veya şekil katmanları içinde Çekirdek Grafikleri. Çekirdek Grafikleri daha güçlü çizim verecek ama Çekirdek Animasyon animasyon daha iyi performans verecek. Yolları dahil olduğundan saf Cora Animasyon işe yaramaz. Garip eserler ile sona erecek. Ancak katman grafik bağlam çizerek katmanları ve Çekirdek Grafikleri bir arada kullanabiliriz.

Ve segment okşayarak doldurma

Biz zaten temel şekli var ama geçişlerini ve gölgeler ekleyin önce dolgu ve kontur temel (resim üzerinde siyah bir darbe) yapacağım.

CGContextRef c = UIGraphicsGetCurrentContext();
CGContextAddPath(c, strokedArc);
CGContextSetFillColorWithColor(c, [UIColor lightGrayColor].CGColor);
CGContextSetStrokeColorWithColor(c, [UIColor blackColor].CGColor);
CGContextDrawPath(c, kCGPathFillStroke);

O ekranda böyle bir şey koyacağız

Gölgeler ekleyerek

Sırasını değiştirmek ve degrade önce gölge yapacağım. İçerik için bir gölge yapılandırmak ve beraberlik için ihtiyacımız olan gölge çizmek için şeklin gölge ile çizmek için doldurun. Sonra içeriği (gölge önce) geri ve şekli tekrar inmeye ihtiyacımız var.

CGColorRef shadowColor = [UIColor colorWithWhite:0.0 alpha:0.75].CGColor;
CGContextSaveGState(c);
CGContextSetShadowWithColor(c,
                            CGSizeMake(0, 2), // Offset
                            3.0,              // Radius
                            shadowColor);
CGContextFillPath(c);
CGContextRestoreGState(c);

// Note that filling the path "consumes it" so we add it again
CGContextAddPath(c, strokedArc);
CGContextStrokePath(c);

Bu noktada neden böyle bir şey işte

Degrade çizim

Degrade için bir degrade katman lazım. Burada çok basit iki renkli bir degrade yapıyorum ama istediğiniz kadar özelleştirebilirsiniz. Renkleri ve uygun renk alanı almalıyız degrade oluşturmak için. Sonra dolgu (ama vuruştan önce) üstünde degrade çekebiliriz. Biz de daha önce olduğu gibi, aynı yolu degrade maskesi gerekiyor. Bu biz yolu klibi.

CGFloat colors [] = {
    0.75, 1.0, // light gray   (fully opaque)
    0.90, 1.0  // lighter gray (fully opaque)
};

CGColorSpaceRef baseSpace = CGColorSpaceCreateDeviceGray(); // gray colors want gray color space
CGGradientRef gradient = CGGradientCreateWithColorComponents(baseSpace, colors, NULL, 2);
CGColorSpaceRelease(baseSpace), baseSpace = NULL;

CGContextSaveGState(c);
CGContextAddPath(c, strokedArc);
CGContextClip(c);

CGRect boundingBox = CGPathGetBoundingBox(strokedArc);
CGPoint gradientStart = CGPointMake(0, CGRectGetMinY(boundingBox));
CGPoint gradientEnd   = CGPointMake(0, CGRectGetMaxY(boundingBox));

CGContextDrawLinearGradient(c, gradient, gradientStart, gradientEnd, 0);
CGGradientRelease(gradient), gradient = NULL;
CGContextRestoreGState(c);

Bu şu anda bunun sonucu olarak çizim tamamlanır

Animasyon

Şeklin animasyon gelince all been written before: Animating Pie Slices Using a Custom CALayer vardır. Sadece path özelliği parlak olarak çizim yapmaya çalışırsanız animasyon sırasında yolun gerçekten funky bazı çözgü göreceksiniz. Gölge ve degrade resimde görsel amacıyla olduğu gibi bırakılmıştır.

Bu cevap gönderildi ve bu makale animasyon kodu kabul ettik çizim kodu almalısın. O zaman ne ile bitmelidir.

Başvuru için: aynı çizim Temel Animasyon kullanarak

Düz şekli

CAShapeLayer *segment = [CAShapeLayer layer];
segment.fillColor = [UIColor lightGrayColor].CGColor;
segment.strokeColor = [UIColor blackColor].CGColor;
segment.lineWidth = 1.0;
segment.path = strokedArc;

[self.view.layer addSublayer:segment];

Gölgeler ekleyerek

Katman ne kadar özelleştirmek için gölge ile ilgili bazı özellikleri vardır.Howereverdaha iyi performans için shadowPath özelliği ayarlamanız gerekir.

segment.shadowColor = [UIColor blackColor].CGColor;
segment.shadowOffset = CGSizeMake(0, 2);
segment.shadowOpacity = 0.75;
segment.shadowRadius = 3.0;
segment.shadowPath = segment.path; // Important for performance

Degrade çizim

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.colors = @[(id)[UIColor colorWithWhite:0.75 alpha:1.0].CGColor,  // light gray
                    (id)[UIColor colorWithWhite:0.90 alpha:1.0].CGColor]; // lighter gray
gradient.frame = CGPathGetBoundingBox(segment.path);

Eğer degrade şimdi çektik eğer içinde şekil üstünde ve yok olur. Hayır, şekli (bunu düşündüğünü biliyorum) Gradyan dolgu yapamayız. Bu segment dışarı böylece degrade maskesi için ihtiyacımız var. Oluşturmak içinbaşka birkatman segment maskesi.sahip olmakbaşka bir katman, belgelere davranışı tanımsız "maske" katman hiyerarşisinin bir parçası. olduğu açıktır. Maske sistemi degrade için alt katmanlar aynı olacak koordinat beri ayarlamadan önce, kesim şekli çevirmek zorunda kalacağız.

CAShapeLayer *mask = [CAShapeLayer layer];
CGAffineTransform translation = CGAffineTransformMakeTranslation(-CGRectGetMinX(gradient.frame),
                                                                 -CGRectGetMinY(gradient.frame));
mask.path = CGPathCreateCopyByTransformingPath(segment.path,
                                               &translation);
gradient.mask = mask;