I'm talking about the groove style of the text on focussed title bars, or safari's bookmarks bar for example. Is there an easy way to reproduce this style when using:
我在谈论焦点标题栏上的文字凹槽样式,或者safari的书签栏。使用时是否有一种简单的方法来重现这种风格:
[string drawAtPoint:... withAttributes:...];
2 个解决方案
#1
If you want it to look perfect, you'll need to draw the text twice.
如果你希望它看起来很完美,你需要两次绘制文本。
As you can see when zooming in on labels below toolbar items in any app, or for instance the bookmarks bar in Safari (Control+scroll up, control+option+\ to toggle smoothing of the zoomed in image), the text is rendered with sub-pixel anti-aliasing, at least when "Font smoothing style:" in the "Appearance" system preferences is set to medium, which it will be by default on Macs with a built-in or external Apple flat-panel display.
正如您在任何应用程序中放大工具栏项目下方的标签时所看到的那样,或者例如Safari中的书签栏(控制+向上滚动,控制+选项+ \以切换放大图像的平滑),文本将使用子项呈现像素抗锯齿,至少当“外观”系统首选项中的“字体平滑样式:”设置为中等时,默认情况下,它将在具有内置或外置Apple平板显示器的Mac上显示。
NSShadow can not be used with sub-pixel anti-aliasing, so if you simply set an NSShadowAttributeName in the attributes dictionary you're drawing your string with, you will notice sub-pixel anti-aliasing is MIA when you zoom in on your rendered text. Due to the way NSShadow is designed, no matter what color you set your NSShadow instance to —even if it is opaque— it will always be drawn with an alpha channel, making sub-pixel antialiasing impossible.
NSShadow不能与子像素消除锯齿一起使用,所以如果你只是在属性字典中设置一个NSShadowAttributeName,你正在绘制你的字符串,当你放大你的渲染时,你会注意到亚像素消除锯齿是MIA文本。由于NSShadow的设计方式,无论您将NSShadow实例设置为什么颜色 - 即使它是不透明的 - 它将始终使用alpha通道绘制,从而无法进行子像素抗锯齿。
The solution is really very simple:
解决方案非常简单:
- Draw your text once with a white color with some transparancy,
- Then draw it once more on top of that, a pixel higher in a shade of grey of your liking with no transparancy.
用白色和一些透明度画一次你的文字,
然后在它上面再画一次,一个像你喜欢的灰色阴影更高的像素,没有透明度。
Your 'shadow' will draw without sub-pixel antialiasing, but the actual text on top op of it will draw with it, giving you the exact same effect as standard Cocoa toolbar button item labels, or items in the Safari bookmarks bar.
您的“阴影”将在没有子像素抗锯齿的情况下进行绘制,但顶部操作的实际文本将使用它进行绘制,从而为您提供与标准Cocoa工具栏按钮项标签或Safari书签栏中的项完全相同的效果。
EDIT: It seems that Safari's bookmarks bar items draw their 'shadows' with sub-pixel accuracy as well, so the way they did it is probably by choosing an opaque shade of gray for the white 'shadow' text as well; drawback of that approach: you are tying your drawing code to only work well on a particular background color, e.g. if your elements will be used on a blue background, you'll want to set that color to a light shade of blue, to appear like it's semi-transparent white.
编辑:似乎Safari的书签栏项目也以子像素精度绘制了他们的“阴影”,所以他们这样做的方式可能是为白色“阴影”文本选择不透明的灰色阴影;这种方法的缺点:你将你的绘图代码与特定的背景颜色很好地结合起来,例如:如果您的元素将在蓝色背景上使用,您将需要将该颜色设置为浅蓝色,使其看起来像半透明白色。
#2
Draw it with an un-shadow below it. Use a shadow with color white, opacity 50% or so, blur 0, offset 1 pt down.
用它下方的阴影画出它。使用白色阴影,不透明度50%左右,模糊0,偏移1磅向下。
A simple way to do this is to simply draw the text twice. The first time, you draw it 1 pt lower, in white, at 50% opacity. The second time, you draw it in the desired position, in the desired color, at the desired (probably 100%) opacity.
一种简单的方法是简单地绘制文本两次。第一次,你画下白色1 pt,不透明度为50%。第二次,以所需的颜色,在所需的(可能是100%)不透明度下,将其绘制在所需位置。
#1
If you want it to look perfect, you'll need to draw the text twice.
如果你希望它看起来很完美,你需要两次绘制文本。
As you can see when zooming in on labels below toolbar items in any app, or for instance the bookmarks bar in Safari (Control+scroll up, control+option+\ to toggle smoothing of the zoomed in image), the text is rendered with sub-pixel anti-aliasing, at least when "Font smoothing style:" in the "Appearance" system preferences is set to medium, which it will be by default on Macs with a built-in or external Apple flat-panel display.
正如您在任何应用程序中放大工具栏项目下方的标签时所看到的那样,或者例如Safari中的书签栏(控制+向上滚动,控制+选项+ \以切换放大图像的平滑),文本将使用子项呈现像素抗锯齿,至少当“外观”系统首选项中的“字体平滑样式:”设置为中等时,默认情况下,它将在具有内置或外置Apple平板显示器的Mac上显示。
NSShadow can not be used with sub-pixel anti-aliasing, so if you simply set an NSShadowAttributeName in the attributes dictionary you're drawing your string with, you will notice sub-pixel anti-aliasing is MIA when you zoom in on your rendered text. Due to the way NSShadow is designed, no matter what color you set your NSShadow instance to —even if it is opaque— it will always be drawn with an alpha channel, making sub-pixel antialiasing impossible.
NSShadow不能与子像素消除锯齿一起使用,所以如果你只是在属性字典中设置一个NSShadowAttributeName,你正在绘制你的字符串,当你放大你的渲染时,你会注意到亚像素消除锯齿是MIA文本。由于NSShadow的设计方式,无论您将NSShadow实例设置为什么颜色 - 即使它是不透明的 - 它将始终使用alpha通道绘制,从而无法进行子像素抗锯齿。
The solution is really very simple:
解决方案非常简单:
- Draw your text once with a white color with some transparancy,
- Then draw it once more on top of that, a pixel higher in a shade of grey of your liking with no transparancy.
用白色和一些透明度画一次你的文字,
然后在它上面再画一次,一个像你喜欢的灰色阴影更高的像素,没有透明度。
Your 'shadow' will draw without sub-pixel antialiasing, but the actual text on top op of it will draw with it, giving you the exact same effect as standard Cocoa toolbar button item labels, or items in the Safari bookmarks bar.
您的“阴影”将在没有子像素抗锯齿的情况下进行绘制,但顶部操作的实际文本将使用它进行绘制,从而为您提供与标准Cocoa工具栏按钮项标签或Safari书签栏中的项完全相同的效果。
EDIT: It seems that Safari's bookmarks bar items draw their 'shadows' with sub-pixel accuracy as well, so the way they did it is probably by choosing an opaque shade of gray for the white 'shadow' text as well; drawback of that approach: you are tying your drawing code to only work well on a particular background color, e.g. if your elements will be used on a blue background, you'll want to set that color to a light shade of blue, to appear like it's semi-transparent white.
编辑:似乎Safari的书签栏项目也以子像素精度绘制了他们的“阴影”,所以他们这样做的方式可能是为白色“阴影”文本选择不透明的灰色阴影;这种方法的缺点:你将你的绘图代码与特定的背景颜色很好地结合起来,例如:如果您的元素将在蓝色背景上使用,您将需要将该颜色设置为浅蓝色,使其看起来像半透明白色。
#2
Draw it with an un-shadow below it. Use a shadow with color white, opacity 50% or so, blur 0, offset 1 pt down.
用它下方的阴影画出它。使用白色阴影,不透明度50%左右,模糊0,偏移1磅向下。
A simple way to do this is to simply draw the text twice. The first time, you draw it 1 pt lower, in white, at 50% opacity. The second time, you draw it in the desired position, in the desired color, at the desired (probably 100%) opacity.
一种简单的方法是简单地绘制文本两次。第一次,你画下白色1 pt,不透明度为50%。第二次,以所需的颜色,在所需的(可能是100%)不透明度下,将其绘制在所需位置。