Обрезать UIImage до определенной области на разных устройствах в представлении карты SwiftUI ⇐ IOS

[Anonymous]

Я пытаюсь создать представление карточки (очень похожее на представление на странице App Story Today) в SwiftUI. На каждой карточке есть изображение, текст под ним и закругленные края.
Каждое изображение карточки имеет размер 600 на 400 пикселей. На каждом изображении есть определенное место, которое я хочу обрезать, и оно варьируется от изображения к изображению. Например, на изображении ниже (именно это изображение я использую для этого поста) оно находится примерно в центре тарелки (т. е. когда я обрезаю изображение для открытки, я хочу сохранить тарелку, но не деревянный фон). ). Но эта исходная/опорная координата обрезки варьируется от изображения к изображению – для некоторых это может быть левая сторона, правая сторона и т. д. (теперь, когда я думаю об этом, как я могу оптимизировать для этого?).


Вот код, который Я использую для создания карточек вместе с кодом, который использую для обрезки изображений:

Код: Выделить всё

//  StoryView.swift

import SwiftUI

struct StoryView: View {
@Environment(\.colorScheme) var colorScheme

var story: Story

var body: some View {
RoundedRectangle(cornerRadius: self.cornerRadius)
.fill(self.colorScheme == .light ? Color.white : self.darkModeCardColor)
.frame(height: self.cardHeight)
.shadow(radius: self.colorScheme == .light ? 20 : 0)
.overlay(imageAndText())
.padding([.leading, .trailing], horizontalSidePadding)
}

@ViewBuilder
private func imageAndText() -> some View {
VStack(spacing: 0) {
Image(uiImage: self.croppedPrimaryImage)
.resizable()

// Spacer()

HStack {
VStack(alignment: .leading) {
Text("Lorem Ipsum".uppercased())
.font(.headline)
.foregroundColor(.secondary)

Text(self.story.title)
.font(.title)
.fontWeight(.black)
.foregroundColor(.primary)
.lineLimit(2)
.padding([.vertical], 4)

Text("Lorem ipsum dolor sit".uppercased())
.font(.caption)
.foregroundColor(.secondary)
}
.layoutPriority(1)

Spacer()
}
.padding()
}
.cornerRadius(self.cornerRadius)
}

// MARK: - Image Cropping

// TODO: - Fix this so that there are no force unwrappings
var croppedPrimaryImage: UIImage {
cropImage(image: story.previewImage, toRect: CGRect(x: 85, y: 0, width: cardWidth, height: 400))!
}

// see: https://stackoverflow.com/questions/31254435/how-to-select-a-portion-of-an-image-crop-and-save-it-using-swift
func cropImage(image: UIImage, toRect: CGRect) -> UIImage? {
// Cropping is available through CGGraphics
let cgImage :CGImage! = image.cgImage
let croppedCGImage: CGImage! = cgImage.cropping(to: toRect)

return UIImage(cgImage: croppedCGImage)
}

// MARK: - Drawing Constants

private let cornerRadius: CGFloat = 30
private let cardHeight: CGFloat = 450
private let cardWidth: CGFloat = UIScreen.main.bounds.size.width
private let horizontalSidePadding: CGFloat = 26
private let darkModeCardColor = Color(red: 28/255, green: 28/255, blue: 30/255)
}

struct StoryView_Previews: PreviewProvider {
static var previews: some View {
Group {
StoryView(story: Story(title: "Lorem ipsum", previewImage: UIImage(imageLiteralResourceName: "img.jpg")).colorScheme(.dark)

// StoryView(story: Story(title: "Lorem ipsum dolor sit amet", previewImage: UIImage(imageLiteralResourceName: "img.jpg")).colorScheme(.light)
}
}
}

В этой строке cornImage(image: Story.previewImage, toRect: CGRect(x: 85, y: 0, width: cardWidth, height: 400))! I выяснил константы, которые приводят меня в центр обрезанного изображения пластины (определенно не лучшее решение, но я не понимаю, как именно интегрировать GeometryReader в это – есть идеи по этому поводу?)
В любом случае, если я запущу его на iPhone 11 Pro Max, карта будет выглядеть великолепно:
[img]https:// i.sstatic.net/vmBM3.png[/img]

Но тогда, если я перейду на iPhone SE (2-го поколения), пластина больше не будет центрироваться на карте. Этого и следовало ожидать, учитывая, что я жестко запрограммировал точки и CGRect, но как это исправить?
[img]https://i .sstatic.net/WThKI.png[/img]

Опять же, я чувствую, что в какой-то момент мне нужно будет использовать GeometryReader, и мне следует сохранить координату центра в пикселях для каждого изображения и затем поработайте над этим.
Например, координатой обрезки этого изображения будет точка в середине пластины, то есть примерно (300, 200) пикселей, и тогда я бы добавьте и вычтите определенную сумму (в зависимости от доступного пространства (ширины и высоты) на карте, в зависимости от устройства — мы получаем это с помощью считывателя геометрии) из координат x и y координаты обрезки, чтобы получить мое обрезанное изображение для карты.
Надеюсь, что-то из этого имело смысл. Если у вас есть идеи, дайте мне знать. Я в растерянности.

Подробнее здесь: https://stackoverflow.com/questions/636 ... -card-view