在 swift 中按包含视图的比例绘制圆圈

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)

顺便说一句。你可能想把setup()里面的setupShapeLayer(circle)改成setNeedsLayout(); layoutIfNeeded()，不然第一次会画两次。

在 swift 中按包含视图的比例绘制圆圈

Drawing circles proportionally to containing view in swift

cashapelayer

ios

swift2