iphone - 使用自定义形状的孔创建图层蒙版

Question

我花了太多时间试图解决这个问题，但就是找不到可行的解决方案。

情况:1. 手机上显示“某物”的图片。2. 半透明(例如蓝色)层放置在图像之上，完全覆盖它。3. 该层中存在一个“孔”，该层的那部分完全透明且可移动。

一个例子可能是缩放效果，您可以在图像周围移动这个“洞”。在孔内您可以正常看到图像，而在孔外则被半透明层覆盖。注意:我在 cocos2d 层中实现它，其中图像由 CCSprite 表示。不过，如果不使用 cocos，那应该没关系。

问题:我试过使用 CAShapeLayer 和位图作为蒙版，但没有任何效果(请参见下面的代码片段)。使用 CAShapeLayer，我为“洞”创建了一个 UIBezierPath，并将其应用于彩色层。然而，只有孔显示颜色，而其余部分是透明的。对于图像，蒙版根本不起作用(我不知道为什么)。我什至试过遮盖面具，看看是否可行。我也尝试过交换颜色...从白色到黑色再到清除填充和背景。

一个简单的解决方案(如果存在的话)是反转 UIBezierPath 的区域。我也尝试过使用路径进行裁剪……但没有成功。

我希望这是我忽略的简单愚蠢的事情。也许你们中的一个人会看到这一点。我还没有关心的移动部分。我需要先让真正的面具工作。示例代码忽略了 iPhone SDK 和 openGL 之间的 y 轴差异。

CAShapeLayer 示例:

CGSize winSize = [[CCDirector sharedDirector] winSize];
UIImage* img = [UIImage imageNamed:@"zebra.png"];
CCSprite* spr = [CCSprite spriteWithCGImage:img.CGImage key:@"img"];
spr.position = ccp( winSize.width / 2, winSize.width / 2 );
[self addSprite:spr];

UIBezierPath* path = [UIBezierPath bezierPathWithRect:rectHole];
CAShapeLayer* maskLayer = [CAShapeLayer layer];
maskLayer.bounds = [spr boundingBox];
maskLayer.position = spr.position;
maskLayer.fillColor = [UIColor whiteColor].CGColor;
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.path = path.CGPath;

CALayer* colorLayer = [CALayer layer];
colorLayer.bounds = [spr boundingBox];
colorLayer.position = maskLayer.position;
[colorLayer setMask:maskLayer];

[[[[CCDirector sharedDirector] openGLView] layer] addSublayer:colorLayer];

多层蒙版示例:

CGSize winSize = [[CCDirector sharedDirector] winSize];
UIImage* img = [UIImage imageNamed:@"zebra.png"];
CCSprite* spr = [CCSprite spriteWithCGImage:img.CGImage key:@"img"];
spr.position = ccp( winSize.width / 2, winSize.width / 2 );
[self addSprite:spr];

UIBezierPath* path = [UIBezierPath bezierPathWithRect:rectHole];
CAShapeLayer* maskLayer = [CAShapeLayer layer];
maskLayer.bounds = [spr boundingBox];
maskLayer.position = spr.position;
maskLayer.fillColor = [UIColor whiteColor].CGColor;
maskLayer.backgroundColor = [UIColor clearColor].CGColor;
maskLayer.path = path.CGPath;

UIBezierPath* pathOuter = [UIBezierPath bezierPathWithRect:img.frame];
CAShapeLayer* outerLayer = [CAShapeLayer layer];
outerLayer.bounds = [spr boundingBox];
outerLayer.position = spr.position;
outerLayer.fillColor = [UIColor blackColor].CGColor;
outerLayer.backgroundColor = [UIColor whiteColor].CGColor;
outerLayer = pathOuter.CGPath;
[outerLayer setMask:maskLayer];

CALayer* colorLayer = [CALayer layer];
colorLayer.bounds = [spr boundingBox];
colorLayer.position = outerLayer.position;
[colorLayer setMask:outerLayer];

[[[[CCDirector sharedDirector] openGLView] layer] addSublayer:colorLayer];

图像蒙版示例:

CGSize winSize = [[CCDirector sharedDirector] winSize];
UIImage* img = [UIImage imageNamed:@"zebra.png"];
CCSprite* spr = [CCSprite spriteWithCGImage:img.CGImage key:@"img"];
spr.position = ccp( winSize.width / 2, winSize.width / 2 );
[self addSprite:spr];

CGRect r = [spr boundingBox];
CGSize sz = CGSizeMake( r.size.width, r.size.height );
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceGray();
CGContextRef context = CGBitmapContextCreate( NULL, w, h, 8, 0, colorSpace, kCGBitmapByteOrderDefault | kCGImageAlphaNone );
CGColorSpaceRelease( colorSpace );
CGContextSetFillColorWithColor( context, [UIColor whiteColor].CGColor );
CGContextFillRect( context, r );
CGContextSetFillColorWithColor( context, [UIColor blackColor].CGColor );
CGContextFillRect( context, rectHole );
CGImageRef ref = CGBitmapContextCreateImage( context );
CGContextRelease( context );

CALayer* maskLayer = [CALayer layer];
maskLayer.bounds = [spr boundingBox];
maskLayer.position = spr.position;
[maskLayer setContents:(id)ref];

CALayer* colorLayer = [CALayer layer];
colorLayer.bounds = [spr boundingBox];
colorLayer.position = maskLayer.position;
[colorLayer setMask:maskLayer];

[[[[CCDirector sharedDirector] openGLView] layer] addSublayer:colorLayer];
CGImageRelease( ref );

Answer 1

我后来在学习了其他核心图形技术后又回到了这个问题上。该解决方案最接近上面的多层蒙版示例。但是，您无需创建内层和外层，而是需要将两个路径组合成一个相反方向的 UIBezierPath。

因此，例如，创建要裁剪的内部区域 (CW) 的路径。注意:x、y、w、h 指的是“洞”的来源和大小。

      [path moveToPoint:ccp(x,y)];
      [path addLineToPoint:ccp(x+w,y)];
      [path addLineToPoint:ccp(x+w,y+h)];
      [path addLineToPoint:ccp(x,y+h)];
      [path addLineToPoint:ccp(x,y)];

然后，在相同的路径上添加相反方向(逆时针)的外部区域。注意:x、y、w、h 指的是外部矩形的原点和大小。

      [path moveToPoint:ccp(x,y)];
      [path addLineToPoint:ccp(x,y+h)];
      [path addLineToPoint:ccp(x+w,y+h)];
      [path addLineToPoint:ccp(x+w,y)];
      [path addLineToPoint:ccp(x,y)];

然后将此路径应用于图层 (maskLayer)，该图层用作最后图层 (colorLayer) 上的蒙版。不需要“outerLayer”。