🌀StrokeStyle

• cap : 線頭的部分

• join : 線轉彎時的連接方式

• dash : 虛線樣式

• width : 線寬

🌀 StrokeStyle

import SwiftUI

public extension StrokeStyle {
    
    /// # Line Cap
    /// 線頭的表現方式：
    /// - `.butt`：平頭。(⭐️ 預設值)
    /// - `.round`：圓頭。
    /// - `.square`：方頭。
    /// ## ⚠️ 注意：
    /// - 除了 `.butt` 之外，其他兩種都會突出線頭外‼️
    /// - Parameters:
    ///   - cap: 線頭的表現方式，有 `.butt`、`.round` 或 `.square` 三種。
    public func lineCap(_ cap: CGLineCap) -> StrokeStyle {
        var style = self
        style.lineCap = cap
        return style
    }
    
    /// # Line Join
    /// 線的銜接方式：
    /// - `.miter`：用「尖角」的方式銜接。(⭐️ 預設值)
    /// - `.bevel`：把尖角「削平」。
    /// - `.round`：用「圓角」的方式。
    /// - Parameters:
    ///   - join: 線的銜接方式，有 `.miter`、`.bevel`、`.round` 三種。
    public func lineJoin(_ join: CGLineJoin) -> StrokeStyle {
        var style = self
        style.lineJoin = join
        return style
    }
    
    /// # Line Width
    public func lineWidth(_ width: CGFloat) -> StrokeStyle {
        var style = self
        style.lineWidth = width
        return style
    }
    
    /// # Dash
    /// 虛線的樣式。例如：
    /// - `[10, 5]`：代表 `10 points` 畫線，`5 points` 空白。
    /// - `style.dash([10, 5])`
    public func dash(_ dash: [CGFloat]) -> StrokeStyle {
        var style = self
        style.dash = dash
        return style
    }
    
    /// Example: `style.dash(10, 5)`
    public func dash(_ dash: CGFloat...) -> StrokeStyle {
        self.dash(dash)
    }
    
}

💈 範例

⬆️ 需要： Vector2D, .watermark()

import SwiftUI

// 設計圖尺寸
let s: CGFloat = 100          // 邊長
let w: CGFloat = 40           // 線寬
let d = s + w                 // 總寬度 = 邊長 + 線頭可能突出的部分

// 設計圖頂點
let p1 = CGPoint(w, w) * 0.5  // 起點    // ⭐️ required: 🅿️ Vector2D
let p2 = p1 + [s, 0]          // 轉折點
let p3 = p2 + [0, s]          // 終點

// 設計圖畫線樣式 (先設定寬度)
let style = StrokeStyle().lineWidth(w)

// 設計圖線條路線
let path = Path { p in
    p.move   (to: p1)
    p.addLine(to: p2)
    p.addLine(to: p3)
}

// 設計圖
struct LineStyle: View {
    
    // 可設定「線條樣式」
    let style: StrokeStyle
    // LineStyle(strokeStyle)
    init(_ s: StrokeStyle) { self.style = s }
    
    // 設計圖內容
    var body: some View {
        ZStack {
            
            // 1. 先將設計路線以「線條加寬樣式」加邊線，然後著色。
            path
                .strokedPath(style)        // ⭐️ still a `Path`
                .foregroundColor(.pink)
                .frame(width: d, height: d)
                
            // 2. 畫「設計圖路線」本身
            path
                .stroke()                  // ⭐️ a `Shape`
                .foregroundColor(.white)
                .frame(width: d, height: d)
                
            // 3. 描出「加寬的邊線」
            path
                .strokedPath(style)
                .stroke(lineWidth: 2)
                .foregroundColor(.black)
                .frame(width: d, height: d)
            
        } // container (ZStack)
            .background(Rectangle().opacity(0.6))
    }
}

struct ContentView: View {
    var body: some View {
        VStack {
            
            // Line Join
            Text("Line Join").fontWeight(.bold)
            HStack {
                LineStyle(style.lineJoin(.miter)) // ⭐️ default
                    .watermark("⭐️miter", .bottomLeading)
                LineStyle(style.lineJoin(.bevel))
                    .watermark("bevel", .bottomLeading)
                LineStyle(style.lineJoin(.round)) 
                    .watermark("round", .bottomLeading)
            }
                
            // Line Cap
            Text("Line Cap").fontWeight(.bold)
            HStack {
                LineStyle(style.lineCap(.butt))   // ⭐️ default
                    .watermark("⭐️butt", .bottomLeading)
                LineStyle(style.lineCap(.square))
                    .watermark("square", .bottomLeading)
                LineStyle(style.lineCap(.round))
                    .watermark("round", .bottomLeading)
            }
            
        } // container (VStack)
            .padding()
            .background(Color.gray)
            .shadow(color: Color.black.opacity(0.8), radius: 4, x: 4, y: 4)
    }
}

💈其他

• 💈 MarchingAnts

📘 手冊

• SwiftUI ⟩ StrokeStyle

📗 參考

• How to create a marching ants border effect - Hacking with Swift

• SwiftUI basic Shape operations - Sarun

相依套件

• .watermark()

• 🅿️ Vector2D