iOS UIView子类，将透明文本绘制到背景中 [英] iOS UIView subclass, draw see-through text to background

问题描述

我想在UIView上的子类上绘制文本，以便文本从形状中切出，视图后面的背景显示出来，就像在OSX Mavericks徽标中找到的一样这里。

I want to draw text onto my subclass on UIView so that the text is cut out of the shape and the background behind the view shows through, just like in the OSX Mavericks logo found here.

我想说我更像是一个中级/早期的高级iOS开发人员，所以请随意向我提出一些疯狂的解决方案。我希望我必须覆盖 drawRect 才能做到这一点。

I would say that I'm more of an intermediate/early advanced iOS developer so feel free to throw some crazy solutions at me. I'd expect I'd have to override drawRect in order to do this.

谢谢你们！

编辑：

我应该提到我的第一次尝试是制作文本 [UIColor clearColor ] 哪个不起作用，因为只是将文本的alpha分量设置为0，这只是通过文本显示视图。

I should mention that my first attempt was making the text [UIColor clearColor] which didn't work since that just set the alpha component of the text to 0, which just showed the view through the text.

推荐答案

免责声明：我是在没有测试的情况下写的，所以请原谅我，如果我在这里错了。

Disclaimer: I'm writing this without testing, so forgive me if I'm wrong here.

你应该实现你的目标需要通过以下两个步骤：

You should achieve what you need by these two steps:

1. 创建一个 CATextLayer 在您的视图中，将 backgroundColor 设置为完全透明，将 foregroundColor 设置为不透明（通过 [UIColor colorWithWhite：0 alpha：1] 和 [UIColor colorWithWhite：0 alpha：0] 。然后设置字符串要呈现的字符串的属性， font 和 fontSize 等等。

1. Create a CATextLayer with the size of your view, set the backgroundColor to be fully transparent and foregroundColor to be opaque (by [UIColor colorWithWhite:0 alpha:1] and [UIColor colorWithWhite:0 alpha:0]. Then set the string property to the string you want to render, font and fontSize etc.

将视图的图层蒙版设置为此图层： myView.layer.mask = textLayer 。您必须导入 QuartzCore 才能访问视图的 CALayer 。

Set your view's layer's mask to this layer: myView.layer.mask = textLayer. You'll have to import QuartzCore to access the CALayer of your view.

请注意，我可能会在第一步中在不透明和透明颜色之间切换。

Note that it's possible that I switched between the opaque and transparent color in the first step.

编辑：确实，诺亚是对的。为了解决这个问题，我使用了CoreGraphics和 kCGBlendModeDestinationOut 混合模式。

Indeed, Noah was right. To overcome this, I used CoreGraphics with the kCGBlendModeDestinationOut blend mode.

首先，一个示例视图显示它确实有效：

First, a sample view that shows that it indeed works:

@implementation TestView

- (id)initWithFrame:(CGRect)frame {
  if (self = [super initWithFrame:frame]) {
    self.backgroundColor = [UIColor clearColor];
  }
  return self;
}

- (void)drawRect:(CGRect)rect {
  [[UIColor redColor] setFill];
  UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:self.bounds cornerRadius:10];
  [path fill];

  CGContextRef context = UIGraphicsGetCurrentContext();
  CGContextSaveGState(context); {
    CGContextSetBlendMode(context, kCGBlendModeDestinationOut);
    [@"Hello!" drawAtPoint:CGPointZero withFont:[UIFont systemFontOfSize:24]];
  } CGContextRestoreGState(context);
}

@end

将此添加到您的视图后控制器，你会看到 TestView 背后的视图，其中 Hello！被绘制。

After adding this to your view controller, you'll see the view behind TestView where Hello! is drawn.

为什么这样做：

混合模式定义为 R = D * （1 - Sa），这意味着我们需要与之前建议的掩码层相反的alpha值。因此，您需要做的就是使用不透明的颜色进行绘制，这将从您事先在视图上绘制的内容中减去。

The blend mode is defined as R = D*(1 - Sa), meaning we need opposite alpha values than in the mask layer I suggested earlier. Therefore, all you need to do is to draw with an opaque color and this will be subtracted from the stuff you've drawn on the view beforehand.

这篇关于iOS UIView子类，将透明文本绘制到背景中的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！