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

Создание кастомных форм для изображений в 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:

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

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

• Image("BirdDrinks") создает представление Image с изображением под названием BirdDrinks. Это имя указывает на ресурс который должен существовать в вашем проекте.
• .resizable() делает изображение способным изменять размер. Без этого параметра изображение будет отображаться в исходных размерах.
• .aspectRatio(contentMode: .fit) гарантирует, что при изменении размера изображения сохранится его исходное соотношение сторон (отношение ширины к высоте). Параметр .fit означает, что изображение будет масштабировано так, чтобы вписаться в заданные границы, сохраняя при этом соотношение сторон. В результате все изображение будет видно без обрезания.
• .frame(width: 300, height: 300) задает размеры рамки вокруг изображения шириной и высотой 300 точек. Размер изображения будет изменен в соответствии с этими размерами, следуя правилам, установленным предыдущим модификатором .aspectRatio(contentMode: .fit).
• .shadow(color: .gray, radius: 20, x: 0, y: 2) добавляет эффект тени к изображению. Цвет тени — серый, радиус размытия — 20 точек, и она смещена на две точки по вертикали (по горизонтали смещения нет, так как x равен 0).

Добавление теней к изображениям в 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:

• Он загружает UIImage из пакета приложения с именем «CoolCat». Если это не удается, инициализируется пустой UIImage.
• Вызывает статическую функцию applySepiaFilter(to:), которая применяет фильтр сепии к загруженному изображению. Результат затем оборачивается в SwiftUI Image и сохраняется в image.
• Далее вы создаете статическую функцию applySepiaFilter(to:), которая:
  • Принимает на вход изображение UIImage.
  • Преобразует его в CIImage (представление изображения для обработки в Core Image).
  • Применяет к изображению фильтр сепии с помощью CIFilter.sepiaTone(). Интенсивность эффекта фильтра установлена на максимум (1,0).
  • Преобразует CIImage обратно в CGImage, а затем в UIImage.
  • Если ни одно из этих преобразований не работает, возвращается исходное, нефильтрованное изображение.

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

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

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

• gaussianBlur применяет к изображению гауссово размытие. Это часто используется для создания эффекта глубины резкости или эффектов размытия для подчеркивания фокуса.
• colorInvert инвертирует все цвета в изображении. Это полезно, когда нужно создать негатив существующего изображения.
• photoEffectMono применяет к изображению монохромный эффект, похожий на черно-белую фотографию. Его можно использовать для придания фотографиям эффекта старины или винтажа.
• pixellate применяет эффект пикселизации, заставляя изображение выглядеть так, будто оно состоит из крупных пикселей. Это может быть использовано для создания эстетики ретро-видеоигры или для затемнения деталей в целях конфиденциальности.
• sharpenLuminance повышает резкость изображения, увеличивая контрастность соседних пикселей. Это можно использовать, чтобы сделать фотографию более четкой или улучшить детали.
• vignette затемняет углы изображения, чтобы привлечь внимание к центру. Это популярный эффект для портретной и пейзажной фотографии.
• sepiaTone (вы уже пробовали этот фильтр, но для полноты картины) этот фильтр применяет к изображению тон сепии, который придает снимку состаренный или винтажный вид.
• photoEffectInstant применяет к изображению эффект полароида. С его помощью можно имитировать вид моментальной проявляющейся фотографии.
• colorMonochrome превращает изображение в монохромное с оттенком заданного цвета. Это можно использовать в различных эстетических целях, чтобы сфокусироваться на одном цветовом диапазоне или создать настроение, соответствующее определенному цвету.
• unsharpMask увеличивает контрастность краев между пикселями с разными цветовыми значениями, сводя шум к минимуму. С ее помощью изображение выглядит более четким или «резким».
• bloom применяет эффект свечения, в результате которого яркие области кажутся более яркими. Его можно использовать для различных эстетических эффектов, например для создания мечтательного вида.

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

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

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

Источник