ios 绕过小路的拐角

2jcobegt 于 2023-06-25 发布在 iOS

关注(0)|答案(1)|浏览(101)

我在SwiftUI中创建了一个表单。有一个地方我绕不开。你能帮忙吗？
这是我的代码：

struct BannerShape: Shape {
    func path(in rect: CGRect) -> Path {
        return Path { path in
            path.move(to: .zero)
            path.addLine(to: CGPoint(x: 0, y: 100))
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 100))
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 0))
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width / 2 + 48, y: 0))
            path.addCurve(to: CGPoint(x: UIScreen.main.bounds.width / 2 - 48, y: 0),
                          control1: CGPoint(x: UIScreen.main.bounds.width / 2 + 80, y: 105),
                          control2: CGPoint(x: UIScreen.main.bounds.width / 2 - 80, y: 105))
            path.addLine(to: .zero)
            path.closeSubpath()
        }
    }
}

在我的预览中：

struct TabBarBackgroundView_Previews: PreviewProvider {
    
//    @State static var selectedTabPreview: Int = 0
    
    static var previews: some View {
//        TabBarBackgroundView(selectedTab: $selectedTabPreview)
        
        BannerShape()
            .cornerRadius(15, corners: [.topLeft, .topRight])
            .previewLayout(.sizeThatFits)
            .frame(width: UIScreen.main.bounds.width, height: 100)
            .padding()
    }
}

结果：

我想把圆附近的两个角弄圆，因为它形成一个点。
我还没找到能做这个的东西。
我就是这么试的：

struct MyShape : Shape {
    func path(in rect: CGRect) -> Path {
        
        return Path { path in
            path.move(to: .zero)
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width / 2 - 48, y: 0))
            
            path.addArc(center: CGPoint(x: UIScreen.main.bounds.width / 2 - 48, y: 10),
                        radius: 10,
                        startAngle: .degrees(-90),
                        endAngle: .degrees(0),
                        clockwise: false)
            
            path.addCurve(to: CGPoint(x: UIScreen.main.bounds.width / 2 + 48, y: 0),
                          control1: CGPoint(x: UIScreen.main.bounds.width / 2 - 80, y: 105),
                          control2: CGPoint(x: UIScreen.main.bounds.width / 2 + 80, y: 105))
                        
            path.addArc(center: CGPoint(x: UIScreen.main.bounds.width / 2 + 48, y: 10),
                        radius: 10,
                        startAngle: .degrees(-90),
                        endAngle: .degrees(-180),
                        clockwise: true)
            
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 0))
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 100))
            path.addLine(to: CGPoint(x: 0, y: 100))
            path.addLine(to: .zero)
            path.closeSubpath()
        }
    }
}

结果呢...

ios

来源：https://stackoverflow.com/questions/76445662/round-the-corner-of-a-path

1条答案

按热度按时间

gev0vcfq1#

Soooo close：）
第一个.addArc的center.x位于：

UIScreen.main.bounds.width / 2 - 48

你把第二个.addArc的center.x放在：

UIScreen.main.bounds.width / 2 + 48

这是合乎逻辑的
但是，当添加半径为10的第一个圆弧时，四曲线x将从10-points开始（向右）...所以，你需要把四曲线10-points短（向左）：

// need to subtract an additional 10-points
//  for the 10-point radius
path.addCurve(to: CGPoint(x: UIScreen.main.bounds.width / 2 + (48 - 10), y: 10),
              control1: CGPoint(x: UIScreen.main.bounds.width / 2 - 80, y: 105),
              control2: CGPoint(x: UIScreen.main.bounds.width / 2 + 80, y: 105))

而且，你的第二个.addArc也需要clockwise: false（我认为SwiftUI顺时针很古怪，但你可以在这里找到解释：https://stackoverflow.com/a/57226474/6257435）
下面是经过这些修改的代码：

struct MyShape : Shape {
    func path(in rect: CGRect) -> Path {
        
        return Path { path in
            path.move(to: .zero)
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width / 2 - 48, y: 0))

            path.addArc(center: CGPoint(x: UIScreen.main.bounds.width / 2 - 48, y: 10),
                        radius: 10,
                        startAngle: .degrees(-90),
                        endAngle: .degrees(0),
                        clockwise: false)

            // need to subtract an additional 10-points
            //  for the 10-point radius
            path.addCurve(to: CGPoint(x: UIScreen.main.bounds.width / 2 + (48 - 10), y: 10),
                          control1: CGPoint(x: UIScreen.main.bounds.width / 2 - 80, y: 105),
                          control2: CGPoint(x: UIScreen.main.bounds.width / 2 + 80, y: 105))

            path.addArc(center: CGPoint(x: UIScreen.main.bounds.width / 2 + 48, y: 10),
                        radius: 10,
                        startAngle: .degrees(-180),
                        endAngle: .degrees(-90),
                        clockwise: false)

            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 0))
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 100))
            path.addLine(to: CGPoint(x: 0, y: 100))
            path.addLine(to: .zero)
            path.closeSubpath()
        }

    }
    
}

我们得到这个：

如果你使用.addArc(tangent1End:tangent2End:radius:)，你可以得到更平滑的曲线：

struct MyShape2 : Shape {
    func path(in rect: CGRect) -> Path {
        
        return Path { path in
            path.move(to: .zero)
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width / 2 - 48, y: 0))
            
            var pt1: CGPoint = .zero
            var pt2: CGPoint = .zero
            
            pt1 = .init(x: UIScreen.main.bounds.width / 2 - 48 + 10, y: 0)
            pt2 = .init(x: UIScreen.main.bounds.width / 2 - 48 - 10, y: 105)
            path.addArc(tangent1End: pt1, tangent2End: pt2, radius: 10)
            
            let p3 = path.currentPoint!
            path.addCurve(to: CGPoint(x: UIScreen.main.bounds.width - p3.x, y: p3.y),
                          control1: CGPoint(x: UIScreen.main.bounds.width / 2 - 80, y: 105),
                          control2: CGPoint(x: UIScreen.main.bounds.width / 2 + 80, y: 105))
            
            pt1 = .init(x: UIScreen.main.bounds.width / 2 + 48 - 10, y: 0)
            pt2 = .init(x: UIScreen.main.bounds.width / 2 + 48 + 10, y: 0)
            path.addArc(tangent1End: pt1, tangent2End: pt2, radius: 10)
            
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 0))
            path.addLine(to: CGPoint(x: UIScreen.main.bounds.width, y: 100))
            path.addLine(to: CGPoint(x: 0, y: 100))
            path.addLine(to: .zero)
            path.closeSubpath()
        }
        
    }
    
}

这给了我们这个结果：

赞(0）回复(0）举报 2023-06-25

我来回答

ios 绕过小路的拐角

1条答案

相关问题

热门标签

最新问答