iOS - 在視圖控制器中繪製甜甜圈

我有一個視圖控制器，在中心有一個視圖。我想畫的東西像下面的循環：

我遇到的主要問題，是我不能讓anytihng露面的看法。我現在只是想畫一條線，但我顯然錯過了一些關鍵。這裏是我的代碼：

@interface ViewController() 
@property (weak, nonatomic) IBOutlet UIView *centerView; 

@end 

@implementation ViewController 

- (void)viewDidLoad { 
    [super viewDidLoad]; 

    [[UIColor brownColor] set]; 
    CGContextRef currentContext =UIGraphicsGetCurrentContext(); 
    CGContextSetLineWidth(currentContext,5.0f); 
    CGContextMoveToPoint(currentContext,50.0f, 10.0f); 
    CGContextAddLineToPoint(currentContext,100.0f, 200.0f); 
    CGContextStrokePath(currentContext); 

}

來源

2016-11-11 Arel

這裏有很多基礎知識。從[適用於iOS的繪圖和打印指南]開始（https://developer.apple.com/library/prerelease/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40010156 ），也許？ – rickster

或者你可以從https://github.com/kirualex/KAProgressLabel –

開始我喜歡UIBezierPath in drawRect： – Alex

你可以用CAShapeLayer做到這一點。這是一個操場，說明如何做到這一點。作爲額外的獎勵，我投入了動畫。

import UIKit 
    import PlaygroundSupport 

    class AnimatedRingView: UIView { 
     private static let animationDuration = CFTimeInterval(2) 
     private let π = CGFloat.pi 
     private let startAngle = 1.5 * CGFloat.pi 
     private let strokeWidth = CGFloat(8) 
     var proportion = CGFloat(0.5) { 
      didSet { 
       setNeedsLayout() 
      } 
     } 

     private lazy var circleLayer: CAShapeLayer = { 
      let circleLayer = CAShapeLayer() 
      circleLayer.strokeColor = UIColor.gray.cgColor 
      circleLayer.fillColor = UIColor.clear.cgColor 
      circleLayer.lineWidth = self.strokeWidth 
      self.layer.addSublayer(circleLayer) 
      return circleLayer 
     }() 

     private lazy var ringlayer: CAShapeLayer = { 
      let ringlayer = CAShapeLayer() 
      ringlayer.fillColor = UIColor.clear.cgColor 
      ringlayer.strokeColor = self.tintColor.cgColor 
      ringlayer.lineCap = kCALineCapRound 
      ringlayer.lineWidth = self.strokeWidth 
      self.layer.addSublayer(ringlayer) 
      return ringlayer 
     }() 

     override func layoutSubviews() { 
      super.layoutSubviews() 
      let radius = (min(frame.size.width, frame.size.height) - strokeWidth - 2)/2 
      let circlePath = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: startAngle + 2 * π, clockwise: true) 
      circleLayer.path = circlePath.cgPath 
      ringlayer.path = circlePath.cgPath 
      ringlayer.strokeEnd = proportion 


     } 

     func animateRing(From startProportion: CGFloat, To endProportion: CGFloat, Duration duration: CFTimeInterval = animationDuration) { 
      let animation = CABasicAnimation(keyPath: "strokeEnd") 
      animation.duration = duration 
      animation.fromValue = startProportion 
      animation.toValue = endProportion 
      animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionEaseOut) 
      ringlayer.strokeEnd = endProportion 
      ringlayer.strokeStart = startProportion 
      ringlayer.add(animation, forKey: "animateRing") 
     } 

    } 

    let v = AnimatedRingView(frame: CGRect(x: 0, y: 0, width: 100, height: 100)) 
    PlaygroundPage.current.liveView = v 
    v.animateRing(From: 0, To: 0.5)

來源

2016-11-11 23:05:01

iOS - 在視圖控制器中繪製甜甜圈

回答

相關問題