> For the complete documentation index, see [llms.txt](https://lochiwei.gitbook.io/ios/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://lochiwei.gitbook.io/ios/swiftui/shapes/transform-shape/shape.stroke.md).

# shape.stroke()

[SwiftUI](/ios/swiftui.md) ⟩ [shapes](/ios/swiftui/shapes.md) ⟩ [transform](/ios/swiftui/shapes/transform-shape.md) ⟩ <mark style="color:purple;">`.stroke()`</mark>&#x20;

{% hint style="warning" %}
:warning: 注意：

•  [.stroke(lineWidth:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(linewidth:\)), [.stroke(style:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(style:\)) 回傳 [Shape](/ios/swiftui/shapes/shape.md)。

•  [.stroke(\_:lineWidth:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(_:linewidth:\)), [.stroke(\_:style:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(_:style:\)) 回傳 [View](/ios/swiftui/view/view.md)，要注意❗️
{% endhint %}

{% hint style="info" %}
[.stroke(lineWidth:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(linewidth:\)) 或 [.stroke(style:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(style:\)) 會把「<mark style="color:yellow;">實心圖形</mark>變成<mark style="color:red;">**空心的**</mark>」，只留下「<mark style="color:red;">**邊線**</mark>」是實心的。( 👉 💈範例 )
{% endhint %}

{% tabs %}
{% tab title="💈範例" %}
![shape with strokes](https://1830103165-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2F-M5-JmwCZMKh_d7RfBaN%2Fuploads%2Fa7hiwcHPEetg1CgHguJ4%2Fstrokes.jpg?alt=media\&token=0f3d6e41-a412-48d7-ae42-85e332e10d5f)

```swift
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())
```

{% endtab %}

{% tab title="💈其他" %}

```swift
// 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
)
```

{% endtab %}

{% tab title="📘 手冊" %}

* SwiftOnTap
  * [Path](https://swiftontap.com/path) ⟩ [strokedPath(\_:)](https://swiftontap.com/path/strokedpath\(_:\)) → Path
  * [InsettableShape](https://swiftontap.com/insettableshape) ⟩ [strokeBorder(\_:style:antialiased:)](https://swiftontap.com/insettableshape/strokeborder\(_:style:antialiased:\)) → <mark style="color:orange;">**some View**</mark>.
* SwiftUI ⟩ Shapes ⟩&#x20;
  * [InsettableShape](https://developer.apple.com/documentation/swiftui/insettableshape) ⟩&#x20;
    * [strokeBorder(\_:style:antialiased:)](https://developer.apple.com/documentation/swiftui/insettableshape/strokeborder\(_:style:antialiased:\)) - ⭐️ 注意：此系列都是回傳 <mark style="color:orange;">**some View**</mark>.
  * [Shape](https://developer.apple.com/documentation/swiftui/shape) ⟩&#x20;
    * [stroke(lineWidth:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(linewidth:\)) → <mark style="color:red;">**some Shape**</mark>
    * [stroke(style:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(style:\)) → <mark style="color:red;">**some Shape**</mark>
    * [stroke(\_:lineWidth:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(_:linewidth:\)) → <mark style="color:orange;">**some View**</mark> (stroke with a [`ShapeStyle`](https://developer.apple.com/documentation/swiftui/shapestyle))
    * [.stroke(\_:style:)](https://developer.apple.com/documentation/swiftui/shape/stroke\(_:style:\)) → <mark style="color:orange;">**some View**</mark>.
      {% endtab %}

{% tab title="📗 參考" %}

* Design+Code ⟩ [Shape, Stroke and Blend Mode](https://designcode.io/swiftui-ios15-shape-stroke-blend-mode)
  {% endtab %}

{% tab title="🗣 討論" %}

* [SwiftUI: How to draw filled and stroked shape?](https://stackoverflow.com/a/60425421/5409815)
  {% endtab %}
  {% endtabs %}