[SUI] Transformaciones

#swiftui #swift #ios

Las siguientes herramientas permiten modificar EL CONTENIDO de una vista:

Desplazamiento

offset(x:y:): Desplaza en x y y.

struct ContentView: View {
  var body: some View {
    Image("img1")
      .resizable()
      .scaledToFit()
      .frame(width: 250, height: 300)
      .offset(x: 80)
  }
}

Rotación

View.rotationEffect(_:anchor:): Rota en 2D sobre un punto.
View.rotation3DEffect(_:axis:anchor:)
Shape.rotation(_:anchor:)

struct ContentView: View {
  var body: some View {
    Image("img1")
      .resizable()
      .scaledToFit()
      .frame(width: 250, height: 300)
      .rotation3DEffect(.degrees(30), axis: (x: 0.5, y: 1, z: 0))
  }
}

struct ContentView: View {
  var body: some View {
    RoundedRectangle(cornerRadius: 20)
      .rotation(.degrees(45))
      .fill(.red)
      .frame(width: 100, height: 200)
  }
}

Escalar una figura

Shape.scale(_:anchor:)

struct ContentView: View {
  var body: some View {
    HStack {
      RoundedRectangle(cornerRadius: 20)
        .rotation(.degrees(45))
        .fill(.red)
        .frame(width: 100, height: 200)
        .padding(.trailing, 90)

      RoundedRectangle(cornerRadius: 20)
        .rotation(.degrees(45))
        .scale(x: -1, y: 1)
        .fill(.red)
        .frame(width: 100, height: 200)
    }
  }
}

Recortar

clipShape(_:style:)

struct ContentView: View {
  var body: some View {
    Image("img1")
      .resizable()
      .scaledToFill()
      .frame(width: 350, height: 200)
      .clipShape(Circle())
      .border(.blue)
  }
}

Notar que a pesar de que el contenido del Image fue recortado con un Circle, el componente Image igual sigue siento un rectángulo de 350x200. Por esta razón, al hacer .border(.blue) se traza un borde rectangular alrededor del Image. Por esta razón, si se quiere hacer un borde sobre la imagen recortada se debe pintar un overlay con la misma figura que se usó para recortar:

struct ContentView: View {
  var body: some View {
    Image("img1")
      .resizable()
      .scaledToFill()
      .frame(width: 350, height: 200)
      .clipShape(Circle())
      .overlay {
        Circle().stroke(.blue, lineWidth: 10)
      }
  }
}