更改带有特定边边框的函数以适应圆角半径？

Question

所以我有以下结构和视图扩展可以添加到任何视图，有什么想法可以修复下图中的视图角吗？

extension View {
    func border(width: CGFloat, edges: [Edge], color: Color) -> some View {
        overlay(EdgeBorder(width: width, edges: edges).foregroundColor(color))
    }
}

struct EdgeBorder: Shape {

    var width: CGFloat
    var edges: [Edge]

    func path(in rect: CGRect) -> Path {
        var path = Path()
        for edge in edges {
            var x: CGFloat {
                switch edge {
                case .top, .bottom, .leading: return rect.minX
                case .trailing: return rect.maxX - width
                }
            }

            var y: CGFloat {
                switch edge {
                case .top, .leading, .trailing: return rect.minY
                case .bottom: return rect.maxY - width
                }
            }

            var w: CGFloat {
                switch edge {
                case .top, .bottom: return rect.width
                case .leading, .trailing: return self.width
                }
            }

            var h: CGFloat {
                switch edge {
                case .top, .bottom: return self.width
                case .leading, .trailing: return rect.height
                }
            }
            path.addPath(Path(CGRect(x: x, y: y, width: w, height: h)))
        }
        return path
    }
}

我尝试将它附加到 VStack，如下所示：

VStack {
    // content
}
.clipShape(RoundedRectangle(cornerRadius: 20))
.border(width: 1, edges: [.leading, .bottom, .trailing], color: Color.black)

唯一的问题是它最终看起来像这样：

Answer 1

正如评论所说，裁剪不会改变初始矩形的绘制路径。将边框宽度更改为 0 应该会删除轮廓矩形。

Answer 2

问题出在你的 EdgeBorder 形状上。它只支持没有角的边界，它只是为最终路径的每条边添加一条线。要解决请尝试

初始化形状时再添加一个参数cornerRadius
修改算法以创建路径
```
c - c
|   |
c - c
```

仅当存在 2 条边时才启用转角。

    var width: CGFloat
    var edges: [Edge]
    var cornerRadius: CGFloat

    func path(in rect: CGRect) -> Path {
        //1. build new rect
        //2. build corners
        let path = UIBezierPath(roundedRect: newRect, byRoundingCorners: corners, cornerRadii: CGSize(width: cornerRadius, height: cornerRadius))
        return Path(path.cgPath)
    }

Answer 3

我用view这样把边框画圆了

                layerMinY
             O ----------- O
  layerMinX  |             | layerMaxX
             |             |
             O ----------- O
               layerMaxY

    self.myView.layer.borderWidth = 2
    self.myView.layer.borderColor = UIColor.black.cgColor
    self.myView.clipsToBounds = true
    self.myView.layer.cornerRadius = 10
    self.myView.layer.maskedCorners = [.layerMaxXMinYCorner, 
                                      .layerMaxXMaxYCorner]

看起来像这样：

更改带有特定边边框的函数以适应圆角半径？

Changing function with borders on specific sides to also be able to accommodate corner radius?

border

swift

swiftui