在iOS上绘制带阴影的矩形

Question

我正在尝试使用iOS中的库绘制下面这样的图像；但是我做不到。

我觉得它很容易绘制，但我无法实现。 等我完成绘制后，我会在上面放置一个标签。

- bahadir arslan

---

我不确定哪个适合我。我会在上面放一个标签，这样我就可以知道它是什么了。 - bahadir arslan

用CoreGraphics的代码来绘制它。这样更加灵活--你可以随意更改颜色、阴影半径和偏移量，而且不需要单独的1x和2x版本。 - Cyrille

PaintCode演示版能帮助我吗？我需要一个教程，因为我对CoreGraphics不是很了解 ;) - bahadir arslan

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

}

- Ashley Mills

---

谢谢你提供这段代码，我需要修改高度和宽度，但是它运行得非常完美。 - bahadir arslan

;) 所以，实际上我必须接受 @Cyrille 的答案，但我做不到 :) - bahadir arslan

Answer 2

你可以尝试这个：

#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;

}

我认为这对你会有帮助。

- Prasad G

---

这是代码的结果 http://d.pr/i/q0rl。我创建了一个新的视图（带有.h和.m文件），并修改了上面的代码。之后，我将视图插入到我的ViewController中，并设置了之前创建的视图类。 - bahadir arslan

是的。我认为这就是你需要的图表。你有什么问题吗？ - Prasad G

Answer 3

使用CoreGraphics很难实现内阴影 - 基本上，您需要否定路径并在其下方绘制一个剪切到原始路径的投影。

您可以查看PaintCode，它将向您展示代码。如果您不想购买它，它有15分钟的演示模式，应该足够满足您的需求。

- Cyrille

---

这个应用非常好，我认为它将永远帮助我解决更多的绘图问题 ;) - bahadir arslan

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)];

希望这可以帮到你。

- Mathew Varghese

---

第三行和第四行出现以下错误。'UIView'没有声明'setShadowColor:'选择器。 - bahadir arslan