Обрезание и размещение изображения для достижения эффекта уровня заряда аккумулятора

Question

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

На данный момент я могу изменить цвет изображения пустой батареи, но я не знаю, как обрезать, новый и поместить его поверх оригинала.

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

Кроме того, можно комбинировать или поместить обрезанное изображение поверх оригинала?

Это мое оригинальное изображение.

... и что я пытаюсь достичь

На данный момент я пытаюсь этот код,

int width = emptyBm.size.width; 
int height = fullBm.size.height * level/100; 

UIImage *image = [UIImage imageNamed:@"battery_icon"]; 
UIImage *image2 = [UIImage imageNamed:@"battery_icon_full"]; 

CGRect rect = CGRectMake(0, image.size.height-height, width, height); 
CGImageRef imageRef = CGImageCreateWithImageInRect([image2 CGImage], rect); 

CGImageRef actualMask = CGImageMaskCreate(CGImageGetWidth([image CGImage]), 
               CGImageGetHeight([image CGImage]), 
               CGImageGetBitsPerComponent([image CGImage]), 
               CGImageGetBitsPerPixel([image CGImage]), 
               CGImageGetBytesPerRow([image CGImage]), 
               CGImageGetDataProvider([image CGImage]), NULL, false); 
CGImageRef masked = CGImageCreateWithMask(imageRef, actualMask); 

batteryBackground.image = [UIImage imageWithCGImage:masked]; 

Однако, так как я использую CGImageCreateWithImageInRect обрезанная часть вытянутая

Answer 1

Используйте изображение с серой батареей в качестве маски. Создайте зеленый прямоугольник и примените созданную вами маску. Вот ссылка на IOS маскирования: link

EDIT: Я надеюсь, что это работает (не проверено):

int width = emptyBm.size.width; 
int height = fullBm.size.height * level/100; 

UIImage *image = [UIImage imageNamed:@"battery_icon"]; 
UIImage *image2 = [UIImage imageNamed:@"battery_icon_full"]; 

// For clarity, just pretend the mask method I gave link to you is defined in your class. 
UIImage *maskedImage = [self maskImage:image2 withMask:image]; 

// I assume the two imageviews are already connected to outlets. 
self.backgroundImageView = [[UIImageView alloc] initWithImage:image]; 
self.foregroundImageView = [[UIImageView alloc] initWithImage:maskedImage]; 

// Make it's image stick to bottom so it won't stretch. 
self.foregroundImageView.contentMode = UIViewContentModeBottom; 

// Then calculate the frame again to reflect changes of battery status. 
CGRect rect = self.backgroundImageView.frame; 
rect.size.height = height; 
// Push the masked imageview a to bottom as amount of missing battery height. 
rect.origin.y = rect.origin.y + self.backgroundImageView.frame.size.height - height; 
self.foregroundImageView.frame = rect;