RingView lineCap тень видна, когда прогресс> 100 - PullRequest
0 голосов
/ 29 февраля 2020

Я получил этот кодовый код от https://www.youtube.com/watch?v=H7bsJ0rPgN4&t=898s. Код прекрасно работает со значениями stati c, но когда я добавил свои, он сделал эту забавную строку cap. Я сузил его до тени на перекрывающемся кольцевом представлении, но я понятия не имею, почему он применяет его к кольцу, которое имеет значение до 1,0. enter image description here

import SwiftUI

struct RingViewAbcp: View {

    @State var trimRing = false
    @State var trimOverlapping = false

    var precent: CGFloat
    var radius: CGFloat = 25
    var color: Color = Color.green
    var width: CGFloat = 30
    var ringAuthBodyFat: Int = 24
    var ringBodyFat: Int = 21
    var recordDate: Date
    var recordLabel: String
    var animationDuration: CGFloat = 0.5
    var backgroung: Color = Color.black

    static let dateFormat: DateFormatter = {
        let formatter = DateFormatter()
        formatter.dateStyle = .short
        return formatter
    }()

    internal var primaryRing: CGFloat {
        if CGFloat(Double(ringBodyFat) / Double(ringAuthBodyFat)) < 1.0 {
            return CGFloat(Double(ringBodyFat) / Double(ringAuthBodyFat))
        }else{
            return 1.0
        }
    }

    internal var secondaryRing: CGFloat {
        if CGFloat(Double(ringBodyFat) / Double(ringAuthBodyFat)) < 1.0 {
            return 0.0
        }else{
            return CGFloat(Double(ringBodyFat) / Double(ringAuthBodyFat)).truncatingRemainder(dividingBy: 1.0)
        }
    }

    internal var primaryDuration: Double {
        return Double(primaryRing / CGFloat(Double(ringBodyFat) / Double(ringAuthBodyFat))) * Double(animationDuration)
    }

    internal var secondaryDuration: Double {
        return Double(animationDuration) - primaryDuration
    }

    private struct overlappingRing: View {
        @State private var trimRing = false
        var radius: CGFloat
        var color: Color
        var width: CGFloat
        var duration: Double
        var deleyDuration: Double

        var body: some View {

            Circle()
                .trim(from: 0, to: self.trimRing ? 0.005 : 0)
                .stroke(self.color, style: StrokeStyle(lineWidth: self.width, lineCap: .round, lineJoin: .round))
                .frame(width: self.radius * 2, height: self.radius * 2)
                .rotationEffect(.degrees(-90))
                .animation(Animation.linear(duration: 0.1).delay(self.deleyDuration))
                .onAppear {
                    self.trimRing.toggle()
            }
        }
    }

    var body: some View {

        return
            HStack {
                ZStack {
                    Circle()
                        .stroke(self.backgroung, style: StrokeStyle(lineWidth: self.width))
                        .frame(width: self.radius * 2, height: self.radius * 2)

                    Circle()
                        .trim(from: 0, to: self.trimRing ? self.primaryRing : 0)
                        .stroke(self.color, style: StrokeStyle(lineWidth: width, lineCap: .round))
                        .frame(width: self.radius * 2, height: self.radius * 2)
                        .rotationEffect(.degrees(-90))
                        .animation(Animation.linear(duration: self.primaryDuration))
                        .onAppear {
                            self.trimRing.toggle()
                    }
                    if Double(ringBodyFat) > 1.0 {
                        overlappingRing(radius: radius, color: color, width: width, duration: Double(secondaryRing), deleyDuration: primaryDuration)

//> Here is where I think the problem is and I'm not sure how to make a state property with a ternary operator to fix the issue.

                            .shadow(color: .black, radius: 0, x: 1, y: 0)
                            .rotationEffect(.degrees(trimOverlapping ? Double(secondaryRing * 360) : 0))
                            .animation(Animation.linear(duration: secondaryDuration).delay(primaryDuration))
                            .onAppear {
                                self.trimOverlapping.toggle()
                        }
                    }

                    Text("\(ringBodyFat)")
                        .font(.subheadline)
                        .fontWeight(.bold)
                }
                VStack(alignment: .leading) {
                    Text(recordLabel)
                        .font(.caption)
                        .fontWeight(.bold)
                    Text("\(recordDate, formatter: Self.dateFormat)")
                        .font(.caption)
                }
            }
            .padding()
    }
}
Добро пожаловать на сайт PullRequest, где вы можете задавать вопросы и получать ответы от других членов сообщества.
...