在SwiftUI中为圆角矩形创建均匀分布的点状轮廓

Question

编辑：在代码示例中，虚线长度为10是随意设定的，实际上虚线长度应设置为看起来合适的值。

假设在SwiftUI中，您想要创建一个具有点状轮廓作为“添加项目提示”的自定义列表项。

可以采用如下方式使用.strokeBorder：

struct ContentView: View {
    
    let items = ["a", "b", "c"]
    @State var itemsEmpty = false
    
    var body: some View {
        Text("toggle")
            .onTapGesture {
                itemsEmpty.toggle()
            }
        VStack {
            Spacer()
            if !itemsEmpty {
                List(items, id: \.self) {item in
                    Text(item)
                }
            } else {
                // 创建“添加项目提示”视图
                List {
                    Text("ADD")
                        .listRowBackground(
                            RoundedRectangle(cornerRadius: 15)
                                .strokeBorder(style: StrokeStyle(lineWidth: 4, dash: [10]))
                        )
                }
            }
            Spacer()
        }
        .padding()
    }
}

这段代码会产生以下效果：
https://static.stackoverflow.fun/LApCj.png

这个技术在苹果官方的某个示例应用中有使用，但我对此不满意，因为线条（可以理解地）并未均匀分布，并且在圆角矩形的连接处出现了不美观的截断现象。

我想到的解决方法也都不够理想：

A) 采用两个对称图形来构建视图……（但这仍然会导致截断，只是这次截断会是对称的）。

B) 创造一种类似“太阳光芒”的放射状渐变，并以某种方式堆叠两个圆角矩形，模拟出点状轮廓的效果……（但由于所有“光芒”都从单个中心点发出，这些线条的“起点和终点”将不会与轮廓路径垂直）。

C) 使用squircle（这里选择squircle是因为我认为当superellipse呈矩形时外观较差）的参数方程绘制路径，然后根据t = 2 * (pi) / 某除数确定分辨率，在路径上绘制间歇性线条作为虚线。问题在于，经过拉伸处理后的squircle形状会变成分段函数，因此无法直接通过t变量驱动。即使能够驱动，由于一些显而易见但难以言表的原因，虚线的大小也不会保持一致。

那么，如何才能有效地实现这样一个带有均匀点状轮廓的列表项呢？

Satpal · Answer

在 SwiftUI 中，虚线不会被截断的条件是路径（形状的周长）的长度是虚线尺寸的整数倍。因此，您需要根据周长动态调整虚线的尺寸。您可以参考以下资源来计算参数曲线和非参数曲线的弧长：

这个链接介绍了如何计算参数曲线的弧长。
这个链接讲解了如何计算非参数曲线的弧长。

如果直接整合上述方法过于复杂，还可以考虑计算构成底层 CGPath 的各个 CGPathElement 的长度。有关如何操作，请参阅以下资源：

这个 Gist 示例，尽管它是用 Swift 2 编写的；
或者查阅这个仓库来了解如何计算贝塞尔路径的长度。

对于带有圆角半径的矩形，只需将直线部分和圆形部分的长度相加即可得到其周长。

.listRowBackground(
    GeometryReader { geo in
        let strokeWidth: CGFloat = 4.0
        let radius: CGFloat = 15.0
        let insettedDiameter = radius * 2 - strokeWidth
        let desiredDash: CGFloat = 10.0
        
        // 考虑到 strokeBorder 的内嵌效果，或者仅使用 stroke 替代 strokeBorder 简化问题
        let perimeter = (geo.size.width - strokeWidth / 2 - insettedDiameter) * 2 + // 水平直线边
                        (geo.size.height - strokeWidth / 2 - insettedDiameter) * 2 + // 垂直直线边
                        (insettedDiameter * .pi) // 圆形部分

        // 寻找满足以下条件的 adjustedDash：
        // - 周长 perimeter 是 adjustedDash 的整数倍
        // - adjustedDash 大于或等于期望的虚线长度 desiredDash
        let floored = floor(perimeter / desiredDash)
        let adjustedDash = (perimeter - desiredDash * floored) / floored + desiredDash
        
        RoundedRectangle(cornerRadius: radius)
            .strokeBorder(style: StrokeStyle(lineWidth: strokeWidth, dash: [adjustedDash]))
    }
)

以上代码示例展示了一个列表行背景，其中包含了动态调整后的虚线圆角矩形。输出结果如下图所示：

Heinzi · Answer

对于对此感兴趣的人：

这是一个可重用的替代版本，其中不是定义期望的虚线长度，而是设置期望的虚线数量。

此外，它还避免了出现奇数个虚线的问题。

struct DottedRoundedRectangle: View {
    
    enum BorderPosition {
        case inset, centered
    }
    
    let evenNumberOfDashes: Int // 期望的偶数个虚线
    let color: Color
    let strokeWidth: Double // 边框宽度
    let radius: Double // 圆角半径
    let borderPosition: BorderPosition // 边框位置类型
    
    private var insetDistance: Double {
        switch borderPosition {
        case .centered:
            return 0.0
        case .inset:
            return strokeWidth / 2.0
        }
    }
    
    var body: some View {
        GeometryReader { geo in
            let w = geo.size.width
            let h = geo.size.height
            
            // 奇数个虚线会导致问题——在连接点处会出现连续的虚线
            let adjustedEvenNumDashes = evenNumberOfDashes + (evenNumberOfDashes % 2)
            
            let horizontalSideLength = (w - (2 * insetDistance)) - (2 * (radius - insetDistance))
            let verticalSideLength = (h - (2 * insetDistance)) - (2 * (radius - insetDistance))
            let cornerLength = Double.pi/2 * (radius - insetDistance)
            
            let perimeter = (horizontalSideLength * 2) + (verticalSideLength * 2) + (cornerLength * 4)
            
            let dashLength: Double = perimeter/Double(adjustedEvenNumDashes)
                    
            switch borderPosition {
            case .inset:
                RoundedRectangle(cornerRadius: radius)
                    .fill(Material.ultraThin.color) // 假设Material.ultraThin是一个预定义的颜色
                    .strokeBorder(style: StrokeStyle(lineWidth: strokeWidth, dash: [dashLength]))
                    .foregroundColor(color)
            case .centered:
                RoundedRectangle(cornerRadius: radius)
                    .fill(Material.ultraThin.color)
                    .stroke(color, style: StrokeStyle(lineWidth: strokeWidth, dash: [dashLength]))
            }
        }
    }
}