Разработка
Поваренная книга SwiftUI: изображения и иконки — Часть 3
SwiftUI предоставляет различные способы настройки и кастомизации изображений в вашем приложении.
Создание кастомных форм для изображений в 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)) } }
Примечание: Если вы хотите опробовать примеры, вы можете скачать архив со всеми изображениями, использованными в этой статье, здесь.
Предварительный просмотр должен выглядеть следующим образом:
В приведенном выше примере кода мы загружаем изображение с помощью структуры 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) } }
Ваш предварительный просмотр должен выглядеть следующим образом:
В этом примере мы добавляем тень к изображению кошки. Модификатор 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() } }
Предварительный просмотр должен выглядеть так:
Вот как работает этот код, начиная с метода init:
- Он загружает
UIImage
из пакета приложения с именем «CoolCat». Если это не удается, инициализируется пустойUIImage
. - Вызывает статическую функцию
applySepiaFilter(to:)
, которая применяет фильтр сепии к загруженному изображению. Результат затем оборачивается в SwiftUIImage
и сохраняется в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
-
Приложения5 дней назад
Перевод по фото для iOS и Android 2025
-
Приложения6 дней назад
Решение уравнений по фотографии — приложения для математиков
-
Исследования4 недели назад
Поможет ли новая архитектура React Native отобрать лидерство у Flutter в кроссплатформенной разработке?
-
Аналитика магазинов4 недели назад
CapCut поглощает рынок видеоредакторов