🔴Stroke

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

⚠️ 注意：

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

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

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.

PreviousShape NextStrokeStyle

Last updated 2 years ago

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 )