SwiftUI中带圆角的圆环图

des4xlb0  于 2023-06-21  发布在  Swift
关注(0)|答案(1)|浏览(109)

我正在尝试在SwiftUI中绘制饼图/圆环图。曲线球是它需要有圆角。

我成功地用弧线和尖角完成了它,就像这样:

struct PieSliceData {
    var startAngle: Angle
    var endAngle: Angle
    var color: Color
}

struct PieSliceView: View {
    var pieSliceData: PieSliceData
    
    var body: some View {
        GeometryReader { geometry in
            ZStack {
                Path { path in
                    let width: CGFloat = min(geometry.size.width, geometry.size.height)
                    let height = width
                    
                    let center = CGPoint(x: width * 0.5, y: height * 0.5)
                    
                    path.move(to: center)
                    
                    path.addArc(
                        center: center,
                        radius: width * 0.5,
                        startAngle: Angle(degrees: -90.0) + pieSliceData.startAngle,
                        endAngle: Angle(degrees: -90.0) + pieSliceData.endAngle,
                        clockwise: false)
                }
                .fill(pieSliceData.color)
                
            }
        }
        .aspectRatio(1, contentMode: .fit)
    }
    
}

但似乎我需要用圆弧法画出路径,才能让拐角变圆?
我不知道该怎么做...
谢谢

fwzugrvs

fwzugrvs1#

iOS 17及以上
对于任何需要此功能的人,Apple已经在Charts框架中添加了饼图和圆环图,其中包括圆角。

使用SectorMark创建饼图或圆环图。使用innerRadius将创建圆环图。添加cornerRadius将添加圆角。Angular 插入将在扇区之间提供空间。

import SwiftUI
import Charts

struct ContentView: View {
    var body: some View {
        Chart(data, id: \.id) { element in
            SectorMark(
                angle: .value("Count", element.count),
                innerRadius: .ratio(0.5),
                angularInset: 1.5
            )
            .cornerRadius(10)
            .foregroundStyle(by: .value("Type", element.type))
        }
        .frame(width: 350, height: 350)
    }
}

对于饼图,请删除innerRadius:

相关问题