ios - 如何围绕其中心旋转 SwiftUI Path？

Question

我有以下简单的 SwiftUI Path 箭头，我希望它绕其中心旋转:

@State var heading: Double = 0.0
@State var xOffset = 0.0
@State var yOffset = 0.0
var body: some View {
    TabView {
        NavigationStack {
            Path { path in
                path.move(to: CGPoint(x: xOffset, y: yOffset))
                path.addLine(to: CGPoint(x: xOffset + 0, y: yOffset + 20))
                path.addLine(to: CGPoint(x: xOffset + 50, y: yOffset + 0))
                path.addLine(to: CGPoint(x: xOffset + 0, y: yOffset - 20))
                path.addLine(to: CGPoint(x: xOffset + 0, y: yOffset + 0))
            }
            .stroke(lineWidth: 3)
            .foregroundColor(.red)
            .rotationEffect(Angle(degrees: heading), anchor: .center)
            .transformEffect(CGAffineTransform(translationX: 80, y: 80))

            Slider(value: $heading, in: 0...360, step: 30)
        }
    }
}

但是它不会绕其中心旋转:

如何围绕其中心(或围绕其边界上的任何其他相对点)旋转Path？

Answer 1

Path View 贪婪地占用了所有可用空间，因此该 View 比您想象的要大得多，而且它的中心也很远。因此，当您旋转路径时，它就会移出屏幕。您可以通过将 .background(Color.yellow) 添加到 Path View 来看到这一点。

如果将其设为另一个 View (Color.clear) 的 .overlay，然后再管理箭头的旋转会更容易旋转该 View 。您可以在调整时使用 Color.yellow 使 View 可见，然后相对于其父 View 定位箭头。这样做的好处是，当您旋转父 View 时，箭头将粘在其上并按可预测的方式旋转。

struct ContentView: View {
    @State var heading: Double = 0.0

    var body: some View {
        TabView {
            NavigationStack {
                Color.clear
                    .frame(width: 60, height: 60)
                    .overlay (
                        Path { path in
                            path.move(to: CGPoint(x: 0, y: 0))
                            path.addLine(to: CGPoint(x: 0, y: 20))
                            path.addLine(to: CGPoint(x: 50, y: 0))
                            path.addLine(to: CGPoint(x: 0, y: -20))
                            path.addLine(to: CGPoint(x: 0, y: 0))
                        }
                        .stroke(lineWidth: 3)
                        .foregroundColor(.red)
                        .offset(x: 5, y: 30)
                    )
                    .rotationEffect(Angle(degrees: heading), anchor: .center)
                
                Slider(value: $heading, in: 0...360, step: 30)
            }
        }
    }
}

---

如何让我的代码正常工作？

您需要为您的Path View 提供合理大小的框架。在这里我添加了 .frame(width: 60, height: 60) 它足够大以容纳您的箭头路径。

既然您已经定义了xOffset和yOffset，请使用它们在其 View 内移动路径图形。使用 .background(Color.yellow) 暂时向路径 View 添加背景，然后调整 xOffset 和 yOffset 直到箭头绘制在那个观点。然后您可以删除此 .background。

这与上面介绍的覆盖方法具有相同的效果:

struct ContentView: View {
    @State var heading: Double = 0.0
    @State var xOffset = 5.0   // here
    @State var yOffset = 30.0  // here

    var body: some View {
        TabView {
            NavigationStack {
                Path { path in
                    path.move(to: CGPoint(x: xOffset, y: yOffset))
                    path.addLine(to: CGPoint(x: xOffset + 0, y: yOffset + 20))
                    path.addLine(to: CGPoint(x: xOffset + 50, y: yOffset + 0))
                    path.addLine(to: CGPoint(x: xOffset + 0, y: yOffset - 20))
                    path.addLine(to: CGPoint(x: xOffset + 0, y: yOffset + 0))
                }
                .stroke(lineWidth: 3)
                .foregroundColor(.red)
                // .background(Color.yellow)
                .frame(width: 60, height: 60)  // here
                .rotationEffect(Angle(degrees: heading), anchor: .center)
                //.transformEffect(CGAffineTransform(translationX: 80, y: 80))

                Slider(value: $heading, in: 0...360, step: 30)
            }
        }
    }
}