背景:
下图是 OS X Lion 中的 Mail.app。当源列表变得太长时,一条漂亮的阴影线会出现在源列表底部按钮的正上方。滚动时,源列表会移动到该阴影线下方。当您展开窗口以使源列表中的所有内容都适合而无需滚动时,阴影线就会消失。
问题:
如何使用 Cocoa 绘制这条阴影线?我知道 NSShadow 等,但在我看来,这里发生的不仅仅是影子。有一条线微妙地淡化为点(就像您在 Photoshop 中对每一端应用了渐变蒙版一样。)同样,阴影是椭圆,并且随着您接近线的末端而逐渐变细。所以它不仅仅是一个普通的 NSShadow,是吗? (这绝对不是图像,因为当您扩展源 View 的宽度时它会很好地缩放。)
如有任何有关如何绘制此形状的提示,我们将不胜感激。
对于坚持不懈的人来说,不,这并不违反保密协议(protocol),因为 Mail.app 已被 Apple 公开展示。
最佳答案
总体思路:
.
- 创建一个尺寸
150px × 10px
的层“A层” 并用 Gradient 填充它:- 下色:
#535e71
不透明度:33%
- 上层颜色:
#535e71
不透明度:0%
- 下色:
- 创建一个尺寸
150px × 1px
的图层“B层” 并用纯色填充#535e71
不透明度:50%
- 将“A 层”和“B 层”一起组成“C 层”。
- 应用 反射渐变蒙版 从
#ffffff
到#000000
到“C 层”。
视觉步骤:
功能代码:
MyView.h:
#import <Cocoa/Cocoa.h>
@interface MyView : NSView {
@private
}
@end
MyView.m:
#import "MyView.h"
@implementation MyView
- (CGImageRef)maskForRect:(NSRect)dirtyRect {
NSSize size = [self bounds].size;
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = CGBitmapContextCreate(NULL, size.width, size.height, 8, 0, colorSpace, kCGImageAlphaPremultipliedLast);
CGContextClipToRect(context, *(CGRect*)&dirtyRect);
CGRect rect = CGRectMake(0.0, 0.0, size.width, size.height);
size_t num_locations = 3;
CGFloat locations[3] = { 0.0, 0.5, 1.0 };
CGFloat components[12] = {
1.0, 1.0, 1.0, 1.0, // Start color
0.0, 0.0, 0.0, 1.0, // Middle color
1.0, 1.0, 1.0, 1.0, // End color
};
CGGradientRef myGradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, num_locations);
CGPoint myStartPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect));
CGPoint myEndPoint = CGPointMake(CGRectGetMaxX(rect), CGRectGetMinY(rect));
CGContextDrawLinearGradient(context, myGradient, myStartPoint, myEndPoint, 0);
CGImageRef theImage = CGBitmapContextCreateImage(context);
CGImageRef theMask = CGImageMaskCreate(CGImageGetWidth(theImage), CGImageGetHeight(theImage), CGImageGetBitsPerComponent(theImage), CGImageGetBitsPerPixel(theImage), CGImageGetBytesPerRow(theImage), CGImageGetDataProvider(theImage), NULL, YES);
[(id)theMask autorelease];
CGColorSpaceRelease(colorSpace);
CGContextRelease(context);
return theMask;
}
- (void)drawRect:(NSRect)dirtyRect {
NSRect nsRect = [self bounds];
CGRect rect = *(CGRect*)&nsRect;
CGRect lineRect = CGRectMake(rect.origin.x, rect.origin.y, rect.size.width, (CGFloat)1.0);
CGColorSpaceRef colorSpace = CGColorSpaceCreateDeviceRGB();
CGContextRef context = (CGContextRef) [[NSGraphicsContext currentContext] graphicsPort];
CGContextClipToRect(context, *(CGRect*)&dirtyRect);
CGContextClipToMask(context, rect, [self maskForRect:dirtyRect]);
size_t num_locations = 2;
CGFloat locations[2] = { 0.0, 1.0 };
CGFloat components[8] = {
0.315, 0.371, 0.450, 0.3, // Bottom color
0.315, 0.371, 0.450, 0.0 // Top color
};
CGGradientRef myGradient = CGGradientCreateWithColorComponents(colorSpace, components, locations, num_locations);
CGPoint myStartPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMinY(rect));
CGPoint myEndPoint = CGPointMake(CGRectGetMinX(rect), CGRectGetMaxY(rect));
CGContextDrawLinearGradient(context, myGradient, myStartPoint, myEndPoint, 0);
CGContextSetRGBFillColor(context, 0.315, 0.371, 0.450, 0.5 );
CGContextFillRect(context, lineRect);
CGColorSpaceRelease(colorSpace);
}
@end
(我第一次使用纯低级 CoreGraphics,因此可能低于最佳水平,有待改进。)
这是上面代码生成的实际屏幕截图:
绘图拉伸(stretch)到 View 的尺寸。
(我以前在这里展示过两种技术:“技术 A”和“技术 B”。
“技术 B”提供了出色的结果并且实现起来也更简单,所以我放弃了“技术 A”。
不过,有些评论可能仍会提到“技术 A”。忽略它们并享受功能齐全的代码片段。)。
关于objective-c - 如何在Cocoa中绘制锥形线+椭圆形阴影,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/6366362/