UIView 层上的内阴影效果? [英] Inner shadow effect on UIView layer?

问题描述

我有以下 CALayer:

I have the following CALayer:

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(8, 57, 296, 30);
gradient.cornerRadius = 3.0f;
gradient.colors = [NSArray arrayWithObjects:(id)[RGB(130, 0, 140) CGColor], (id)[RGB(108, 0, 120) CGColor], nil];
[self.layer insertSublayer:gradient atIndex:0];

我想给它添加一个内阴影效果，但我不太确定如何做到这一点.我想我需要在 drawRect 中绘制，但是这会在其他 UIView 对象的顶部添加图层，因为它应该是一些按钮后面的一个栏，所以我不知道该怎么做?

I'd like to add an inner shadow effect to it, but I am not quite sure how to do this. I suppose I would be required to draw in drawRect, however this would add the layer on top of other UIView objects, since it's supposed to be a bar behind some buttons, so I am at a loss as to what to do?

我可以再添加一层，但同样，不知道如何实现内阴影效果(像这样:

I could add another layer, but again, not sure how to achieve the inner shadow effect (like this:

感谢帮助...

推荐答案

对于想知道如何按照 Costique 的建议使用 Core Graphics 绘制内部阴影的其他人，方法如下:(在 iOS 上根据需要进行调整)

For anyone else wondering how to draw an inner shadow using Core Graphics as per Costique's suggestion, then this is how: (on iOS adjust as needed)

在你的 drawRect: 方法中...

In your drawRect: method...

CGRect bounds = [self bounds];
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat radius = 0.5f * CGRectGetHeight(bounds);


// Create the "visible" path, which will be the shape that gets the inner shadow
// In this case it's just a rounded rect, but could be as complex as your want
CGMutablePathRef visiblePath = CGPathCreateMutable();
CGRect innerRect = CGRectInset(bounds, radius, radius);
CGPathMoveToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y);
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x + innerRect.size.width, bounds.origin.y);
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, bounds.origin.y, bounds.origin.x + bounds.size.width, innerRect.origin.y, radius);
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, innerRect.origin.y + innerRect.size.height);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x + bounds.size.width, bounds.origin.y + bounds.size.height, innerRect.origin.x + innerRect.size.width, bounds.origin.y + bounds.size.height, radius);
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y + bounds.size.height);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x, bounds.origin.y + bounds.size.height, bounds.origin.x, innerRect.origin.y + innerRect.size.height, radius);
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x, innerRect.origin.y);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x, bounds.origin.y, innerRect.origin.x, bounds.origin.y, radius);
CGPathCloseSubpath(visiblePath);

// Fill this path
UIColor *aColor = [UIColor redColor];
[aColor setFill];
CGContextAddPath(context, visiblePath);
CGContextFillPath(context);


// Now create a larger rectangle, which we're going to subtract the visible path from
// and apply a shadow
CGMutablePathRef path = CGPathCreateMutable();
//(when drawing the shadow for a path whichs bounding box is not known pass "CGPathGetPathBoundingBox(visiblePath)" instead of "bounds" in the following line:)
//-42 cuould just be any offset > 0
CGPathAddRect(path, NULL, CGRectInset(bounds, -42, -42));
    
// Add the visible path (so that it gets subtracted for the shadow)
CGPathAddPath(path, NULL, visiblePath);
CGPathCloseSubpath(path);

// Add the visible paths as the clipping path to the context
CGContextAddPath(context, visiblePath); 
CGContextClip(context);         


// Now setup the shadow properties on the context
aColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.5f];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 1.0f), 3.0f, [aColor CGColor]);   

// Now fill the rectangle, so the shadow gets drawn
[aColor setFill];   
CGContextSaveGState(context);   
CGContextAddPath(context, path);
CGContextEOFillPath(context);

// Release the paths
CGPathRelease(path);    
CGPathRelease(visiblePath);

所以，基本上有以下步骤:

So, essentially there are the following steps:

1. 创建您的路径
2. 设置你想要的填充颜色，将此路径添加到上下文中，并填充上下文
3. 现在创建一个更大的矩形来限制可见路径.在关闭此路径之前，添加可见路径.然后关闭路径，以便创建一个从中减去可见路径的形状.您可能想要研究填充方法(偶数/奇数的非零缠绕)，具体取决于您如何创建这些路径.本质上，要让子路径减去"当您将它们加在一起时，您需要以相反的方向绘制(或构建它们)，一个顺时针，另一个逆时针.
4. 然后你需要将你的可见路径设置为上下文的剪切路径，这样你就不会在它之外绘制任何东西到屏幕上.
5. 然后在上下文中设置阴影，包括偏移、模糊和颜色.
6. 然后用其中的孔填充大形状.颜色无关紧要，因为如果您做的一切都正确，您将看不到这种颜色，只会看到阴影.

这篇关于UIView 层上的内阴影效果?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！