2016-11-11 3 views
0

これは本当に簡単ですが、私が間違っていることを理解できません。iOS - ビューコントローラでドーナツを描く

私は中央に1つのビューを持つビューコントローラを持っています。私は以下のサークルのようなものを描きたい:

enter image description here

私がいる主な問題は、私は、ビューに表示する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); 

} 
+2

ここには多くの基本がありません。 [iOS用の描画と印刷ガイド]から始めてください(https://developer.apple.com/library/prerelease/content/documentation/2DDrawing/Conceptual/DrawingPrintingiOS/Introduction/Introduction.html#//apple_ref/doc/uid/TP40010156)。 )、 多分? – rickster

+0

で始めるか、https://github.com/kirualex/KAProgressLabelで始めることができます –

+0

私はdrawRectのUIBezierPathが好きです: – Alex

答えて

4

これは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) 
関連する問題