ios - 如何在 SwiftUI 中为一系列路径的形状绘制边框？

Question

我在 SwiftUI 中有一个自定义形状，它是一系列形成不同线条的 CGPoint。

我希望能够在每个单独的路径周围绘制一个边框，现在我唯一能想到的就是创建另一个形状，它采用原始 CGPoints 并为每个点添加 x,y 填充，但我想看看是否还有另一个可能是我找不到的内置方式。

例如，我的形状是

      -----
           |
           |

我想添加一个边框形状，这样我就可以检测到某人何时处于边界中，其中 # 表示原始路径周围的新可能形状。

     ######## 
     #----- #
      ######
          #|#
          #|#
           #

有没有办法实现这个内置的？

编辑：我目前正在考虑绘制边框的代码，很早，但给出了我在想的要点

struct DrawShapeBorder: Shape {
    var points: [CGPoint]

    func path(in rect: CGRect) -> Path {
        var path: Path = Path()

        guard let startingPoint = points.first else {
            return path
        }

        // go up
        let upStartingPoint = CGPoint(x: startingPoint.x, y: startingPoint.y + 5)
        path.move(to: upStartingPoint)

        for pointLocation in points {
            
            path.addLine(to: pointLocation)
        }

        return path
    }
}

标签： iosswiftui

Answer 1

正如@Evergreen在评论中所建议的那样，您可以使用stroke修饰符...但棘手的是您只能应用其中一个，因此您不能这样做.stroke().stroke().stroke()，不像.shadow().shadow().shadow().

但是，您可以通过使用ZStack包含 2 个形状的副本，然后为每个副本添加不同的笔触来解决此问题。

struct ContentView: View {
    var body: some View {
        DrawShapeBorder(points: [
            CGPoint(x: 100, y: 150),
            CGPoint(x: 300, y: 100),
            CGPoint(x: 300, y: 200),
            CGPoint(x: 100, y: 200)
        ])
        .stroked()
    }
}
struct DrawShapeBorder: Shape {
    
    /// add the double border
    func stroked() -> some View {
        ZStack {
            self.stroke(Color.red, style: StrokeStyle(lineWidth: 20, lineCap: .round, lineJoin: .round))
            self.stroke(Color.white, style: StrokeStyle(lineWidth: 10, lineCap: .round, lineJoin: .round))
        }
    }
    
    var points: [CGPoint]
    
    func path(in rect: CGRect) -> Path {
        var path: Path = Path()
        
        guard let startingPoint = points.first else {
            return path
        }
        
        // go up
        let upStartingPoint = CGPoint(x: startingPoint.x, y: startingPoint.y + 5)
        path.move(to: upStartingPoint)
        
        for pointLocation in points {
            path.addLine(to: pointLocation)
        }
        
        return path
    }
}

结果：