🔴Stroke

⭐️ 重點

.stroke(lineWidth:) 或 .stroke(style:) 會把實心圖形變成「空心的」，只留下「邊線」是實心的。( 👉 💈範例 )

⚠️ 注意：

• .stroke(lineWidth:), .stroke(style:) 回傳的依然是個 Shape。

• .stroke(_:lineWidth:), .stroke(_:style:) 回傳卻是 View，要注意❗️

💈範例

shape with strokes

import SwiftUI
import PlaygroundSupport

// content view
struct ContentView: View {
    
    let gradient = LinearGradient(
        gradient  : Gradient(colors: [.white, .yellow, .red]), 
        startPoint: .topLeading, 
        endPoint  : .bottomTrailing
    )
    
    let dashed = StrokeStyle(lineWidth: 3, dash:[8,4])
    let borderColor: Color = .gray
    
    // view body
    var body: some View {
        HStack {

            // ⭐️ stroke once
            ZStack {
                Circle()
                    .stroke(lineWidth:40)
                    .fill(gradient)
                Circle().stroke(style: dashed)
            }.border(borderColor)

            // ⭐️ stroke twice
            Circle()
                .stroke(lineWidth:40)
                .stroke(lineWidth: 20)
                .fill(gradient).border(borderColor).opacity(0.9)

            // ⭐️ stroke 3 times
            Circle()
                .stroke(lineWidth:40)
                .stroke(lineWidth: 20)
                .stroke(lineWidth: 10)
                .fill(gradient).border(borderColor).opacity(0.9)

        }.padding(50).frame(height:300)
    }
}

// live view
PlaygroundPage.current.setLiveView(ContentView())

💈其他

// outline
.overlay(
    RoundedRectangle(cornerRadius: 30, style: .continuous)
        .stroke()
)

// dash line
.stroke(.black, style: .init(
    lineWidth : 5, 
    lineCap   : .round, 
    lineJoin  : .round, 
    miterLimit: .infinity, 
    dash      : [100, 20], 
    dashPhase : 10
))

// stroke gradient
.stroke(.linearGradient(
    colors    : [.white.opacity(0.3), .black.opacity(0.1)], 
    startPoint: .top, 
    endPoint  : .bottom
)

📘 手冊

• SwiftOnTap

  • Path ⟩ strokedPath(_:) → Path

  • InsettableShape ⟩ strokeBorder(_:style:antialiased:) → some View.

• SwiftUI ⟩ Shapes ⟩

  • InsettableShape ⟩

    • strokeBorder(_:style:antialiased:) - ⭐️ 注意：此系列都是回傳 some View.

  • Shape ⟩

    • stroke(lineWidth:) → some Shape

    • stroke(style:) → some Shape

    • stroke(_:lineWidth:) → some View (stroke with a ShapeStyle)

    • .stroke(_:style:) → some View.

📗 參考

• Design+Code ⟩ Shape, Stroke and Blend Mode

🗣 討論

• SwiftUI: How to draw filled and stroked shape?