裁剪和放置圖像以實現電池電量效果

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

編輯： 我希望這個作品（未測試）：

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;