一种方法是使用四元曲线构建一个圆，每条曲线都有一点随机倾斜。当其中的几个是奠定了对方给出了相当令人信服的外观。然后可以将结果作为覆盖应用于视图：

struct ScribbledCircle: View {

    struct ApproximateCircle: Shape {
        private let maxSkew = 0.04
        private var randomSkew: CGFloat {
            CGFloat.random(in: -maxSkew...maxSkew)
        }
        func path(in rect: CGRect) -> Path {
            let w = rect.width
            let h = rect.height
            let xBegin = rect.minX + (w * randomSkew)
            let yBegin = rect.midY + (h * randomSkew)
            var path = Path()
            path.move(to: CGPoint(x: xBegin, y: yBegin))
            path.addQuadCurve(
                to: CGPoint(x: rect.midX + (w * randomSkew), y: rect.minY + (h * randomSkew)),
                control: CGPoint(x: rect.minX + ((w / 2) * randomSkew), y: rect.minY + ((h / 2) * randomSkew))
            )
            path.addQuadCurve(
                to: CGPoint(x: rect.maxX + (w * randomSkew), y: rect.midY + (h * randomSkew)),
                control: CGPoint(x: rect.maxX + ((w / 2) * randomSkew), y: rect.minY + ((h / 2) * randomSkew))
            )
            path.addQuadCurve(
                to: CGPoint(x: rect.midX + (w * randomSkew), y: rect.maxY + (h * randomSkew)),
                control: CGPoint(x: rect.maxX + ((w / 2) * randomSkew), y: rect.maxY + ((h / 2) * randomSkew))
            )
            path.addQuadCurve(
                to: CGPoint(x: xBegin, y: yBegin),
                control: CGPoint(x: rect.minX + ((w / 2) * randomSkew), y: rect.maxY + ((h / 2) * randomSkew))
            )
            path.closeSubpath()
            return path
        }
    }

    var body: some View {
        ZStack {
            ForEach(0..<5) { i in
                ApproximateCircle()
                    .stroke(lineWidth: 2)
                    .foregroundColor(.gray)
                    .rotationEffect(.degrees(Double(i) * 15))
            }
        }
    }
}

struct ContentView: View {
    var body: some View {
        Color.yellow
            .frame(width: 200, height: 200)
            .overlay(
                ScribbledCircle()
            )
    }
}

字符串

的数据
您可能已经注意到，旋转效果会套用至手绘圆，以便曲缐连接的点彼此都有偏移。当基础形状为方形时，此操作效果良好。对于非正方形，最好用同样的方法画一个潦草的圆，然后将其拉伸到所需的尺寸。可以将ScribbledCircle的主体更改为以下内容，以便通过这种方式支持所有形状：

var body: some View {
        GeometryReader { proxy in
            ZStack {
                ForEach(0..<5) { i in
                    ApproximateCircle()
                        .stroke(lineWidth: 2)
                        .foregroundColor(.gray)
                        .rotationEffect(.degrees(Double(i) * 15))
                }
            }
            .frame(
                width: min(proxy.size.width, proxy.size.height),
                height: min(proxy.size.width, proxy.size.height)
            )
            .scaleEffect(
                x: proxy.size.width / min(proxy.size.width, proxy.size.height),
                y: proxy.size.height / min(proxy.size.width, proxy.size.height),
                anchor: .topLeading
            )
        }
    }

型

的