Question

我想在我的3个视图中绘制3个圆圈，但只有顶视图圆圈被绘制，即使代码是相同的。我似乎无法理解问题出在哪里，这就是为什么另外两个圈子不存在？

class ViewController: UIViewController {  

  ///Views used to display the progress view
  var topView: CircleView!
  var middleView: CircleView!
  var bottomView: CircleView!  

  override func viewDidLoad() {
    super.viewDidLoad()
    createThreeViews()
  }

  func createThreeViews(){        
    let viewHeight = self.view.bounds.height
    let viewWidth = self.view.bounds.width

    //Top View 
    let topTimerFrame = CGRect(x: 0, y: 0, width: viewWidth, height: 3/6 * viewHeight)
    topView = CircleView(frame: topTimerFrame)
    topView.backgroundColor = UIColor.redColor()

    //Middle View
    let middleTimerFrame = CGRect(x: 0, y: topTimerFrame.height, width: viewWidth, height: 2/6 * viewHeight)

    middleView = CircleView(frame: middleTimerFrame)
    middleView.backgroundColor = UIColor.blueColor()


    //Bottom view
    let bottomTimerFrame = CGRect(x: 0, y: topTimerFrame.height + middleTimerFrame.height, width: viewWidth, height: 1/6 * viewHeight)

    bottomView = CircleView(frame: bottomTimerFrame)
    bottomView.backgroundColor = UIColor.greenColor()

    //add top circle and set constraint
    self.view.addSubview(topView)

    //add middle circle and set constraints
    self.view.addSubview(middleView)

    //add bottom circle and set constraints
    self.view.addSubview(bottomView)
  }

}

//class used to create the views and draw circles in them
class CircleView: UIView {
  let π:CGFloat = CGFloat(M_PI)    
  let circle = CAShapeLayer()    
  var secondLayerColor: UIColor = UIColor.whiteColor()


  //custom initializer
  override init(frame: CGRect) {
    super.init(frame: frame)
    userInteractionEnabled = true
    setup()
  }

  required init?(coder aDecoder: NSCoder) {
    super.init(coder: aDecoder)
    userInteractionEnabled = true
    setup()
  }

  func setup() {

    //draw the circle and add to layer
    circle.frame = bounds
    circle.lineWidth = CGFloat(4)
    circle.fillColor = UIColor.whiteColor().CGColor
    circle.strokeEnd = 1

    layer.addSublayer(circle)
    setupShapeLayer(circle)
  }

  override func layoutSubviews() {        
    super.layoutSubviews()
    setupShapeLayer(circle)       
  }

  func setupShapeLayer(shapeLayer: CAShapeLayer) {        
    shapeLayer.frame = bounds        
    let radius = frame.height/2 - circle.lineWidth/2        
    let startAngle = CGFloat(0)        
    let endAngle = 2*π        
    let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)        
    shapeLayer.path = path.CGPath        
  }

}

Answer 1

您正在绘制一个带有框架偏移的圆圈（绘制另外两个圆圈，但在框架之外）。

变化：

let path = UIBezierPath(arcCenter: center, radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)

为：

let path = UIBezierPath(arcCenter: CGPoint(x: center.x , y: frame.height/2) , radius: radius, startAngle: startAngle, endAngle: endAngle, clockwise: false)

顺便说一下。您可能希望将setupShapeLayer(circle)中的setup()更改为setNeedsLayout(); layoutIfNeeded()，否则会在第一次时将其绘制两次。

按顺序绘制圆圈以包含swift中的视图

1 个答案: