SwiftUI中如何为自定义Shape设置圆角端点？

问题背景 #

需要让自定义的Wave Shape显示与描边宽度匹配的圆角端点，尝试过手动添加椭圆但尺寸不符，使用StrokeStyle(lineCap: .round)也没有效果。

问题原因 #

1. 手动添加的椭圆会被stroke操作额外描边，实际显示尺寸为椭圆半径 + 线宽的一半，导致比预期大。
2. StrokeStyle(lineCap: .round)未生效，是因为自定义Path中包含独立的椭圆路径，波形线段的端点被椭圆覆盖，系统无法对线段端点应用lineCap样式。

解决方案 #

方案一：使用StrokeStyle的lineCap（推荐） #

移除Path中手动添加的椭圆，仅保留波形线段，通过StrokeStyle的lineCap: .round自动生成与线宽匹配的圆角端点。

修改后的Wave代码：

struct Wave: Shape {
    var strength: Double
    var frequency: Double
    var phase: Double
    var animatableData: AnimatablePair<Double, Double> {
        get { AnimatablePair(phase, strength) }
        set {
            self.phase = newValue.first
            self.strength = newValue.second
        }
    }

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

        let width = Double(rect.width)
        let height = Double(rect.height)
        let midHeight = height / 2
        let wavelength = width / frequency

        let firstX = 0.0
        let firstRelativeX = firstX / wavelength
        let firstSine = sin(firstRelativeX + phase)
        let firstY = strength * firstSine + midHeight

        path.move(to: CGPoint(x: firstX, y: firstY))

        for x in stride(from: 0.0, through: width, by: 1) {
            let relativeX = x / wavelength
            let sine = sin(relativeX + phase)
            let y = strength * sine + midHeight
            path.addLine(to: CGPoint(x: x, y: y))
        }

        return path
    }
}

使用方式：

Wave(strength: 50.0, frequency: 30, phase: 0)
    .stroke(Color.white, style: StrokeStyle(lineWidth: 5.0, lineCap: .round))

系统会自动在波形两端生成与线宽完全匹配的圆角端点，无需手动绘制椭圆。

方案二：改为填充式形状（适合复杂自定义端点） #

将波形与端点构建为闭合路径，使用fill代替stroke，避免描边叠加导致的尺寸偏差。

修改后的Wave代码：

struct Wave: Shape {
    var strength: Double
    var frequency: Double
    var phase: Double
    var lineWidth: Double // 统一控制粗细的参数
    var animatableData: AnimatablePair<Double, Double> {
        get { AnimatablePair(phase, strength) }
        set {
            self.phase = newValue.first
            self.strength = newValue.second
        }
    }

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

        let width = Double(rect.width)
        let height = Double(rect.height)
        let midHeight = height / 2
        let wavelength = width / frequency
        let circleRadius = lineWidth / 2

        // 计算起点和终点坐标
        let firstX = 0.0
        let firstRelativeX = firstX / wavelength
        let firstSine = sin(firstRelativeX + phase)
        let firstY = strength * firstSine + midHeight

        let lastX = width
        let lastRelativeX = lastX / wavelength
        let lastSine = sin(lastRelativeX + phase)
        let lastY = strength * lastSine + midHeight

        // 左端点椭圆
        path.addEllipse(in: CGRect(
            x: firstX - circleRadius,
            y: firstY - circleRadius,
            width: circleRadius * 2,
            height: circleRadius * 2
        ))

        // 绘制波形
        path.move(to: CGPoint(x: firstX, y: firstY))
        for x in stride(from: 0.0, through: width, by: 1) {
            let relativeX = x / wavelength
            let sine = sin(relativeX + phase)
            let y = strength * sine + midHeight
            path.addLine(to: CGPoint(x: x, y: y))
        }

        // 右端点椭圆
        path.addEllipse(in: CGRect(
            x: lastX - circleRadius,
            y: lastY - circleRadius,
            width: circleRadius * 2,
            height: circleRadius * 2
        ))

        return path
    }
}

使用方式：

Wave(strength: 50.0, frequency: 30, phase: 0, lineWidth: 5.0)
    .fill(Color.white)

此方式下，椭圆与波形的粗细由lineWidth统一控制，不会出现尺寸偏差。

内容的提问来源于stack exchange，提问作者batman