You need to enable JavaScript to run this app.
优惠活动
大模型
产品
解决方案
定价
更多

如何在SwiftUI中实现直线与曲线的无缝平滑衔接?

问题:实现直线与曲线的无缝平滑衔接

当前效果

我正尝试让直线与曲线之间的衔接更加平滑,达到肉眼无法察觉的效果,以下是我的代码:

struct CustomShape: Shape {
    func path(in rect: CGRect) -> Path {
        var path = Path()

        // 设置分段数量
        let numberOfSegments = 5

        // 计算每段宽度以适配容器宽度
        let segmentWidth = rect.width / CGFloat(numberOfSegments - 1)

        // 调整起点到垂直居中位置
        let startY = rect.midY // 从容器垂直中点开始
        path.move(to: CGPoint(x: rect.minX, y: startY))

        // 绘制分段线条
        for i in 0..<numberOfSegments {
            let xOffset = CGFloat(i) * segmentWidth
            var yPoint = (i % 2 == 0) ? rect.minY : rect.maxY
            
            if i == numberOfSegments - 1 {
                yPoint = rect.midY
            }
            
            let nextPoint = CGPoint(x: rect.minX + xOffset, y: yPoint)
            
            // 绘制直线到下一个点
            path.addLine(to: nextPoint)

            // 准备绘制曲线
            if i < numberOfSegments - 1 {
                let curveControlPointYOffset: CGFloat = 50 // 较小的值实现更平缓的过渡
                let controlPointY = (i % 2 == 0) ? yPoint - curveControlPointYOffset : yPoint + curveControlPointYOffset
                
                // 调整控制点使曲线从直线平滑过渡
                let controlPointX = rect.minX + xOffset + segmentWidth / 2
                let controlPoint = CGPoint(x: controlPointX, y: controlPointY)
                
                // 绘制二次贝塞尔曲线到右侧点
                let rightPoint = CGPoint(x: rect.minX + xOffset + segmentWidth, y: yPoint)
                path.addQuadCurve(to: rightPoint, control: controlPoint)
            }
        }

        return path
    }
}

我期望实现的效果如下:
期望效果

内容的提问来源于stack exchange,提问作者kobi Brooks

相关产品推荐
方舟 Agent Plan

超全模态模型 × Harness 升级,最新支持 Deepseek-V4.1-Flash、GLM-5.3 系列、Doubao-Seedream-5.0-pro、Kimi-K3 (部分), 限时 9.9 元起

最近更新时间:2026.07.03 05:15:21