iphone - 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

これを試すことができます：

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

CoreGraphics では内側の影を作成するのは困難です。基本的には、パスを無効にして、その下にドロップ シャドウを描画し、元のパスにクリップする必要があります。

PaintCodeを見ると、コードが表示されます。購入したくない場合は、15 分間のデモ モードがあります。これで十分です。

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

お役に立てれば。-