在一个 UIView 上画图，打个透明的洞可以看到下面的 UIView

Posted 2023-03-11

【中文标题】在一个 UIView 上画图，打个透明的洞可以看到下面的 UIView

【英文标题】：Drawing an image on a UIView, and making a transparent hole to see the UIView underneath

【发布时间】：2015-07-15 17:29:34

【问题描述】：

我有一个 UIView 我正在尝试将其放在另一个视图之上。这个新视图需要有一个完全透明的洞。我附上了我正在尝试完成的屏幕截图（棋盘模式是将这个新 UIView 添加为子层的底层 UIView，红色是 UIImage）。

我有以下代码将渲染黑色背景，中间有洞：

- (void)
drawRect:(CGRect)rect

  CGRect boxRect = CGRectMake(_location.x - (kPointRadius/2), _location.y - (kPointRadius/2), kPointRadius, kPointRadius);

  UIBezierPath *path = [UIBezierPath
                        bezierPathWithRoundedRect:CGRectMake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height)
                        cornerRadius:0];

  UIBezierPath *circlePath = [UIBezierPath
                              bezierPathWithRoundedRect:boxRect
                              cornerRadius:kPointRadius];
  [path appendPath:circlePath];
  [path setUsesEvenOddFillRule:YES];

  CAShapeLayer *fillLayer = [CAShapeLayer layer];
  fillLayer.path = path.CGPath;
  fillLayer.fillRule = kCAFillRuleEvenOdd;
  fillLayer.fillColor = [UIColor blackColor].CGColor;
  fillLayer.borderWidth = 5.0;
  fillLayer.borderColor = [UIColor redColor].CGColor;
  fillLayer.opacity = 0.7;
  [self.layer addSublayer:fillLayer];

但是，当我向其中添加图像并使用[[UIImage imageNamed:@"testimg" drawAtPoint:CGPointMake(x, y)]; 添加图像时，图像会覆盖孔。

任何人都可以在这里指出正确的方向吗？我被难住了。

编辑：我现在几乎可以做到了。我可以得到我需要的一切，除了分层在黑色之上的图像，90% 不透明的背景也是 90% 的不透明度。

CGRect boxRect = CGRectMake(
                              _location.x - (kPointRadius/2),
                              _location.y - (kPointRadius/2),
                              kPointRadius,
                              kPointRadius);

  UIBezierPath *path = [UIBezierPath
                        bezierPathWithRoundedRect:CGRectMake(0, 0, self.layer.frame.size.width, self.layer.frame.size.height) cornerRadius:0];

  UIBezierPath *circlePath = [UIBezierPath
                              bezierPathWithRoundedRect:boxRect
                              cornerRadius:kPointRadius];
  [path appendPath:circlePath];
  [path setUsesEvenOddFillRule:YES];

  UIImage *image = [UIImage imageNamed:@"testimg"];
  UIImageView *imageView = [[UIImageView alloc] initWithFrame:CGRectMake(13, 57, 350, 230)];
  imageView.image = image;
  CGRect r = CGRectMake(self.layer.frame.origin.x, self.layer.frame.origin.y, self.layer.frame.size.width, self.layer.frame.size.height);
  UIGraphicsBeginImageContextWithOptions(r.size, NO, 0);
  CGContextRef c = UIGraphicsGetCurrentContext();
  CGContextAddPath(c, CGPathCreateCopy(path.CGPath));

  CGContextEOClip(c);
  CGContextFillRect(c, r);
  UIImage* maskim = UIGraphicsGetImageFromCurrentImageContext();
  UIGraphicsEndImageContext();
  CALayer* mask = [CALayer layer];
  mask.frame = r;
  mask.contents = (id)maskim.CGImage;
  imageView.layer.mask = mask;
  self.layer.mask = mask;
  self.layer.backgroundColor = [UIColor blackColor].CGColor;
  self.layer.opacity = 0.8;
  [self.layer addSublayer:imageView.layer];

【问题讨论】：

我不会尝试画一个洞，而是将您要显示的底部图像重绘为一个小圆形 UIView

【参考方案1】：

编辑：我现在几乎可以做到。我可以得到我需要的一切，除了分层在黑色之上的图像，90% 不透明的背景也是 90% 的不透明度。

您可以将图层的背景颜色设置为[UIColor colorWithWhite:0.0 alpha:0.9]，而不是设置其不透明度。