Site icon AppTractor

Поваренная книга SwiftUI: изображения и иконки — Часть 3

AppTractor

Создание кастомных форм для изображений в SwiftUI

SwiftUI предоставляет различные способы настройки и кастомизации изображений в вашем приложении. Помимо изменения размера, масштабирования и обрезки изображений, вы также можете создать свою форму для изображения с помощью структур SwiftUI Path и Shape.

Сначала нужно создать пользовательскую форму, которая будет соответствовать желаемой форме. Для этого в SwiftUI можно использовать структуру Path, которая позволяет задать серию точек и линий для создания формы. Затем вы можете использовать эту форму для маскирования изображения и создания нужного эффекта.

Например, допустим, вы хотите создать изображение в виде звезды в своем приложении. Это можно сделать, создав пользовательскую фигуру с помощью структуры Path, как показано ниже:

struct StarShape: Shape {
  let points: Int
  let smoothness: CGFloat

  func path(in rect: CGRect) -> Path {
    assert(points >= 2, "A star must have at least 2 points")

    let center = CGPoint(x: rect.width / 2, y: rect.height / 2)
    let outerRadius = min(rect.width, rect.height) / 2
    let innerRadius = outerRadius * smoothness

    let path = Path { path in
      let angleIncrement = .pi * 2 / CGFloat(points)
      let rotationOffset = CGFloat.pi / 2

      for point in 0..<points {
        let angle = angleIncrement * CGFloat(point) - rotationOffset
        let tippedAngle = angle + angleIncrement / 2

        let outerPoint = CGPoint(x: center.x + cos(angle) * outerRadius, y: center.y + sin(angle) * outerRadius)
        let innerPoint = CGPoint(x: center.x + cos(tippedAngle) * innerRadius, y: center.y + sin(tippedAngle) * innerRadius)

        if point == 0 {
          path.move(to: outerPoint)
        } else {
          path.addLine(to: outerPoint)
        }

        path.addLine(to: innerPoint)
      }

      path.closeSubpath()
    }
    return path
  }
}

В приведенном выше примере кода мы определяем структуру StarShape, соответствующую протоколу Shape. Эта кастомная форма принимает параметр CGRect и возвращает структуру Path, которая описывает круглую форму. Для этого мы используем метод path(in:) протокола Shape, который создает структуру Path и добавляет соответствующие точки и линии для описания нужной формы.

Эту форму можно использовать для маскировки изображения и создания эффекта, как показано ниже:

struct ContentView: View {
  var body: some View {
    Image("TwoCapybaras")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .clipShape(StarShape(points: 5, smoothness: 0.4))
  }
}

Примечание: Если вы хотите опробовать примеры, вы можете скачать архив со всеми изображениями, использованными в этой статье, здесь.

Предварительный просмотр должен выглядеть следующим образом:

Создайте новый шейп с Path, а затем используйте его в качестве маски для изображения.

В приведенном выше примере кода мы загружаем изображение с помощью структуры Image и задаем ему изменяемые размеры и соотношение сторон. Затем мы добавляем модификатор clipShape, чтобы замаскировать изображение с помощью нашей формы StarShape. Это создает эффект изображения, похожего на звезду.

Как видите, с помощью структур SwiftUI Path и Shape можно создавать пользовательские формы для изображений и добавлять уникальные визуальные эффекты. Вы также можете экспериментировать с различными формами и эффектами, создавая и применяя свои собственные формы.

Добавление тени к изображению в SwiftUI

Добавление теней к изображениям может придать глубину и новое измерение пользовательскому интерфейсу. В SwiftUI можно добавить тень к изображению с помощью модификатора shadow.

Вот пример того, как добавить тень к изображению в SwiftUI:

struct ContentView: View {
  var body: some View {
    Image("CoolCat")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: 200, height: 200)
      .shadow(radius: 10)
  }
}

Ваш предварительный просмотр должен выглядеть следующим образом:

Модификатор SwiftUI добавляет тень к изображению.

В этом примере мы добавляем тень к изображению кошки. Модификатор resizable позволяет масштабировать изображение в соответствии с рамкой, ширину и высоту которой мы задали равными 200. Модификатор .aspectRatio(contentMode: .fit) сохраняет исходное соотношение сторон изображения. Модификатор shadow добавляет к изображению тень с радиусом 10 точек.

Настройка цвета и радиуса тени

Вы также можете настроить тень, изменив цвет, непрозрачность и смещение с помощью дополнительных параметров в модификаторе тени. Вот пример того, как можно настроить тень:

struct ContentView: View {
  var body: some View {
    Image("BirdDrinks")
      .resizable()
      .aspectRatio(contentMode: .fit)
      .frame(width: 300, height: 300)
      .shadow(color: .gray, radius: 20, x: 0, y: 2)
  }
}

Вот как это должно выглядеть в вашем Xcode:

Настройте тень с помощью параметров цвета и радиуса.

Вот что делает этот код:

Добавление теней к изображениям в SwiftUI — это простой способ улучшить пользовательский интерфейс вашего приложения. Модификатор тени можно настроить с помощью различных параметров, чтобы добиться желаемого эффекта.

Применение фильтра к изображению

Иногда нам нужно применить фильтры к изображениям, чтобы улучшить их внешний вид или повысить качество. SwiftUI может использовать встроенные фильтры Core Image для удобной работы с изображениями.

Вот пример применения фильтра к изображению в SwiftUI:

import SwiftUI
import CoreImage
import CoreImage.CIFilterBuiltins

struct ContentView: View {
  let image: Image

  init() {
    let uiImage = UIImage(named: "CoolCat") ?? UIImage()
    let filteredUIImage = ContentView.applySepiaFilter(to: uiImage)
    image = Image(uiImage: filteredUIImage)
  }

  var body: some View {
    image
      .resizable()
      .scaledToFit()
  }

  static func applySepiaFilter(to inputImage: UIImage) -> UIImage {
    guard let ciImage = CIImage(image: inputImage) else { return inputImage }

    let filter = CIFilter.sepiaTone()
    filter.inputImage = ciImage
    filter.intensity = 1.0

    // Get a CIContext
    let context = CIContext()

    // Create a CGImage from the CIImage
    guard let outputCIImage = filter.outputImage,
          let cgImage = context.createCGImage(outputCIImage, from: outputCIImage.extent) else {
      return inputImage
    }

    // Create a UIImage from the CGImage
    let outputUIImage = UIImage(cgImage: cgImage)

    return outputUIImage
  }
}

struct ContentView_Previews: PreviewProvider {
  static var previews: some View {
    ContentView()
  }
}

Предварительный просмотр должен выглядеть так:

Вы можете использовать фильтры CoreImage в SwiftUI.

Вот как работает этот код, начиная с метода init:

В общем, это представление SwiftUI будет отображать изображение с именем CoolCat из ресурсов приложения с примененным фильтром тона сепии. Если изображение не существует или фильтр по какой-то причине не может быть применен, будет отображено пустое изображение.

Варианты фильтров Core Image

Вот некоторые другие фильтры Core Image, которые можно попробовать:

Например, для создания фильтра гауссова размытия используется метод CIFilter.gaussianBlur(). Аналогично, для инверсии цвета используется метод CIFilter.colorInvert() и так далее.

Вы можете использовать любой из встроенных фильтров для манипулирования внешним видом изображения и создания потрясающих эффектов. С помощью фильтров мы можем улучшить визуальную привлекательность пользовательского интерфейса приложения.

← Предыдущая статья: Изображения и иконки — Часть 2

Источник

Exit mobile version