CODEWITHSUNDEEP
iosswiftiphone
Syed Anas
Syed Anas

Reputation: 1

How to make UIBezierPath to start from mid of view (currently it is starting from left corner side of view)

I am using following code to create roundview with progress bar on it layer but progress bar always starting from left top corner side and I want to make it start from top mid of view

func buildRoundView1(roundView: UIView, total: Int, borderColor: UIColor, shapeLayer: CAShapeLayer){

    let trackLayer = CAShapeLayer()
    
    let rect = CGRect(x: 0, y: 0, width: roundView.frame.size.width, height: roundView.frame.size.height)
    let circularPath = UIBezierPath(roundedRect: rect, cornerRadius: 10)
    
    trackLayer.path = circularPath.cgPath
    
    trackLayer.lineWidth = 4
    trackLayer.fillColor = UIColor.clear.cgColor
    trackLayer.lineCap = CAShapeLayerLineCap.round
    roundView.layer.addSublayer(trackLayer)
    shapeLayer.path = circularPath.cgPath
    
    shapeLayer.strokeColor = borderColor.cgColor
    shapeLayer.lineWidth = 4
    shapeLayer.fillColor = UIColor.clear.cgColor
    shapeLayer.lineCap = CAShapeLayerLineCap.round
    
    shapeLayer.strokeEnd = 0
    roundView.layer.addSublayer(shapeLayer)
    
    let basicAnimation = CABasicAnimation(keyPath: "strokeEnd")
    let startValue = Double(10800-total).normalize(min: 0.0, max: 10800.0)
    basicAnimation.fromValue = 1 - startValue
    basicAnimation.toValue = 1
    basicAnimation.duration = CFTimeInterval(total)
    basicAnimation.fillMode = CAMediaTimingFillMode.backwards
    basicAnimation.isRemovedOnCompletion = true
    
    shapeLayer.add(basicAnimation, forKey: "urSoBasic")
    
}

Upvotes: 0

Views: 99

Answers (1)

Shadowrun
Shadowrun

Reputation: 3867

Some ideas:

  1. Make your own geometry instead of using UIBezierPath(roundedRect: rect, cornerRadius: 10) construct it with move to point, add line to point, add curve to point etc etc
  2. Rotate the path you got from UIBezierPath(roundedRect: rect, cornerRadius: 10) by 90 degrees (translate its center to origin, rotate it, translate it back)
  3. Make the bezier path with height and width swapped and rotate shapeLayer by applying a transform to it

Upvotes: 1

Related Questions