堆栈内存溢出
  繁体   English   中英

如何在视图中按比例缩放刻度？ 斯威夫特

[英]How can I scale my ticks proportionally in view? Swiftui

 原文  2021-11-13 20:26:24  8   1    swift/ swiftui

问题描述

我想让我的视图可扩展。 但是，当我更改大小时，刻度的大小仍然存在。 刻度线也应该按比例缩小以适合圆圈。

这里有最佳实践方法吗？

这是它的整体外观

在这里小

正如我们所看到的，刻度保持相同的大小。

这是我使用的代码：

struct TestView: View {

var body: some View {
    
    GeometryReader { geometry in
        ZStack {
            Circle()
                .fill(Color.gray)
            
                ForEach(0..<60*4) { tick in
                    Ticks.tick(at: tick)
            }
        }
    }.frame(height: 100)
    }
}

struct Ticks{
    static func tick(at tick: Int) -> some View {
        VStack {
            Rectangle()
                .fill(Color.primary)
                .opacity(tick % 20 == 0 ? 1 : 0.4)
                .frame(width: 2, height: tick % 4 == 0 ? 15 : 7)
            Spacer()
    }.rotationEffect(Angle.degrees(Double(tick)/(60) * 360))
}
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

谢谢！

附加代码：

struct Hand: Shape {
    let inset: CGFloat
    let angle: Angle
    
    func path(in rect: CGRect) -> Path {
        let rect = rect.insetBy(dx: inset, dy: inset)
        var p = Path()
        p.move(to: CGPoint(x: rect.midX, y: rect.midY))
        p.addLine(to: position(for: CGFloat(angle.radians), in: rect))
        return p
    }
    
    private func position(for angle: CGFloat, in rect: CGRect) -> CGPoint {
        let angle = angle - (.pi/2)
        let radius = min(rect.width, rect.height)/2
        let xPos = rect.midX + (radius * cos(angle))
        let yPos = rect.midY + (radius * sin(angle))
        return CGPoint(x: xPos, y: yPos)
    }
}

struct TickHands: View {
    @State private var dateTime = Date()

    private let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ZStack {
            Hand(inset: 105, angle: dateTime.hourAngle)
                .stroke(style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round))
            Hand(inset: 70, angle: dateTime.minuteAngle)
                .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
            Hand(inset: 40, angle: dateTime.secondAngle)
                .stroke(Color.orange, style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round))
            Circle().fill(Color.orange).frame(width: 10)
        }
        .onReceive(timer) { (input) in
            self.dateTime = input
        }
    }
}

extension Date {
    var hourAngle: Angle {
        return Angle (degrees: (360 / 12) * (self.hour + self.minutes / 60))
    }
    var minuteAngle: Angle {
        return Angle(degrees: (self.minutes * 360 / 60))
    }
    var secondAngle: Angle {
        return Angle (degrees: (self.seconds * 360 / 60))
    }
}

extension Date {
    var hour: Double {
        return Double(Calendar.current.component(.hour, from: self))
    }
    var minutes: Double {
        return Double(Calendar.current.component(.minute, from: self))
    }
    var seconds: Double {
        return Double(Calendar.current.component(.second, from: self))
    }
}


struct TestView: View {
    var clockSize: CGFloat = 400
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                TickHands()
                ForEach(0..<60*4) { tick in
                    Ticks.tick(at: tick, scale: geometry.size.height / 200)
                }
            }
        }.frame(width: clockSize, height: clockSize)
    }
}

struct Ticks{
    static func tick(at tick: Int, scale: CGFloat) -> some View {
        VStack {
            Rectangle()
                .fill(Color.primary)
                .opacity(tick % 20 == 0 ? 1 : 0.4)
                .frame(width: 2 * scale, height: (tick % 4 == 0 ? 15 : 7) * scale)
            Spacer()
        }
        .rotationEffect(Angle.degrees(Double(tick)/(60) * 360))
    }
}

1 个解决方案

解决方案1
 0 已采纳  2021-11-13 21:05:59

您可以根据已有的GeometryReader传递scale因子。

struct ContentView: View {
    var body: some View {
        TestView()
    }
}

struct Hand: Shape {
    let inset: CGFloat
    let angle: Angle
    
    func path(in rect: CGRect) -> Path {
        let rect = rect.insetBy(dx: inset, dy: inset)
        var p = Path()
        p.move(to: CGPoint(x: rect.midX, y: rect.midY))
        p.addLine(to: position(for: CGFloat(angle.radians), in: rect))
        return p
    }
    
    private func position(for angle: CGFloat, in rect: CGRect) -> CGPoint {
        let angle = angle - (.pi/2)
        let radius = min(rect.width, rect.height)/2
        let xPos = rect.midX + (radius * cos(angle))
        let yPos = rect.midY + (radius * sin(angle))
        return CGPoint(x: xPos, y: yPos)
    }
}

struct TickHands: View {
    var scale: Double
    @State private var dateTime = Date()
    private let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ZStack {
            Hand(inset: 105 * scale, angle: dateTime.hourAngle)
                .stroke(style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round))
            Hand(inset: 70 * scale, angle: dateTime.minuteAngle)
                .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
            Hand(inset: 40 * scale, angle: dateTime.secondAngle)
                .stroke(Color.orange, style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round))
            Circle().fill(Color.orange).frame(width: 10)
        }
        .onReceive(timer) { (input) in
            self.dateTime = input
        }
    }
}

extension Date {
    var hourAngle: Angle {
        return Angle (degrees: (360 / 12) * (self.hour + self.minutes / 60))
    }
    var minuteAngle: Angle {
        return Angle(degrees: (self.minutes * 360 / 60))
    }
    var secondAngle: Angle {
        return Angle (degrees: (self.seconds * 360 / 60))
    }
}

extension Date {
    var hour: Double {
        return Double(Calendar.current.component(.hour, from: self))
    }
    var minutes: Double {
        return Double(Calendar.current.component(.minute, from: self))
    }
    var seconds: Double {
        return Double(Calendar.current.component(.second, from: self))
    }
}


struct TestView: View {
    var clockSize: CGFloat = 500
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                let scale = geometry.size.height / 200
                TickHands(scale: scale)
                ForEach(0..<60*4) { tick in
                    Ticks.tick(at: tick, scale: scale)
                }
            }
        }.frame(width: clockSize, height: clockSize)
    }
}

struct Ticks{
    static func tick(at tick: Int, scale: CGFloat) -> some View {
        VStack {
            Rectangle()
                .fill(Color.primary)
                .opacity(tick % 20 == 0 ? 1 : 0.4)
                .frame(width: 2 * scale, height: (tick % 5 == 0 ? 15 : 7) * scale)
            Spacer()
        }
        .rotationEffect(Angle.degrees(Double(tick)/(60) * 360))
    }
}

请注意，您可能希望更改scale效果如何更改width与height ——例如，您可能希望宽度始终为2 。 或者，也许您想使用min(1, 2 * scale)来防止刻度高于或低于某个大小。 但是，主体将是相同的（即使用scale因子）。 您还可以将我拥有的200调整为适合您理想缩放算法的值。

解决方案2
 0  2021-11-13 22:19:09

我现在在视图中添加了手，显示当前时间。 现在我也有手部没有缩放的问题，这是因为我给手部赋予了固定值。 我们也可以在此处添加缩放比例吗？

这是我的代码：

struct Hand: Shape {
    let inset: CGFloat
    let angle: Angle
    
    func path(in rect: CGRect) -> Path {
        let rect = rect.insetBy(dx: inset, dy: inset)
        var p = Path()
        p.move(to: CGPoint(x: rect.midX, y: rect.midY))
        p.addLine(to: position(for: CGFloat(angle.radians), in: rect))
        return p
    }
    
    private func position(for angle: CGFloat, in rect: CGRect) -> CGPoint {
        let angle = angle - (.pi/2)
        let radius = min(rect.width, rect.height)/2
        let xPos = rect.midX + (radius * cos(angle))
        let yPos = rect.midY + (radius * sin(angle))
        return CGPoint(x: xPos, y: yPos)
    }
}

struct TickHands: View {
    @State private var dateTime = Date()

    private let timer = Timer.publish(every: 1.0, on: .main, in: .common).autoconnect()
    
    var body: some View {
        ZStack {
            Hand(inset: 105, angle: dateTime.hourAngle)
                .stroke(style: StrokeStyle(lineWidth: 4, lineCap: .round, lineJoin: .round))
            Hand(inset: 70, angle: dateTime.minuteAngle)
                .stroke(style: StrokeStyle(lineWidth: 3, lineCap: .round, lineJoin: .round))
            Hand(inset: 40, angle: dateTime.secondAngle)
                .stroke(Color.orange, style: StrokeStyle(lineWidth: 2, lineCap: .round, lineJoin: .round))
            Circle().fill(Color.orange).frame(width: 10)
        }
        .onReceive(timer) { (input) in
            self.dateTime = input
        }
    }
}

extension Date {
    var hourAngle: Angle {
        return Angle (degrees: (360 / 12) * (self.hour + self.minutes / 60))
    }
    var minuteAngle: Angle {
        return Angle(degrees: (self.minutes * 360 / 60))
    }
    var secondAngle: Angle {
        return Angle (degrees: (self.seconds * 360 / 60))
    }
}

extension Date {
    var hour: Double {
        return Double(Calendar.current.component(.hour, from: self))
    }
    var minutes: Double {
        return Double(Calendar.current.component(.minute, from: self))
    }
    var seconds: Double {
        return Double(Calendar.current.component(.second, from: self))
    }
}


struct TestView: View {
    var clockSize: CGFloat = 400
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                TickHands()
                ForEach(0..<60*4) { tick in
                    Ticks.tick(at: tick, scale: geometry.size.height / 200)
                }
            }
        }.frame(width: clockSize, height: clockSize)
    }
}

struct Ticks{
    static func tick(at tick: Int, scale: CGFloat) -> some View {
        VStack {
            Rectangle()
                .fill(Color.primary)
                .opacity(tick % 20 == 0 ? 1 : 0.4)
                .frame(width: 2 * scale, height: (tick % 4 == 0 ? 15 : 7) * scale)
            Spacer()
        }
        .rotationEffect(Angle.degrees(Double(tick)/(60) * 360))
    }
}

暂无
暂无

声明:本站的技术帖子网页，遵循CC BY-SA 4.0协议，如果您需要转载，请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.

相关问题 在按比例调整子视图的大小时，如何调整视图的大小？ 如何在 SwiftUI 中为我的视图提供背景图像 SwiftUI - 如何在我的视图中调用 Function？ 如何防止我的 SwiftUI 视图在滚动时调整大小 如何在SwiftUI中访问视图的修饰符？ 如何使用 SwiftUI 缩放文本以适应父视图？ 如何在 SwiftUI 中创建蓝视图？ 如何使用 SwiftUI 呈现新视图？ 如何在 function 中传递 SwiftUI 视图？ SwiftUI：如何将通知交互更改为视图的一部分？
相关标签
 
粤ICP备18138465号  © 2020-2024 STACKOOM.COM