ios SwiftUI：如何以时钟样式修剪圆

mmvthczy 于 2023-01-14 发布在 iOS

关注(0)|答案(1)|浏览(132)

我正在制作问答应用程序，需要创建计时器，看起来像这个图像

所以它不能用正常的方式修剪，但我必须像时钟的指针一样工作。我试着用自定义的形状来自己画它，因为我知道中心点，半径和起点。所以我花了几个小时在这上面，我给予了，也许你可以告诉我是否有更简单的方法，或者你知道为什么我的代码不能正常工作。
下面是我的自定义形状：

struct ClockShape: Shape {
    var trim: Double
    
    func properPoint(_ rect: CGRect) -> CGPoint {
        let r: CGFloat = 2 //rect.height/2
        let s: CGFloat = 2 //rect.midX
        let tempLength: CGFloat = sqrt(abs(2*pow(r, 2) - (4 * r * cos(360 * trim))))
        let length = sqrt(abs(tempLength))
        let a: CGFloat = ((pow(r, 2) - sqrt(abs(length))) / (-2 * s)) - s
        let b: CGFloat = sqrt(abs(sqrt(abs(length)) - pow((a - s), 2)))
        
        return CGPoint(x: a, y: b)
    }
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let point = properPoint(rect)
        
        path.move(to: CGPoint(x: rect.midX, y: rect.minY))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.midY))
        path.addLine(to: CGPoint(x: point.x, y: point.y))
        path.addLine(to: CGPoint(x: rect.midX, y: rect.minY))
        
        return path
    }
}

下面是一个内容视图：

struct ContentView: View {
    var body: some View {
        VStack {
            ClockShape(trim: 0.5)
                .fill(Color.accentColor)
                .frame(width: 100, height: 100)
            
        }
    }
}

它应该绘制一个由“trim”值修剪的圆（例如0.5 -〉50%）

ios

来源：https://stackoverflow.com/questions/75095591/swiftui-how-to-trim-circle-in-clock-style

1条答案

按热度按时间

deyfvvtc1#

你把问题弄得太复杂了。要画一个修剪过的圆，使用Circle()和.trim。下面是一个例子，它可以缩放以适合它的框架，并带有动画。

struct ContentView: View {
    
    @State private var value: Double = 0
    
    var body: some View {
        VStack {
            clock(value)
                .frame(width: 120, height: 120)
            
            Slider(value: $value, in: 0...10)
        }
        .padding()
    }
    
    
    func clock(_ value: Double) -> some View {
        GeometryReader { proxy in
            ZStack {
                Circle()
                    .fill(.pink.opacity(0.3))
                Circle()
                    .inset(by: proxy.size.width / 4)
                    .trim(from: 0, to: value /  10)
                    .stroke(.pink.opacity(0.6), style: StrokeStyle(lineWidth: proxy.size.width / 2))
                    .rotationEffect(.radians(-.pi/2))
                    .animation(.linear, value: value)
                Text("\(Int(value))")
                    .font(Font.system(size: proxy.size.width / 2))
                    .bold()
                    .foregroundColor(.white)
            }
        }
    }
}

赞(0）回复(0）举报 2023-01-14

我来回答

ios SwiftUI：如何以时钟样式修剪圆

1条答案

相关问题

热门标签

最新问答