How to change path color in SwiftUI?
Asked Answered
L

0

6

I'm still hoping to receive an answer to the question(s) below. For clarity, I've added a few comments.

The code below generates different segments of a circle through (Bezier)paths, which together are joint through a ZStack into a single picture of 3 circles with 25% cut out. I want to give each segment a different color, depending on the value of i and j (9 in total).

This seems to be impossible: both changing the foregroundcolor in the Contentview struct and in the GeometryReader does not have any impact. Any ideas how to do this?

Second question: I tried using the "switch" command, but the compiler complains that "Closure containing control flow statement cannot be used with function builder 'ViewBuilder'". It seems very strange to me that one cannot use flow control. What am I missing or doing wrong?

struct ContentView: View {

   static let segmentCount = 4
   static let circleCount = 4

    var body: some View {
        ZStack {
            ForEach(1..<ContentView.circleCount){ j in
               ForEach(1..<ContentView.segmentCount){i in
                  GeometryReader { geometry in
                     arcShape(i: i, j: j)
                     .scaleEffect(4.0 / 4.0, anchor: .top)
                     .foregroundColor(Color(red: (79.0 + Double(j) ) / 255, green: 79.0 / 255, blue: 191.0 / 255))
                  }
               }
            }
        }
    }
}


struct arcShape: View {

   let i: Int
   let j: Int

   static let arcColor2 =  Color(red: 79.0 / 255, green: 79.0 / 255, blue: 191.0 / 255)
   static let arcColor3 =  Color(red: 79.0 / 255, green: 120.0 / 255, blue: 191.0 / 255)
   // Create new path

   var body: some View {
      GeometryReader { geometry in
         Path {path in
            let center_x = CGFloat(200.0)
            let center_y = CGFloat(200.0)
            let r = CGFloat(50.0 + (CGFloat(self.j) - 1.0) * 50.0)
            let arc_start = CGFloat((45.0 + (CGFloat(self.i) - 1.0) * 90.0)) * CGFloat(Double.pi) / 180.0
            let arc_length = CGFloat(90.0 * CGFloat(Double.pi) / 180.0)
            let arc_width = CGFloat(25.0)
            let line0Target_x = center_x + r * CGFloat(cos(Double(arc_start)))
            let line0Target_y = center_y + r * CGFloat(sin(Double(arc_start)))
            let line1Target_x = center_x + (r + arc_width) * CGFloat(cos(Double(arc_start + arc_length)))
            let line1Target_y = center_x + (r + arc_width) * CGFloat(sin(Double(arc_start + arc_length)))
            let arcColor1 =  Color(red: (79.0 + Double(self.i) * 10.0) / 255, green: 79.0 / 255, blue: 79.0 / 255)

            path.move(to: CGPoint(x: line0Target_x, y: line0Target_y))
            path.addArc(center: CGPoint(x: center_x, y: center_y), radius: r, startAngle: Angle(radians: Double(arc_start)), endAngle: Angle(radians: Double(arc_start + arc_length)), clockwise: false)
            path.addLine(to: CGPoint(x: line1Target_x, y: line1Target_y))
            path.addArc(center: CGPoint(x: center_x, y: center_y), radius: (r + arc_width), startAngle: Angle(radians: Double(arc_start + arc_length)), endAngle: Angle(radians: Double(arc_start)), clockwise: true)
            path.addLine(to: CGPoint(x: line0Target_x, y: line0Target_y))
            path.foregroundColor(arcColor1)
         }
         .foregroundColor(Color.green)
//         .border(Color.red, width: 8)
//         switch i {
//         case 1: .fill(Self.arcColor1)
//         case 2: .fill(Self.arcColor2)
//         case 3: .fill(Self.arcColor3)
//         }
      }
   }
}
Levitical answered 12/10, 2019 at 4:32 Comment(1)
I am encountering the same question myself. I notice that the way I solved this problem before (In Objective C), that the color of the path seems to be a property of the graphics context. E.G. <code>CGContextSetRGBStrokeColor(context, 1.0,0, 0.0, 1.0); </code> Thus (if so) it is not a property of the path's geometry. I do not see in your code where you are stroking the path, but my guess is that you must do a stroke for each section of arc, setting each color, to achieve the effect you want.Superinduce

© 2022 - 2024 — McMap. All rights reserved.