Create different stroke styles on same Path - SwiftUI (Based on value between 0-1 like gradient)

Question

In SwiftUI Shapes we can make different color strokes by using gradients.

Eg -

@ViewBuilder
func lineWithSecondColorStyleFromPositionN() -> some View {
    let n = 0.5
    GeometryReader { gr in
        Path { path in
            path.move(to: CGPoint(x: 0, y: 0))
            path.addLine(to: CGPoint(x: gr.size.width, y: gr.size.height))
        }
        .stroke(
            LinearGradient(stops: [
                Gradient.Stop(color: .red, location: 0),
                Gradient.Stop(color: .red, location: n),
                Gradient.Stop(color: .blue, location: n),
                Gradient.Stop(color: .blue, location: 1)
            ], startPoint: .top, endPoint: .bottom),
            style: StrokeStyle(lineWidth: 10, lineCap: .butt)
        )
    }
    .frame(height: 200)
}

Is it possible by any means to do the same for stroke styles?

To create something like this -

Stroke Style 1(Full Line) from 0 to n,

Stroke Style 2(Dashed) from n to 1.

Where n can be any floating number 0<=n<=1

What about drawing twice, one with dash$, one with full lines, and use a mask to hide the parts you want? — Larme, Jan 13 '22 at 16:16
Tried that.. became too cumbersome.. But will look into it with some other angle.. — Kunal Verma, Jan 15 '22 at 16:36
Was looking to see if there's some way to avoid drawing twice. But don't think soo.. — Kunal Verma, Jan 16 '22 at 00:59
Thanks for the followup - I'm in the same situation, trying to avoid double-draw. — Jens Peter, Jan 27 '23 at 08:43

score 0 · Answer 1 · edited Aug 10 '23 at 16:45

0

You can use only Gradient to achieve this I think

edited Aug 10 '23 at 16:45

starball

20,030
7
43
238

answered Aug 10 '23 at 13:55

Oscar Berggren

81
7

Create different stroke styles on same Path - SwiftUI (Based on value between 0-1 like gradient)

1 Answers1