SwiftUI 中的交叉影线（条纹）BarMark

Question

我想通过在 SwiftUI 项目中使用图表来获得具有交叉阴影线图案的 BarMark。 我的数据类型是（日期，双精度）。

我创建了一个这样的图表：

struct ContentView: View {
    struct  ChartData: Hashable {
        let date: Date
        let value: Double
    }
    
    @State private var model: [ChartData] = [
        ChartData(date: Calendar.current.date(byAdding: .month, value: -1, to: Date())!, value: 70),
        ChartData(date: Date(), value: 170),
        ChartData(date: Calendar.current.date(byAdding: .month, value: 1, to: Date())!, value: 45)
    ]
    
    private let barWidth: CGFloat = 40.0
    
    var body: some View {
            Chart {
                ForEach(model, id: \.self) { data in
                    BarMark(
                        x: .value("Date", data.date),
                        yStart: .value("Start", 0),
                        yEnd: .value("End", data.value),
                        width: .fixed(barWidth)
                    )
                    .foregroundStyle(.yellow)
                }
            }
            .chartXAxis(.hidden)
            .chartYAxis(.hidden)
            .padding()
    }
}

这是所需的 BarMark：

交叉阴影线标记

提前致谢

Answer 1

您可以使用

ImagePaint

作为条形标记的

foregroundStyle

。

你只需要有一个像这样的图案图像：

您可以通过如下方式绘制来创建这样的图像：

let pattern = Image(size: .init(width: 40, height: 30)) { gc in
    gc.fill(Path(CGRect(x: 0, y: 0, width: 40, height: 30)), with: .color(.orange.opacity(0.3)))
    
    func stroke(from: CGPoint, to: CGPoint) {
        gc.stroke(Path { p in
            p.move(to: from)
            p.addLine(to: to)
        }, with: .color(.orange), style: .init(lineWidth: 10, lineCap: .square))
    }
    
    stroke(from: .init(x: 40, y: 0), to: .init(x: 0, y: 30))
    stroke(from: .init(x: 40, y: -30), to: .zero)
    stroke(from: .init(x: 40, y: 30), to: .init(x: 0, y: 60))
}

或者在 Photoshop 或任何你拥有的软件中创建一个。

那么你就可以做

.foregroundStyle(.image(pattern))