масштабировать изображение до размера с аспектом

Question

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

Как видите, я отметил фон цвет из картинки вид зеленого цвета. Представление изображения имеет contentMode aspectFit, и оно на 40 пикселей меньше черного представления позади него. Я хочу, чтобы изображение было полной длины и ширины изображения. ContentMode должен быть aspectFit, чтобы ничто не вырезалось из изображения. Можно ли изменить размер изображения, чтобы оно имело 20 пикселей или немного больше пространства от вида?

Answer 1

Один подход ...

• встраивание UIImageView в (зеленый) UIView
• ограничение imageView со всех 4 сторон + 20-пунктовое "заполнение"
• ограничить ширину greenView (или его начальный и конечный)
• ограничить позицию Y greenView (верх или centerY)
• ограничить высоту imageView с помощью множитель на основе изображения ширина и высота

Вот простой пример:

class ViewController: UIViewController {

    let imgView: UIImageView = {
        let v = UIImageView()
        v.contentMode = .scaleToFill
        return v
    }()

    let greenView: UIView = {
        let v = UIView()
        v.backgroundColor = .green
        return v
    }()

    override func viewDidLoad() {
        super.viewDidLoad()

        // replace with your image name
        guard let img = UIImage(named: "bkg640x360") else {
            fatalError("Could not load image!")
        }

        view.backgroundColor = .black

        // set the imgView's image
        imgView.image = img

        // use auto-layout constraints
        imgView.translatesAutoresizingMaskIntoConstraints = false
        greenView.translatesAutoresizingMaskIntoConstraints = false

        // add imgView to greenview
        greenView.addSubview(imgView)

        // add greenView to self.view
        view.addSubview(greenView)

        // we want to respect safe-area
        let g = view.safeAreaLayoutGuide

        NSLayoutConstraint.activate([

            // constrain greenView leading and trailing to view (safeArea)
            greenView.leadingAnchor.constraint(equalTo: g.leadingAnchor, constant: 0.0),
            greenView.trailingAnchor.constraint(equalTo: g.trailingAnchor, constant: 0.0),

            // constrain greenView centerY to view centerY
            greenView.centerYAnchor.constraint(equalTo: g.centerYAnchor, constant: 0.0),

            // constrain imgView to all 4 sides of greenView with 20-pts "padding"
            imgView.topAnchor.constraint(equalTo: greenView.topAnchor, constant: 20.0),
            imgView.bottomAnchor.constraint(equalTo: greenView.bottomAnchor, constant: -20.0),
            imgView.leadingAnchor.constraint(equalTo: greenView.leadingAnchor, constant: 20.0),
            imgView.trailingAnchor.constraint(equalTo: greenView.trailingAnchor, constant: -20.0),

            // constrain imgView proportional height equal to image height / width
            imgView.heightAnchor.constraint(equalTo: imgView.widthAnchor, multiplier: img.size.height / img.size.width),

        ])

    }

}

Результат с использованием 640 x 360 изображения:

с использованием 512 x 512 (квадратного) изображения:

Это мои исходные изображения:

Answer 2

Если вы хотите сохранить изображение в том же размере, но не хотите растягивать его. ваше решение - это нечто другое.

1. Отобразите ваше изображение как .aspectFit, как в вопросе

2. отображаемое зеленое представление замените его на то же изображение в .aspectFill, но размыть его настолько, насколько оно хорошо выглядит.

Answer 3

Простая математика может решить эту проблему.

для ярлыков: H -> высота, W -> Ширина

Мы знаем, что общая формула для этого: h1 / w1 = h2 / w2

Hscreen / Wscreen = Himage / Wimage

поэтому мы знаем ширину экрана, высоту изображения и ширину изображения.

мы можем получить ширину экрана как -> view.frame.width

, а также мы можем получить размер изображения как -> image.size.width и image.size.height

Hscreen = (Himage) * (WScreen) / Wimage

..

, вы можете использовать Hscreen для привязки высоты imageViews.

Answer 4

@ adri567 Вы должны использовать свойство UIViewContentModeScaleToFill как

imageView.contentMode = .scaleToFill

Попробуйте с этим!