SwiftUI не может иметь рабочие закругленные углы с AsyncImage и сверхширокими изображениями. ⇐ IOS

[Anonymous]

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

• закругленные углы
• Соотношение сторон 16/9
• тип масштабирования по центру (изображение центрируется и обрезается, чтобы заполнить доступное пространство, сохраняя при этом собственное соотношение сторон)

следуя тому, чего я достиг в своем приложении для Android, пока еще учился SwiftUI:

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

AsyncImage( // from Coil library
model = webcam.illustrationImageUrl,
contentDescription = null,
contentScale = ContentScale.Crop,
modifier = Modifier
.aspectRatio(16 / 9f)
.hazeSource(state = hazeState),
)

Я пробовал использовать комбинацию resizable, ScaledToFill,spectRatio, clipped, за которой следовал clipToShape или фон, но безрезультатно.
Например, этот код:

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

AsyncImage(url: URL(string: webcam.illustrationImageUrl)) { image in
image
.resizable()
.scaledToFill()
.aspectRatio(16 / 9, contentMode: .fit)
.clipped()
.clipShape(.rect(cornerRadius: 16))
} placeholder: {
ProgressView()
}

приведет к такому результату:




Очевидно, что мои закругленные углы не в порядке:

• Первое изображение: нет закругленных углов
• Второе изображение: закругленные углы обрезаны
• Третье изображение: полностью закругленные углы

Я понимаю следующее: обрезка формы, похоже, применяется к исходному изображению а не то, что на самом деле видно (после масштабирования/обрезки) или сам вид (контейнер изображений).
Почему? Потому что второе изображение показывает часть своих исходных углов, что приводит к слегка закругленным углам, в то время как второе изображение не отображает исходный угол из-за гораздо большей ширины и большого количества контента слева и справа за пределами визуальных границ. И если вы возьмете последнее изображение, оно будет правильно округлено, потому что оно отображается целиком!
Я также попробовал переключиться с ScaledToFill на ScaledToFit: все изображения правильно округлены, потому что теперь они отображаются полностью. Но из-за их разных размеров и исходного соотношения сторон ни одно из них не учитывает мое ограничение соотношения сторон 16/9:


Наконец, я также попробовал обернуть AsyncImage и даже его базовое изображение в ZStack, чтобы который я пробовал и clipToShape, иContainerShape, но это вообще ничего не меняет.
Почему я не могу добиться желаемого результата? Спасибо за помощь!

Подробнее здесь: https://stackoverflow.com/questions/798 ... ide-images