在iOS上繪製陰影矩形

Question

我想在iOS中使用庫繪製類似下面的圖像;但我不能。

我認爲這是很容易得出，但我無法實現的。 我完成繪製後，我會在它上面貼上標籤。

Answer 1

使用此爲您drawRect方法：

- (void)drawRect:(CGRect)rect 

    //// General Declarations 
    CGContextRef context = UIGraphicsGetCurrentContext(); 

    //// Shadow Declarations 
    UIColor* shadow = [UIColor blackColor]; 
    CGSize shadowOffset = CGSizeMake(1, 1); 
    CGFloat shadowBlurRadius = 2; 

    //// Frames 
    CGRect frame = rect; 

    //// Abstracted Graphic Attributes 
    CGRect shadowBoxRect = CGRectMake(CGRectGetMinX(frame) + 0, CGRectGetMinY(frame) + 0, 40, 40); 
    CGFloat shadowBoxCornerRadius = 4; 


    //// ShadowBox Drawing 
    UIBezierPath* shadowBoxPath = [UIBezierPath bezierPathWithRoundedRect: shadowBoxRect cornerRadius: shadowBoxCornerRadius]; 
    [[UIColor lightGrayColor] setFill]; 
    [shadowBoxPath fill]; 

    ////// ShadowBox Inner Shadow 
    CGRect shadowBoxBorderRect = CGRectInset([shadowBoxPath bounds], -shadowBlurRadius, -shadowBlurRadius); 
    shadowBoxBorderRect = CGRectOffset(shadowBoxBorderRect, -shadowOffset.width, -shadowOffset.height); 
    shadowBoxBorderRect = CGRectInset(CGRectUnion(shadowBoxBorderRect, [shadowBoxPath bounds]), -1, -1); 

    UIBezierPath* shadowBoxNegativePath = [UIBezierPath bezierPathWithRect: shadowBoxBorderRect]; 
    [shadowBoxNegativePath appendPath: shadowBoxPath]; 
    shadowBoxNegativePath.usesEvenOddFillRule = YES; 

    CGContextSaveGState(context); 
    { 
     CGFloat xOffset = shadowOffset.width + round(shadowBoxBorderRect.size.width); 
     CGFloat yOffset = shadowOffset.height; 
     CGContextSetShadowWithColor(context, 
      CGSizeMake(xOffset + copysign(0.1, xOffset), yOffset + copysign(0.1, yOffset)), 
      shadowBlurRadius, 
      shadow.CGColor); 

     [shadowBoxPath addClip]; 
     CGAffineTransform transform = CGAffineTransformMakeTranslation(-round(shadowBoxBorderRect.size.width), 0); 
     [shadowBoxNegativePath applyTransform: transform]; 
     [[UIColor grayColor] setFill]; 
     [shadowBoxNegativePath fill]; 
    } 
    CGContextRestoreGState(context); 

} 

Answer 2

內部陰影很難用CoreGraphics - 基本上，你需要否定你的路徑，並在它下面畫一個陰影，剪切到你原來的路徑。

你可以看看PaintCode，它會顯示你的代碼。如果您不想購買它，它有15分鐘的演示模式，這應該足以滿足您的需求。

Answer 3

你可以試試這個：

#import <QuartzCore/QuartzCore.h> 

，並在你的代碼，使後您的視圖設置這些：

self.layer.cornerRadius = x; 

self.layer.masksToBounds = TRUE; 

這可以讓你有你的觀點圓角。如果您計算半徑以匹配您的視圖，則應該獲得所需的外觀。

- (id)initWithFrame:(CGRect)frame 
    { 
     self = [super initWithFrame:frame]; 
     if (self) { 
     self.backgroundColor = [UIColor grayColor]; 
     } 
     return self; 
    } 
- (void)drawRect:(CGRect)rect 
{ 
      CGContextRef context =UIGraphicsGetCurrentContext(); 
      CGContextSetRGBStrokeColor(context, 1.0, 1.0, 1.0, 1.0); 
      // And draw with a blue fill color 
      CGContextSetRGBFillColor(context, 0.0, 0.0, 1.0, 1.0); 
      // Draw them with a 2.0 stroke width so they are a bit more visible. 
      CGContextSetLineWidth(context, 2.0); 


      CGContextAddRect(context, self.bounds); 

      CGContextStrokePath(context); 


      // Close the path 
      CGContextClosePath(context); 
      // Fill & stroke the path 
      CGContextDrawPath(context, kCGPathFillStroke); 
      self.layer.cornerRadius = self.bounds.size.width/12; 
      self.layer.masksToBounds = TRUE; 

} 

我認爲這會對您有所幫助。

Answer 4

嘗試下面的代碼，其中myView是要設置陰影的UIView。

myView.layer.cornerRadius = 5.0f; 
myView.layer.masksToBounds = YES; 
[myView.layer setShadowColor:[[UIColor blackColor] colorWithAlphaComponent: 0.5]]; 
[myView.layer setShadowOffset:CGSizeMake(0, -1)]; 

希望這helps.-