裁剪和放置图像以实现电池电量效果

Posted 2023-02-25

【中文标题】裁剪和放置图像以实现电池电量效果

【英文标题】：Cropping and placing image to achieve battery level effect

【发布时间】：2013-07-11 12:00:06

【问题描述】：

我正在尝试通过在普通电池图像上绘制另一个基于当前电池电量的裁剪图像来实现电池电量效果。

目前我可以更改空电池图像的颜色，但我不知道如何裁剪，新的，并将其放在原件的顶部。

我找到了一些关于如何裁剪的有用链接，但是，每个链接都是从图像的左上角裁剪的。我想以左下角为起点并根据当前级别设置高度。

此外，是否可以将裁剪后的图像组合或放置在原始图像之上？

这是我的原始图像。

...以及我想要实现的目标

目前我正在尝试这段代码，

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，所以裁剪的部分被拉伸

【问题讨论】：

从左下角开始意味着从图像高度值减去使用部分的“高度”开始。定义 CGRect 只是简单的数学运算。

好吧，在发布了我的示例代码后，我实际上意识到了 shadowhorst 的意思。如果您的绿色电池图像已经具有形状和透明度，则通过减去已使用的部分来重新计算 CGRect 就足够了。只是不要忘记将它的 contentMode 设置为非拉伸的。我描述的示例也应该是可用的，但不是最佳的，除非您想使用纯绿色矩形作为填充指示器。

【参考方案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;

【讨论】：

我已经用类似的方法解决了这个问题！谢谢你。 :)