How to round ends of a custom shape in SwiftUI?

Question

I want the following shape to display rounded ends.

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 strokeWidth = 5.0
        let circleRadius = strokeWidth / 2

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

        // Left-end circle
        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))
        }


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

        // Right-end circle
        path.addEllipse(in: CGRect(
            x: lastX - circleRadius,
            y: lastY - circleRadius,
            width: circleRadius * 2,
            height: circleRadius * 2
        ))

        return path
    }
}

I have tried to achieve this by displaying circles at the ends but I've not been able to match the size of the circles to the line-width of the shape when stroked. For example, if I draw the shape as follows:

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

The circles appear larger than the wave stroke.

I also tried with StrokeStyle but it has no effect.

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

How can I achieve this?

Answer 1

The .round line cap style extends the line before making it round:

A line with a rounded end. Core Graphics draws the line to extend beyond the endpoint of the path. The line ends with a semicircular arc with a radius of 1/2 the line’s width, centered on the endpoint.

Therefore, if the end point of your line is right at the edge of the screen, the semicircle drawn will be outside of the bounds of the screen and be clipped.

You should add some padding to the Wave,

.padding(.horizontal, lineWidth / 2)

The padding can be smaller than lineWidth / 2 depending on which way the line is facing. lineWidth / 2 is the "worst case", where the line is facing a horizontal direction.