-1

I am trying for PieChart which having dynamic datas.

On clicking each Pie, it has to highlight and rest are in normal state.

Dynamically changing lineWidth of CAShapeLayer, but lineWidth increasing from middle path.

It has to increase from bottom to top

Code:

    let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)
    let circleRadius : CGFloat = circle.bounds.width / 2 * 0.83

    let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(1.0 * .pi), endAngle: CGFloat(3.0 * .pi), clockwise: true)
    let progressCircle = CAShapeLayer()
    progressCircle.path = circlePath.cgPath
    progressCircle.strokeColor = color.cgColor
    progressCircle.fillColor = UIColor.clear.cgColor

    if onClick == 2 {
        progressCircle.lineWidth = 60
    } else {
        progressCircle.lineWidth = 30
    }
    
    
    progressCircle.strokeStart = strokeStart/PieChartConstant.maxPercent
    progressCircle.lineCap = CAShapeLayerLineCap.butt
    progressCircle.strokeEnd = strokeEnd/PieChartConstant.maxPercent

Query:

That increased Pie should in same track as like previous Pies. Kindly guide me, how to achieve this.

Referred:

Checked_this , but couldn't achieve and also dont know how to achieve this.

My Output:

enter image description here

McDonal_11
  • 3,935
  • 6
  • 24
  • 55
  • What’s the question? – matt Apr 08 '21 at 06:54
  • Hi @matt That increased Pie should in same track as like previous Pies. ., How to achieve this? – McDonal_11 Apr 08 '21 at 06:59
  • I'm not sure what you mean by "same track". Can you show a picture of how you want them to look like? – Sweeper Apr 08 '21 at 07:07
  • @Sweeper Image updated., Highlighted Pie should be in same path like "REQUIRED" image – McDonal_11 Apr 08 '21 at 07:26
  • All the line widths are the same in the required image, it seems. Why are you conditionally setting `lineWidth` to different values in the first place? You should set all the line widths to the same number. – Sweeper Apr 08 '21 at 07:29
  • @Sweeper pls check update – McDonal_11 Apr 08 '21 at 07:32
  • Don’t try to paint shapes with mere lines (strokes) and line widths. If the goal is a pie shape draw a pie shape and fill it. The approach here is too simplistic so of course it doesn’t work. – matt Apr 08 '21 at 07:41
  • I am asking., Why Strokes are increasing its width from centre? and Is there anyway to start increase width from bottom to top ?? @matt – McDonal_11 Apr 08 '21 at 08:07
  • Strokes increase width from the center because that’s how they work. As I said, relying on stroke to make your whole shape is just silly. Learn to draw a true circle sector. What you are doing is no way to achieve the goal drawing you’ve shown. – matt Apr 08 '21 at 08:09

2 Answers2

0

I have tried to achieve the result.,

OnClicking, need to increase this radius. Then, exact result achieved.

Code:

    .........
    .....
    let centerPoint = CGPoint (x: circle.bounds.width / 2, y: circle.bounds.width / 2)
    var circleRadius : CGFloat = circle.bounds.width / 2 * 0.83

    if onClick == 2 { //THIS BLOCK IS USED TO INCREASE PARTICULAR PIE
        circleRadius = circleRadius + 10
    }

    let circlePath = UIBezierPath(arcCenter: centerPoint, radius: circleRadius, startAngle: CGFloat(1.0 * .pi), endAngle: CGFloat(3.0 * .pi), clockwise: true)
    .......
    ............

Output

enter image description here

McDonal_11
  • 3,935
  • 6
  • 24
  • 55
  • This is still not a viable or maintainable way to approach the problem. Your drawing does not resemble the original target drawing (the one on the right in https://i.stack.imgur.com/7abRT.png), and it isn't going to. Instead of undermining the design to match your code, upgrade your code to achieve the design. – matt Apr 09 '21 at 02:14
  • My real design couldn't post here., that was confidential. I just want to know why stroke drawn from centre and is there any way to move that Pie in same track. The design which I mentioned earlier [u have mentioned in previous comment], to represent what is meant by "SAME TRACK". And also, I dont want to go with library. I m trying with myself. So I have asked a question here. But I dont know reason for downvote. Thanks @matt – McDonal_11 Apr 09 '21 at 07:24
  • And also this simple code will help many SO followers to achieve this type of simple Pie Chart. – McDonal_11 Apr 09 '21 at 07:26
0

Personally I think you would be a lot happier drawing the whole segment shape and filling it, instead of trying to let a mere stroke represent the shape. I had no difficulty getting this sort of thing:

enter image description here

Each segment here was drawn as an arc, a line, an arc, a line, then fill. That approach gives complete control over how the segments are drawn, because we are drawing the segments ourselves.

matt
  • 515,959
  • 87
  • 875
  • 1,141
  • Yes @matt . I have drawn a full circle and then I was trying to adjust stroke start and end. This approach was wrong. We have to draw exact arc and then fill or use stroke as per our need. I have searched a lot and done my requirement. Thanks for ur comments. "if the goal is a pie shape draw a pie shape and fill it" - with the help of this comment., I have done. – McDonal_11 Apr 10 '21 at 11:39