Прежде всего, вы должны вырезать квадрат из исходного изображения. Предположим, что это изображение в режиме landscape
. так что width > height
. Таким образом, результирующий квадратный размер изображения будет height * height
. Затем нарисуйте изображение в соответствии с вашими потребностями с красным цветом фона.
Следующий код сделан для landscape
изображения. Для potrait
изображений задача такая же.
let image = UIImage(named: "image")!
if image.size.width > image.size.height {
// assuming the image is landscape one
let sqrImgSize = image.size.height
let extraPortion = (image.size.width - sqrImgSize) / 2
let sqrPortionRect = CGRect(x: extraPortion,
y: 0,
width: sqrImgSize,
height: sqrImgSize)
// first of all, create the square image by cropping left right side out
UIGraphicsBeginImageContextWithOptions(CGSize(width: sqrImgSize, height: sqrImgSize), false, 0.0);
image.draw(at: CGPoint(x: -extraPortion, y: 0))
let sqrImage = UIGraphicsGetImageFromCurrentImageContext(); // here is your center cropped image
UIGraphicsEndImageContext();
// now if you are interested in filling the background with red, here it is
UIGraphicsBeginImageContextWithOptions(image.size, false, 0.0);
let context = UIGraphicsGetCurrentContext();
context?.beginPath()
context?.setFillColor(UIColor.red.cgColor)
context?.move(to: .zero)
context?.addRect(CGRect(origin: .zero, size: image.size))
context?.closePath()
context?.fillPath()
sqrImage!.draw(at: CGPoint(x: extraPortion, y: 0))
let sqrImageWithRedBackground = UIGraphicsGetImageFromCurrentImageContext();
UIGraphicsEndImageContext();
imageView.image = sqrImageWithRedBackground
} else {
// do as above with slight calculation changes
}
Пример
Здесь изображение с желтым фоном, где режим контента установлен в соответствии с форматом изображения. Таким образом, цвет фона изображения виден как соотношение сторон не совпадает.
Мой вывод
Объяснение
Очевидно, что фиолетовый цвет - это цвет фона свойства UIViewcontroller
view
. Желтый цвет - это цвет фона UIImageView
. Красная часть - это цвет заливки, а в центре - изображение.
Надеюсь, это соответствует вашим целям.