如何在特定区域使用drawRect？

Question

我在我的项目中使用了this主题的动画。问题是我想用一个特定的区域作为圆圈（灰色区域）。要做到这一点，我添加了一个视图（灰色区域），代码如下所示。但它每次都在x轴上定位不同的位置（y是固定的）。第二个问题是我想用围绕文本的圆圈。为此，我将文本和视图垂直和水平放置在屏幕中央。我该如何解决这两个问题？

Problem screenshots

这些是我使用的代码。

override init(frame: CGRect) { 
     super.init(frame: frame) 
     self.backgroundColor = UIColor.clearColor() 

     // Use UIBezierPath as an easy way to create the CGPath for the layer. 
     // The path should be the entire circle. 
     let circlePath = UIBezierPath(arcCenter: CGPoint(x: frame.size.width/2.0, y: frame.size.height/2.0), radius: (frame.size.width - 10)/2, startAngle: 0.0, endAngle: CGFloat(M_PI * 2.0), clockwise: true) 

     // Setup the CAShapeLayer with the path, colors, and line width 

     circleLayer.path = circlePath.CGPath 
     circleLayer.fillColor = UIColor.clearColor().CGColor 
     circleLayer.strokeColor = randomColor().CGColor 
     circleLayer.lineWidth = 40; 

     // Don't draw the circle initially 
     circleLayer.strokeEnd = 0.0 

     // Add the circleLayer to the view's layer's sublayers 
     layer.addSublayer(circleLayer) 
    } 


func animateCircle(duration: NSTimeInterval) { 
     // We want to animate the strokeEnd property of the circleLayer 
     let animation = CABasicAnimation(keyPath: "strokeEnd") 

     // Set the animation duration appropriately 
     animation.duration = duration 

     // Animate from 0 (no circle) to 1 (full circle) 
     animation.fromValue = 0 
     animation.toValue = 1 

     // Do a linear animation (i.e. the speed of the animation stays the same) 
     animation.timingFunction = CAMediaTimingFunction(name: kCAMediaTimingFunctionLinear) 

     // Set the circleLayer's strokeEnd property to 1.0 now so that it's the 
     // right value when the animation ends. 
     circleLayer.strokeEnd = 1.0 

     // Do the actual animation 
     circleLayer.addAnimation(animation, forKey: "animateCircle") 
    } 

func addCircleView() { 
     let diceRoll = CGFloat(Int(arc4random_uniform(7))*50) 

     // Create a new CircleView 
     var circleView = CircleView(frame: CGRect(x: view.frame.origin.x/2, y: view.frame.origin.y/2, width: 200, height: 200)) 

     extraView.addSubview(circleView) 
     println(view.frame.width) 
     println(view.frame.height) 

     // Animate the drawing of the circle over the course of 1 second 
     circleView.animateCircle(1.0) 
    } 

Answer 1

问题是Auto layout。您忘记了circleView <=> extraView的设置布局。请参阅下面的代码。

func addCircleView() { 
     let diceRoll = CGFloat(Int(arc4random_uniform(7))*50) 

     // Create a new CircleView 
     var circleView = CircleView(frame: CGRect(x: view.frame.origin.x/2, y: view.frame.origin.y/2, width: 200, height: 200)) 

     extraView.addSubview(circleView) 
     println(view.frame.width) 
     println(view.frame.height) 

     let constCenterX = NSLayoutConstraint(item: circleView, attribute: .CenterX, relatedBy: .Equal, toItem: extraView, attribute: .CenterX, multiplier: 1, constant: 0) 

     let constCenterY = NSLayoutConstraint(item: circleView, attribute: .CenterY, relatedBy: .Equal, toItem: extraView, attribute: .CenterY, multiplier: 1, constant: 0) 

     self.view.addConstraints([constCenterX, constCenterY]) 

     // Animate the drawing of the circle over the course of 1 second 
     circleView.animateCircle(1.0) 

     //circleView.textLabel?.text = "Hello World!" 
} 

BTW：对于第二个问题，你应该在CircleView创建一个UILabel（的centerX & centerY）。希望有所帮助！