Striped style with gradient

[cyrilzakka]

Hello,

It is possible to adopt the striped style while still maintaining a gradient? As far as I can tell it doesn't seem to be natively supported so I've done the following:

                    LinearGradient(
                        colors: [.red, .blue, .green, .yellow],
                        startPoint: .leading,
                        endPoint: .trailing
                    ) .mask {
                        WaveformLiveCanvas(samples: samples, configuration: configuration)
                            .frame(height: 100)
                    }

Thanks!

[dmrschmidt]

It is currently not, no.

Your approach there is definitely the most straightforward one. The only other option currently to change the rendering - which is really only useful for much more complex use cases - would be to implement your own WaveformRenderer, like this one here: https://github.com/dmrschmidt/DSWaveformImage/blob/main/Sources/DSWaveformImage/Renderers/LinearWaveformRenderer.swift

I'm still planning to make the SwiftUI version "a lot more native", using ShapeStyle conformance et al to provide a lot more styling freedom. But not sure when that's coming. Maybe I'll have a stab at it this week. But don't expect anything soon.

Using the mask as you did should be more than suitable for most use cases for the time being.

[dmrschmidt]

@cyrilzakka see my commit message above.

You'll soon be able to just do the following. It's a little cumbersome, because the colors from the config are essentially being ignored. As mentioned in the commit message, I can't really change that without breaking the existing API horribly.

So for the time being this should be seen as an optional style override for cases like yours. Arguably I don't feel it improved the situation much 😅 But it's a required way regardless on the way of making this library more native in SwiftUI, so I went with it anyway.

WaveformView(audioURL: audioURL, configuration: .init(style: .striped(.init(color: .black)))) { shape in
    shape // override the shape styling
        .stroke(LinearGradient(colors: [.blue, .pink], startPoint: .bottom, endPoint: .top), lineWidth: 3)
}