没有透明部分的图像掩模

Question

我一直在研究这个问题。

我正试图将灰色图像放在杯子上

目前，我正在使用灰色背景拉伸uiimageview，以获得滑块的数量。

-(void) sliderChanged:(CGFloat) value{
drinksView.grayArea.frame = CGRectMake( 0 , -value ,372 ,value);

我知道这很脏，不是我想要的......

我想要的是灰色部分仅覆盖有杯子的部分（例如图像不透明的部分）。杯子的图像只有透明的背景

有人知道如何实现这个目标吗？我是一个带面具的菜鸟，许多教程让我无处可去，我甚至都不知道它是否可能。

P.S：在杯子周围画一条路径是不可能的，因为杯子图像可以变成一个玻璃

Answer 1

首先，您需要熟悉此方法

    // masks the item based on the MaskImage
- (UIImage*) itemMask : (UIImage*)image withMask:(UIImage*)maskImage
{
    UIImage* afterMasking = nil;

    CGImageRef maskRef = maskImage.CGImage;

    CGImageRef mask = CGImageMaskCreate(CGImageGetWidth(maskRef), CGImageGetHeight(maskRef), CGImageGetBitsPerComponent(maskRef), CGImageGetBitsPerPixel(maskRef), CGImageGetBytesPerRow(maskRef), CGImageGetDataProvider(maskRef), NULL, false);

    CGImageRef masked = CGImageCreateWithMask([image CGImage], mask);
    CFRelease(mask);
    afterMasking = [UIImage imageWithCGImage:masked];
    CFRelease(masked);
    return afterMasking;
}

这样做是因为你将杯子图像和面具图像一起喂它，它会掩盖你的杯子图像。它只会掩盖你的杯子图像，而不会掩盖你的任何东西，所以你不必担心。

你遇到的问题是灰盒子调整大小。我如何处理这个是根据滑块值裁剪蒙版。因此，在通过方法提供之前，制作一个黑盒子并改变它的尺寸，如何使用grayBG。这应该是快速的，所以我不会详细说明，但最后你会有这样的事情。请原谅一半精心制作的图形

Answer 2

我能想到的最简单的方法是使用蒙面CALayer。这是你需要做的：

1. 使用带有灰色背景的UIImageView作为叠加层，而不是使用CALayer。您的sliderChanged:方法将保持不变，但drinksView.grayArea将是图层而非视图。

2. 到目前为止，效果将与以前完全相同。现在，您需要设置grayArea的掩码。执行以下操作：

   CALayer * maskLayer = [CALayer new];
   maskLayer.contents = myCupImage.CGImage;
   grayArea.mask = maskLayer;
   

3. 我认为默认情况下，图层会随着比例的变化而拉伸内容。我们不希望这样。您可以通过将图层的contentsGravity设置为kCAGravityTop来解决此问题。

那应该做你想要的。

一个警告：我不太确定面具如何应对不断变化的内容重力。如果您在这方面遇到问题，可以通过添加容器层来修复它：

1. 为grayArea设置一个固定的框架（等于杯子图像的大小）。

2. 不是直接添加grayArea，而是为它引入一个容器层：

   CALayer * container = [CALayer new];
   container.masksToBounds = YES;
   [container addSublayer:grayArea];
   [drinksView.layer addSublayer:container];
   

3. 在sliderChanged:中，更改container的框架而不是grayArea。

希望这有效。

Answer 3

    drinksView.grayLayer = [CALayer new];
    drinksView.grayLayer.frame = CGRectMake(0, 0, 372, 0);
    drinksView.grayLayer.contentsGravity = kCAGravityTop;

    CALayer * topLayer = [CALayer new];
    topLayer.frame = CGRectMake(0, 0, 372, 367);
    UIImage * grayImage = [UIImage imageNamed:@"grayDrink.png"];
    topLayer.contents = (id) grayImage.CGImage;

    CALayer * maskLayer = [CALayer new];
    maskLayer.contents = (id)cupImage.CGImage;
    maskLayer.masksToBounds = YES;

    maskLayer.bounds = CGRectMake(0, 0, 372, 367);
    maskLayer.position = CGPointMake(186,184);

    [topLayer setMask:maskLayer];
    [drinksView.grayLayer addSublayer:topLayer];
    [drinksView.grayLayer setMasksToBounds:YES];
    [[drinksView layer]addSublayer:drinksView.grayLayer];