drawRect 绘图“透明”文本?
我希望绘制一个 UILabel (最好通过子类化)作为透明标签,但具有纯色背景。我写了一个简单的例子(抱歉,它很难看,但它很能说明问题:))。
基本上我有一个 UILabel,我希望背景是固定颜色,并且文本应该是透明的。我不想用视图背景为文本着色,而是让它 100% 透明,因为我在背景中有一个纹理,我想确保标签内部和外部对齐。
我整晚都在浏览 SO 并在 Google 上搜索,但没有找到有用的资源。我在 CG 绘图方面没有太多经验,所以我希望有任何链接、帮助、教程或示例代码(也许 Apple 有一些我需要看一下?)。
非常感谢!
I am looking to draw a UILabel (preferable through subclassing) as a transparent label, but with solid background. I draw up an quick example (sorry, it's ugly, but it gets the points across :)).
Basically I have a UILabel and I would like the background to be a set colour, and the text should be transparent. I do not want to colour the text with the views background, but instead have it be 100% transparent, since I have a texture in the background that I want to make sure lines up inside and outside of the label.
I've been spending the night browsing SO and searching on Google, but I have found no helpful sources. I don't have much experience with CG drawing, so I would appreciate any links, help, tutorial or sample code (maybe Apple has some I need to have a look at?).
Thanks a bunch!
如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。
绑定邮箱获取回复消息
由于您还没有绑定你的真实邮箱,如果其他用户或者作者回复了您的评论,将不能在第一时间通知您!
发布评论
评论(4)
我几乎不使用任何代码将其重写为 UILabel 子类,并将其发布到 GitHub
其要点是你重写了drawRect,但是调用了
[super drawRect:rect]
来让UILabel正常渲染。使用白色标签颜色可以让您轻松地将标签本身用作蒙版。I've rewritten it as a UILabel subclass using barely any code and posted it on GitHub
The gist of it is you override drawRect but call
[super drawRect:rect]
to let the UILabel render as normal. Using a white label color lets you easily use the label itself as a mask.使用 CALayer 掩模解决。创建标准蒙版(例如壁纸文本)很简单。为了创建挖空文本,我必须反转蒙版的 Alpha 通道,这涉及将标签渲染到 CGImageRef,然后进行一些像素推送。
示例应用程序可在此处获取:https://github.com/robinsenior/RSMaskedLabel
相关代码位于此处以避免将来的链接腐烂:
Solved using CALayer masks. Creating a standard mask (wallpapered text, for example) is simple. To create the knocked-out text, I had to invert the alpha channel of my mask, which involved rendering a label to a CGImageRef and then doing some pixel-pushing.
Sample application is available here: https://github.com/robinsenior/RSMaskedLabel
Relevant code is here to avoid future link-rot:
这是一种与 Matt Gallagher 类似的技术,它将生成带有图像的反转文本蒙版。
分配(可变)数据缓冲区。创建具有 8 位 Alpha 通道的位图上下文。配置文本绘制的设置。在复制模式下填充整个缓冲区(假定默认颜色的 alpha 值为 1)。以清晰模式写入文本(alpha 值为 0)。从位图上下文创建图像。使用位图作为蒙版从源图像创建新图像。创建一个新的 UIImage 并清理。
每次 textString 或 sourceImage 或大小值更改时,重新生成最终图像。
另一种方法是将 textImage 放入新图层并将该图层设置在视图图层上。 (删除创建“newImage”和“finalImage”的行。)假设这种情况发生在视图代码中的某处:
有更多替代方案,有些可能更好(子类 UIImage 并在超类完成其后直接以清晰模式绘制文本绘画?)。
Here's a technique that's similar to Matt Gallagher's, which will generate an inverted text mask with an image.
Allocate a (mutable) data buffer. Create a bitmap context with an 8-bit alpha channel. Configure settings for text drawing. Fill the whole buffer in copy mode (default colour assumed to have alpha value of 1). Write the text in clear mode (alpha value of 0). Create an image from the bitmap context. Use the bitmap as a mask to make a new image from the source image. Create a new UIImage and clean up.
Every time the textString or sourceImage or size values change, re-generate the final image.
Another way to do this involves putting the textImage into a new layer and setting that layer on your view's layer. (Remove the lines that create "newImage" and "finalImage".) Assuming this happens inside your view's code somewhere:
There are more alternatives, some might be better (subclass UIImage and draw the text directly in clear mode after the superclass has done its drawing?).
Swift 5 解决方案(Xcode:12.5):
Swift 5 solution (Xcode: 12.5):