SwiftUI 在分段圆上标记每个分段

Question

这里是新手，决定使用 Shape 来处理具有大元素的应用程序。我创建了一个视图，它绘制圆的各个部分并将它们组合成所述圆。我现在尝试向每个段添加文本来标记它们（因为它们充当按钮）。我尝试过使用 .overlay 等简单尝试，并在论坛中搜索解决方案，例如以下解决方案：How can i insert UIImages in mycircleegments with SwiftUI?

不幸的是，我无法将标签放置在其各自的部分上。我共享的代码删除了所有标记以显示其当前状态的尝试。

这是我绘制分段轮的代码：

struct EmotionWheelView: View {
    // Prepare array of emotions for the selector
    let emotions: [Emotion] = Bundle.main.decode("emotions.json")
    
    // Bringing in the tapped and selected emotions to set in the parent
    @Binding public var tappedEmotion: String
    @Binding public var selectedEmotion: String
    @Binding public var selectedSegment: Int?
    
    var selectableEmotions: [Emotion] {
        var results: [Emotion] = []
        
        if selectedEmotion.isEmpty {
            for emotion in emotions {
                if emotion.level == 1 {
                    results.append(emotion)
                }
            }
        } else {
            var baseEmotion: Emotion {
                var result: Emotion = emotions[0]
                
                for emotion in emotions {
                    if emotion.name == selectedEmotion {
                        result = emotion
                    }
                }
                
                return result
            }
            
            for emotion in emotions {
                for subID in baseEmotion.subID {
                    if emotion.id == subID {
                        results.append(emotion)
                    }
                }
            }
        }
        
        return results
    }
    
    var data: [Double] {
        var results: [Double] = []
        
        for _ in selectableEmotions {
            results.append(2.0)
        }
        
        return results
    }
    
    var colors: [Color] {
        var results: [Color] = []
        var color: Color = .red
        
        for emotion in selectableEmotions {
            switch emotion.color {
            case "purple":
                color = Color.purple
            case "pink":
                color = Color.pink
            case "orange":
                color = Color.orange
            case "yellow":
                color = Color.yellow
            case "green":
                color = Color.green
            case "teal":
                color = Color.teal
            case "blue":
                color = Color.blue
            default:
                color = Color.black
            }
            results.append(color)
        }
        
        return results
    }
    
    var body: some View {
        EmotionWheel(selectableEmotions: selectableEmotions, data: data, colors: colors, tappedEmotion: $tappedEmotion, selectedSegment: $selectedSegment)
            .frame(maxHeight: 200)
    }
}

struct EmotionWheel: View {
    var selectableEmotions: [Emotion]
    var data: [Double]
    var colors: [Color]
    
    @Binding var tappedEmotion: String
    @Binding var selectedSegment: Int?
    
    private var totalValue: Double {
        data.reduce(0, +)
    }
    
    private var startAngles: [Double] {
        var angles: [Double] = []
        var currentAngle = -Double.pi / 2
        for value in data {
            angles.append(currentAngle)
            currentAngle += value / totalValue * 2 * .pi
        }
        return angles
    }
    
    private var endAngles: [Double] {
        var angles: [Double] = []
        var currentAngle = -Double.pi / 2
        for value in data {
            currentAngle += value / totalValue * 2 * .pi
            angles.append(currentAngle)
        }
        return angles
    }
    
    var body: some View {
        GeometryReader { geo in
            ZStack {
                ForEach(0..<data.count, id: \.self) { index in
                    WheelSegment(startAngle: startAngles[index], endAngle: endAngles[index])
                        .stroke(Color(UIColor.systemBackground), lineWidth: 1)
                        .fill(colors[index].gradient)
                        .onTapGesture {
                            withAnimation {
                                selectedSegment = index
                                tappedEmotion = selectableEmotions[index].name
                            }
                        }
                        .scaleEffect(selectedSegment == index ? 1.1 : 1.0)
                        .animation(.spring(dampingFraction: 0.8), value: selectedSegment)
                }
                
                Circle()
                    .foregroundStyle(Color(UIColor.systemBackground))
                    .frame(width: geo.size.width / 2)
                    .overlay {
                            Text(tappedEmotion)
                                .fontWeight(.bold)
                                .foregroundStyle(getTappedColor(tappedEmotion: tappedEmotion))
                                .padding()
                    }
            }
            .padding(40)
        }
    }
}

struct WheelSegment: Shape {
    var startAngle: Double
    var endAngle: Double
    
    func path(in rect: CGRect) -> Path {
        var path = Path()
        let center = CGPoint(x: rect.midX, y: rect.midY)
        let radius = min(rect.width, rect.height)
        path.move(to: center)
        path.addArc(center: center, radius: radius, startAngle: Angle(radians: startAngle), endAngle: Angle(radians: endAngle), clockwise: false)
        path.closeSubpath()
        return path
    }
}

func getTappedColor(tappedEmotion: String) -> Color {
    let emotions: [Emotion] = Bundle.main.decode("emotions.json")
    var color: Color = .red
    
    var toColor: Emotion {
        for emotion in emotions {
            if emotion.name == tappedEmotion {
                return emotion
            }
        }
        return emotions[0]
    }
    
    switch toColor.color {
    case "purple":
        color = Color.purple
    case "pink":
        color = Color.pink
    case "orange":
        color = Color.orange
    case "yellow":
        color = Color.yellow
    case "green":
        color = Color.green
    case "teal":
        color = Color.teal
    case "blue":
        color = Color.blue
    default:
        color = Color.black
    }
    
    return color
}

结果：

目标的粗略表述（你明白了）：

我尝试过使用.overlay，我也尝试过使用ZStack并制作两个“圆圈”，一个用于显示颜色，另一个用于显示标签。

Answer 1

我建议您使用

ZStack

来显示轮子的各个部分和标签。

要使标签显示在圆圈周围但水平方向的位置（如屏幕截图所示），您需要应用 3 次转换：

• 负旋转效应
• 将标签移离

  ZStack

中心的偏移量
• 正向旋转效应

我发现调整你的代码以显示它的工作有点困难，所以这里是一个小的独立示例，仅显示各个位置的标签：

enum Emotion: CaseIterable {
    case Happy
    case Angry
    case Disgusted
    case Sad
    case Delighted
    case Muted
    case Shocked

    var name: String {
        "\(self)"
    }
}

struct ContentView: View {
    let emotions: [Emotion] = Emotion.allCases
    let radius: CGFloat = 100

    func angleForIndex(index: Int) -> CGFloat {
        let segmentAngle = 360 / CGFloat(emotions.count)
        return (CGFloat(index) + 0.5) * segmentAngle
    }

    var body: some View {
        ZStack {
            Circle()
                .stroke(lineWidth: 10)
                .foregroundColor(.blue.opacity(0.3))
                .frame(width: radius * 2, height: radius * 2)
            ForEach(Array(emotions.enumerated()), id: \.offset) { index, emotion in
                Text(emotion.name)
                    .rotationEffect(.degrees(-angleForIndex(index: index)))
                    .offset(y: -radius)
                    .rotationEffect(.degrees(angleForIndex(index: index)))
            }
        }
    }
}