Question

对于某些理由，在我的SwiftUI应用中，我需要使用带有CGAffineTransform和rotationAngle属性的transformEffect修饰符。但是结果是这样的：

如何将旋转角度的锚点设置到箭头图像的中心？我在文档中看到我们可以使用CGPoint吗？

我的代码：

import SwiftUI
import CoreLocation

struct Arrow: View {

  var locationManager = CLLocationManager()
  @ObservedObject var heading: LocationManager = LocationManager()

  private var animationArrow: Animation {
    Animation
      .easeInOut(duration: 0.2)
  }

  var body: some View {
    VStack {
      Image("arrow")
        .resizable()
        .aspectRatio(contentMode: .fit)
        .frame(width: 300, height: 300)
        .overlay(RoundedRectangle(cornerRadius: 0)
        .stroke(Color.white, lineWidth: 2))
        .animation(animationArrow)
        .transformEffect(
        CGAffineTransform(rotationAngle: CGFloat(-heading.heading.degreesToRadians))
          .translatedBy(x: 0, y: 0)
        )

      Text(String(heading.heading.degreesToRadians))
        .font(.system(size: 30))
        .fontWeight(.light)
    }
  }
}

Answer 1

如果要使用变换矩阵，则需要平移，旋转和平移。但是您可以使用锚点执行rotationEffect。请注意默认锚点是中心。我只是明确地包含了它，因此，如果您想将锚定旋转到其他位置，它会起作用。

锚点在UnitPoint中指定，这意味着坐标为0到1。0.5表示中心。

struct ContentView: View {
    @State private var angle: Double = 0

    var body: some View {
        VStack {
            Rectangle().frame(width: 100, height: 100)
                .rotationEffect(Angle(degrees: angle), anchor: UnitPoint(x: 0.5, y: 0.5))

            Slider(value: $angle, in: 0...360)
        }
    }
}

使用矩阵的相同效果较难看，但也可以：

struct ContentView: View {
    @State private var angle: Double = 0

    var body: some View {
        VStack {
            Rectangle().frame(width: 100, height: 100)
                .transformEffect(
                    CGAffineTransform(translationX: -50, y: -50)
                        .concatenating(CGAffineTransform(rotationAngle: CGFloat(angle * .pi / 180)))
                        .concatenating(CGAffineTransform(translationX: 50, y: 50)))

            Slider(value: $angle, in: 0...360)
        }
    }
}

如何使用CGAffineTransform将旋转角度的锚点更改为中心？

1 个答案: