如何在 Objective-C 中创建“填充图像”

Question

我已经尝试过环顾四周，但似乎找不到任何关于这个主题的信息，这正是我正在寻找的。​​p>

如果您熟悉 Unity3D uGUI，我正在尝试使用 Objective-C 在 XCode 内部实现相同的“填充”类型图像效果。

如果我有一个“角色”的褪色图像，然后随着时间的推移，我想在同一位置用一个“填充的角色”图像填充那个“角色”图像。我该如何解决这个问题？

我曾尝试使用 MGImageResizingUtilities 但这似乎改变了图像的大小，因为裁剪后的图像不再与正在使​​用的原始图像大小相同，并且比例设置为纵横比。

很难找到一个好的例子，但这里有一些东西可以理解。 http://s22.postimg.org/9qghxosox/Screen_Shot_2016_01_30_at_17_08_06.png

这是我尝试使用的一些代码：

CALayer *maskLayer = [CALayer layer];
UIImage *maskImage = [UIImage imageNamed:@"turtle_posing"];
maskLayer.contents = (id)maskImage.CGImage;
maskLayer.bounds = self.filledTurtlePic.bounds;

CGRect turtleRect = self.filledTurtlePic.frame;

maskLayer.frame = CGRectMake(0, turtleRect.size.height, turtleRect.size.width, -turtleRect.size.height);
self.filledTurtlePic.layer.mask = maskLayer;

这里有两张尝试使用上面的代码完全填充图像的屏幕截图，以及一张尝试部分填充图像的屏幕截图（遮罩层框架高度设置为 -40）

在此致谢

Answer 1

我这样做的方法是创建两个图像。已填充和未填充。

然后创建两个图像视图。固定大小，使它们的大小相同。并且处于相同的位置。下面是未填充的，顶部是填充的。当你运行它时，它应该看起来只有填充的那个在屏幕上。

现在创建一个CALayer 并将其设置为filledImageView.layer 的mask。

当您更改此图层的框架时，它只会显示该框架内的内容。所以它会隐藏filledImageView的一部分，你会在下面看到unfilledImageView。

因此，如果您的 imageView 的框架为 (100, 100, 100, 100)，原点为 100, 100，大小为 100, 100。遮罩层框架应为 (0, 0, 100, 100)图片。这是因为原点是相对于图像视图的。

对于空图像，它应该是 (0, 100, 100, 0)。

对于 x%，遮罩层的帧应该是 (0, x-100, 100, 100-x)

编辑

你应该有两个图像视图...

filledImageView unFilledImageView

这些设置正确。不要改变这些框架。也不是这些层。

您应该创建一个图层并将其添加为filledImageView 的蒙版。

self.maskLayer = [CALayer layer];
self.filledImageView.layer.mask = self.maskLayer;

现在有一个更新掩码的函数...

- (void)changeFilledImage:(CGFloat)percentage {
    // percentage is from 0.0 to 1.0

    CGFloat fullHeight = CGRectGetHeight(self.filledImageView.frame);
    CGFloat width = CGRectGetWidth(self.filledImageView.frame);
    CGFloat percentageHeight = fullHeight * percentage;

    self.maskLayer.frame = CGRectMake(0, fullHeight - percentageHeight, width, percentageHeight);
}

应该这样做。