SwiftUI中Path绘制六边形显示为三角形？求原因及修复方法

问题原因 #

Hexagon2的路径坐标计算存在低级错误：y轴坐标未乘以容器高度height。

你定义的sideLength和sideLength2是0.2、0.8的比例值，但直接赋值给CGPoint的y属性时，相当于使用了0.2、0.8的绝对像素值（远小于容器高度200），导致左侧两个点(0, 0.2)和(0, 0.8)几乎重叠在左上角，右侧两个点(200, 0.8)和(200, 0.2)几乎重叠在右上角。最终路径被压缩成了三角形。

修复后的代码 #

只需给所有y轴的比例值乘以height，和第一个正常的Hexagon代码保持一致的坐标计算逻辑：

struct Hexagon2: View {
    var sideLength: CGFloat = 0.2
    var sideLength2: CGFloat {
        1 - sideLength
    }
    
    var body: some View {
        Path { path in
            let width: CGFloat = 200
            let height: CGFloat = 200
            
            path.move(to: CGPoint(x: width * 0.5, y: height * 0))
            path.addLine(to: CGPoint(x: width * 0, y: height * sideLength)) // 乘以height
            path.addLine(to: CGPoint(x: width * 0, y: height * sideLength2)) // 乘以height
            path.addLine(to: CGPoint(x: width * 0.5, y: height * 1))
            path.addLine(to: CGPoint(x: width * 1, y: height * sideLength2)) // 乘以height
            path.addLine(to: CGPoint(x: width * 1, y: height * sideLength)) // 乘以height
            
            path.closeSubpath()
        }
        .stroke(Color.blue, lineWidth: 10)
    }
}

额外建议 #

为避免这类坐标计算错误，可封装一个辅助方法简化比例坐标的生成：

func point(xRatio: CGFloat, yRatio: CGFloat, width: CGFloat, height: CGFloat) -> CGPoint {
    CGPoint(x: width * xRatio, y: height * yRatio)
}

调用时只需传入比例值，无需重复编写width *和height *，既能提升可读性，也能减少出错概率。

内容的提问来源于stack exchange，提问作者b.joe