improve stripes display in circular progress

Author: mikhailChelbaev

Sources/ComponentsKit/Components/CircularProgress/Models/CircularProgressVM.swift

@@ -81,8 +81,10 @@ extension CircularProgressVM {
       return .lgCaption
     }
   }
+  var stripeWidth: CGFloat {
+    return 0.5
+  }
   private func stripesCGPath(in rect: CGRect) -> CGMutablePath {
-    let stripeWidth: CGFloat = 0.5
     let stripeSpacing: CGFloat = 3
     let stripeAngle: Angle = .degrees(135)
 
@@ -93,14 +95,10 @@ extension CircularProgressVM {
     let dx: CGFloat = rect.height * tan(radians)
     for x in stride(from: 0, through: rect.width + rect.height, by: step) {
       let topLeft = CGPoint(x: x, y: 0)
-      let topRight = CGPoint(x: x + stripeWidth, y: 0)
-      let bottomLeft = CGPoint(x: x + dx, y: rect.height)
-      let bottomRight = CGPoint(x: x + stripeWidth + dx, y: rect.height)
+      let bottomRight = CGPoint(x: x + dx, y: rect.height)
 
       path.move(to: topLeft)
-      path.addLine(to: topRight)
       path.addLine(to: bottomRight)
-      path.addLine(to: bottomLeft)
       path.closeSubpath()
     }
     return path
@@ -109,15 +107,7 @@ extension CircularProgressVM {
 
 extension CircularProgressVM {
   func gap(for normalized: CGFloat) -> CGFloat {
-    normalized > 0 ? 0.05 : 0
-  }
-
-  func progressArcStart(for normalized: CGFloat) -> CGFloat {
-    return 0
-  }
-
-  func progressArcEnd(for normalized: CGFloat) -> CGFloat {
-    return max(0, min(1, normalized))
+    return normalized > 0 ? 0.05 : 0
   }
 
   func stripedArcStart(for normalized: CGFloat) -> CGFloat {

Sources/ComponentsKit/Components/CircularProgress/SUCircularProgress.swift

@@ -102,52 +102,33 @@ public struct SUCircularProgress: View {
   }
 
   var stripedBackground: some View {
-    Path { path in
-      path.addArc(
-        center: self.model.center,
-        radius: self.model.radius,
-        startAngle: .radians(0),
-        endAngle: .radians(2 * .pi),
-        clockwise: false
-      )
-    }
-    .trim(
-      from: self.model.stripedArcStart(for: self.progress),
-      to: self.model.stripedArcEnd(for: self.progress)
-    )
-    .stroke(
-      .clear,
-      style: StrokeStyle(
-        lineWidth: self.model.circularLineWidth,
-        lineCap: .round
+    StripesShapeCircularProgress(model: self.model)
+      .stroke(
+        self.model.color.main.color,
+        style: StrokeStyle(lineWidth: self.model.stripeWidth)
       )
-    )
-    .overlay {
-      StripesShapeCircularProgress(model: self.model)
-        .foregroundColor(self.model.color.main.color)
-        .mask {
-          Path { maskPath in
-            maskPath.addArc(
-              center: self.model.center,
-              radius: self.model.radius,
-              startAngle: .radians(0),
-              endAngle: .radians(2 * .pi),
-              clockwise: false
-            )
-          }
-          .trim(
-            from: self.model.stripedArcStart(for: self.progress),
-            to: self.model.stripedArcEnd(for: self.progress)
-          )
-          .stroke(
-            style: StrokeStyle(
-              lineWidth: self.model.circularLineWidth,
-              lineCap: .round
-            )
+      .mask {
+        Path { maskPath in
+          maskPath.addArc(
+            center: self.model.center,
+            radius: self.model.radius,
+            startAngle: .radians(0),
+            endAngle: .radians(2 * .pi),
+            clockwise: false
           )
         }
-    }
-    .rotationEffect(.degrees(-90))
+        .trim(
+          from: self.model.stripedArcStart(for: self.progress),
+          to: self.model.stripedArcEnd(for: self.progress)
+        )
+        .stroke(
+          style: StrokeStyle(
+            lineWidth: self.model.circularLineWidth,
+            lineCap: .round
+          )
+        )
+      }
+      .rotationEffect(.degrees(-90))
   }
 }
 

Sources/ComponentsKit/Components/CircularProgress/UKCircularProgress.swift

@@ -237,7 +237,8 @@ extension UKCircularProgress {
       model: CircularProgressVM
     ) {
       layer.isHidden = model.isStripesLayerHidden
-      layer.fillColor = model.color.main.uiColor.cgColor
+      layer.strokeColor = model.color.main.uiColor.cgColor
+      layer.lineWidth = model.stripeWidth
     }
 
     static func stripesMaskLayer(