Блог

Главная - Вопросы по программированию - Индикатор выполнения на основе изображения

Индикатор выполнения на основе изображения

#swift #progress-bar

#swift #индикатор выполнения

Вопрос:

Мне нужно создать индикатор выполнения на основе изображения в Swift. У меня есть 2 векторных изображения в формате pdf со следующими настройками: введите описание изображения здесь
введите описание изображения здесь

Что я пробовал:
1) Разместить фоновое изображение (UIViewImage)
2) Поместите сверху полное изображение (UIViewImage)
3) Обрезайте полное изображение до 50% (изображение!.CGImage!.обрезка (в:cropZone))

Я ожидал увидеть часть фонового изображения, например:
введите описание изображения здесь

Но я вижу большую часть полного изображения:
введите описание изображения здесь

Вот мой тестовый код:

     let cropZone = CGRect(x:30,y:375-96,width:70,height:184)
    let cutImageRef: CGImage = self.coolantFull.image!.cgImage!.cropping(to:cropZone)!
    self.coolantFull.image! = UIImage(cgImage: cutImageRef)

Ответ №1:

Похоже, что для вашего верхнего вида изображения установлен один из .fill .aspectFit , или .aspectFill для режима масштабирования содержимого. Для этого сценария вам нужно убедиться, что вы используете .topLeft , чтобы гарантировать, что содержимое не масштабируется и не смещается по мере выполнения маскировки.

Комментарии:

1. Я использую векторный PDF, я думаю, что его всегда нужно масштабировать. Если я установлю .TopLeft, я увижу большое изображение, которое не помещается на экране.

2. Ах… Я понимаю. Честно говоря, я бы рекомендовал вам растрировать PDF в нужном вам размере и импортировать его в формате PNG, а не импортировать гигантское векторное изображение и позволять просмотру изображения уменьшать его для вас.

3. Я создаю универсальные приложения для iphone и ipad. Было бы здорово использовать векторную графику вместо создания png для всех разрешений.

4. Я буду использовать PNG.

Ответ №2:

Я написал расширение для UIImageView, которое создает новое изображение на основе процентов и изменяет его размеры. Заполнение идет снизу вверх. Растрированный pdf выглядит плохо, поэтому теперь я использую png @ 1, @ 2, @ 3.

 extension UIImageView {
func progress(to _percent: CGFloat, image: UIImage) {
    // restore original image and size in UIImageView
    self.image! = image
    self.frame.size = image.size
    // if less then 0, return 0
    var percent = _percent <= 0 ? 1 : _percent
    // if more then 100, return 100
    percent = percent > 100 ? 100 : percent
    let size = CGSize(width: self.frame.size.width, height: self.frame.size.height/100*percent)
    UIGraphicsBeginImageContextWithOptions(size, false, self.image!.scale)
    self.image!.draw(in: CGRect(x: 0,
                                y: -self.frame.size.height size.height,
                                width: self.image!.size.width,
                                height: self.image!.size.height))

    let croppedImage = UIGraphicsGetImageFromCurrentImageContext()!
    UIGraphicsEndImageContext()

    self.frame = CGRect(x: self.frame.origin.x,
                        y: self.frame.height-self.frame.height/100*percent,
                        width: self.frame.width,
                        height: self.frame.height/100*percent)
    self.image! = croppedImage
}

Как использовать:

 @IBOutlet weak var coolantProgress: UIImageView!

let coolantEmptyImage = UIImage.init(named: "coolantFull")
coolantProgress.progress(to: 25, image: coolantEmptyImage!)

введите описание изображения здесь