带圆角矩形和阴影的UIView:阴影出现在矩形上方
我有一个uiview子类,我试图用投影绘制圆角矩形。虽然它绘制了两个元素,但我可以通过圆角矩形填充看到阴影。我是CG的新手,所以我可能会错过简单的东西(尽管它似乎不是填充的alpha值设置为1)。这是绘制矩形代码。带圆角矩形和阴影的UIView:阴影出现在矩形上方
- (void)drawRect:(CGRect)rect {
// get the contect
CGContextRef context = UIGraphicsGetCurrentContext();
//for the shadow, save the state then draw the shadow
CGContextSaveGState(context);
CGContextSetShadow(context, CGSizeMake(4,-5), 10);
//now draw the rounded rectangle
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
//since I need room in my rect for the shadow, make the rounded rectangle a little smaller than frame
CGRect rrect = CGRectMake(CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetWidth(rect)-30, CGRectGetHeight(rect)-30);
CGFloat radius = self.cornerRadius;
// the rest is pretty much copied from Apples example
CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
// Start at 1
CGContextMoveToPoint(context, minx, midy);
// Add an arc through 2 to 3
CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
// Add an arc through 4 to 5
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
// Add an arc through 6 to 7
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
// Add an arc through 8 to 9
CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
// Close the path
CGContextClosePath(context);
// Fill & stroke the path
CGContextDrawPath(context, kCGPathFillStroke);
//for the shadow
CGContextRestoreGState(context);
}
我不认为你可以一次完成此操作。嗯,我改变你的代码如下,这似乎工作。
- (void)drawRect:(CGRect)rect
{
// get the contect
CGContextRef context = UIGraphicsGetCurrentContext();
//now draw the rounded rectangle
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 0.0);
//since I need room in my rect for the shadow, make the rounded rectangle a little smaller than frame
CGRect rrect = CGRectMake(CGRectGetMinX(rect), CGRectGetMinY(rect), CGRectGetWidth(rect)-30, CGRectGetHeight(rect)-30);
CGFloat radius = 45;
// the rest is pretty much copied from Apples example
CGFloat minx = CGRectGetMinX(rrect), midx = CGRectGetMidX(rrect), maxx = CGRectGetMaxX(rrect);
CGFloat miny = CGRectGetMinY(rrect), midy = CGRectGetMidY(rrect), maxy = CGRectGetMaxY(rrect);
{
//for the shadow, save the state then draw the shadow
CGContextSaveGState(context);
// Start at 1
CGContextMoveToPoint(context, minx, midy);
// Add an arc through 2 to 3
CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
// Add an arc through 4 to 5
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
// Add an arc through 6 to 7
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
// Add an arc through 8 to 9
CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
// Close the path
CGContextClosePath(context);
CGContextSetShadow(context, CGSizeMake(4,-5), 10);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
// Fill & stroke the path
CGContextDrawPath(context, kCGPathFillStroke);
//for the shadow
CGContextRestoreGState(context);
}
{
// Start at 1
CGContextMoveToPoint(context, minx, midy);
// Add an arc through 2 to 3
CGContextAddArcToPoint(context, minx, miny, midx, miny, radius);
// Add an arc through 4 to 5
CGContextAddArcToPoint(context, maxx, miny, maxx, midy, radius);
// Add an arc through 6 to 7
CGContextAddArcToPoint(context, maxx, maxy, midx, maxy, radius);
// Add an arc through 8 to 9
CGContextAddArcToPoint(context, minx, maxy, minx, midy, radius);
// Close the path
CGContextClosePath(context);
CGContextSetStrokeColorWithColor(context, [[UIColor blackColor] CGColor]);
CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0);
// Fill & stroke the path
CGContextDrawPath(context, kCGPathFillStroke);
}
}
太好了,谢谢。具有很大的意义:绘制矩形,绘制阴影,该阴影位于圆角矩形的上方,以便通过再次绘制矩形完成。 关于你的代码的一个注释。我在初始化语句中已将视图背景设置为清除。上面的代码适用于任何其他背景,但具有清晰的背景,我必须在第一个矩形被抚摸和填充之前设置填充颜色。 – Martin 2010-02-25 18:59:51
我读过,你可以扩展渲染图层的区域,使其不被视图框裁剪。使用:layer.bounds = CGRectMake(-1,-1,102,102)...如果你的视图是100x100,阴影是一个像素偏移等。你明白了。 – 2011-06-08 19:47:24
尝试导入此之后QuartzCore/QuartzCore.h
yourView.layer.shadowColor = [[UIColor blackColor] CGColor];
yourView.layer.shadowOffset = CGSizeMake(10.0f, 10.0f);
yourView.layer.shadowOpacity = 1.0f;
yourView.layer.shadowRadius = 10.0f;
请注意,iOS 3.2及以上版本仅支持此功能 – 2010-08-15 07:31:08
这不适用于使用_maskToBounds和setCornerRadius_的圆角。 – 2011-02-01 05:09:40
这个解决方案明显减慢了整个应用程序... – Ondrej 2011-02-20 10:55:53
- (void)drawRect:(CGRect)rect
{
self.layer.masksToBounds = NO;
self.layer.shadowColor = [[UIColor whiteColor] CGColor];
self.layer.shadowOffset = CGSizeMake(0,2);
self.layer.shadowRadius = 2;
self.layer.shadowOpacity = 0.2;
UIBezierPath *path = [UIBezierPath bezierPathWithRoundedRect:rect byRoundingCorners:UIRectCornerAllCorners cornerRadii:CGSizeMake(20, 20)];
[[UIColor blackColor] setFill];
[path fill];
}
阅读这篇博客http://bynomial.com/blog/?p=52&cpage=1#comment-1115。它回答了如何做到这一点。 – 2011-09-27 17:09:03
这里记录的解决方案对我来说是最好的,因为它向我展示了如何使用自定义图像(带有maskToBounds = YES)以及阴影。谢谢! – Mark 2011-11-12 20:04:44
@John:很多人都很感谢这个链接,哥们......帮助我开始。 :) – viral 2012-02-22 06:36:01