带圆角矩形和阴影的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); 
}

来源

2010-02-21 Martin

阅读这篇博客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

我不认为你可以一次完成此操作。嗯，我改变你的代码如下，这似乎工作。

- (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); 
    } 
}

来源

2010-02-22 02:27:41

太好了，谢谢。具有很大的意义：绘制矩形，绘制阴影，该阴影位于圆角矩形的上方，以便通过再次绘制矩形完成。关于你的代码的一个注释。我在初始化语句中已将视图背景设置为清除。上面的代码适用于任何其他背景，但具有清晰的背景，我必须在第一个矩形被抚摸和填充之前设置填充颜色。 – 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;

来源

2010-06-14 16:44:03

请注意，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]; 
}

来源

2011-06-08 21:24:38

非常有帮助，谢谢！ – Gabriel 2011-06-16 08:24:04

这里需要注意的一点是确保您的视图背景设置为[UIColor clearColor]，否则您将在视图框架周围绘制阴影，忽略圆角。 – Julian 2011-07-30 18:38:47

在drawRect：中设置图层属性是无用的和多余的，因为除非您更改它们，否则这些属性不会更改。将这些调用关闭（例如在init中）。 – millenomi 2013-03-09 23:27:30

带圆角矩形和阴影的UIView：阴影出现在矩形上方

回答

相关问题