SwiftUI中如何将子视图约束在父视图边框范围内

问题背景 #

实现折线图绘制逻辑时，将y数组内的数值映射到x轴0、1、…、y.count-1的坐标位置，支持通过传入ymin、ymax参数控制图表缩放范围，核心实现代码如下：

import SwiftUI

struct LineGraph: Shape {
    let y: [Double]
    let ymin: Double
    let ymax: Double
    
    func path(in rect: CGRect) -> Path {
        // x轴坐标依次对应 0, 1, .., y.count-1
        let dx =  rect.width / CGFloat(y.count-1)

        let yrange = ymax - ymin
        let dy = rect.height / yrange
        let ycur = dy * (y[0]-ymin)
        
        var path = Path()
        path.move(to: CGPoint(x: 0, y: rect.height - ycur))
        for k in 1..<y.count {
            path.addLine(to: CGPoint(x: dx * CGFloat(k),
                                     y: rect.height - dy * (y[k]-ymin)))
        }
        
        return path
    }
}


struct ContentView: View {
    var body: some View {
        VStack {
            LineGraph(y: [8.0, 5.0, -2.0, -2.0, 3.0, 1.0],
                      ymin: -2.0,
                      ymax: 8.0)
            .stroke(.black)
        }
        .frame(width: 200, height: 300)
        .border(.red, width: 3)
            
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

异常表现 #

• 传入y值本身的极值ymin=-2.0、ymax=8.0初始化LineGraph时，绘制结果完全符合预期
• 传入ymin:0、ymax:5做缩放时，折线会超出父视图的红色边框，异常效果如下：
  

已尝试方案 #

• 对透明矩形调用.mask()修饰符做裁剪
• 将折线图叠加在矩形视图上限制绘制范围
  两种方案都没有达到预期效果。目前已知手动计算折线与y=ymax、y=ymin两条边界线的交点，再裁剪绘制路径可以解决问题，但希望找到掩码裁剪类更简便的实现方式。

解决方法 #

不需要手动计算路径交点，直接给折线图调用clipped()修饰符即可，系统会自动按照视图自身的frame边界裁剪所有超出范围的绘制内容，只需要新增一行代码：

LineGraph(y: [8.0, 5.0, -2.0, -2.0, 3.0, 1.0],
          ymin: 0,
          ymax: 5.0)
.stroke(.black)
.clipped() // 新增此行即可裁剪超出边框的折线部分

如果需要自定义裁剪轮廓（比如给图表增加圆角），可以替换为clipShape(_:style:)修饰符，传入目标形状即可：

// 示例：将折线图裁剪为带8pt圆角的矩形
.clipShape(RoundedRectangle(cornerRadius: 8))

之前用.mask()没有生效，通常是因为掩码视图的布局没有和折线图的绘制边界严格对齐，clipped()直接基于当前视图的布局边界做硬裁剪，不需要额外对齐其他视图，是成本最低的实现方案。

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