1. ホーム
  2. iphone

[解決済み] UIViewレイヤーのインナーシャドウ効果?

2023-03-11 03:14:17

質問

以下のようなCALayerを持っています。

CAGradientLayer *gradient = [CAGradientLayer layer];
gradient.frame = CGRectMake(8, 57, 296, 30);
gradient.cornerRadius = 3.0f;
gradient.colors = [NSArray arrayWithObjects:(id)[RGB(130, 0, 140) CGColor], (id)[RGB(108, 0, 120) CGColor], nil];
[self.layer insertSublayer:gradient atIndex:0];

を追加したいのですが インナーシャドウ 効果を追加したいのですが、これを行う方法がよくわかりません。私はdrawRectで描画する必要があると思いますが、これは他のUIViewオブジェクトの上にレイヤーを追加することになり、それはいくつかのボタンの後ろにバーであることになっているので、私は何をすべきか途方に暮れています?

私は別のレイヤーを追加することができましたが、再び、内側の影の効果を達成する方法がよくわかりません(このような。

助けてくれてありがとう...

どのように解決するのですか?

Costique さんの提案のように、Core Graphics を使用して内側の影を描画する方法を探している人のために、この方法を紹介します。(iOS では必要に応じて調整してください)

drawRect: メソッドで...

CGRect bounds = [self bounds];
CGContextRef context = UIGraphicsGetCurrentContext();
CGFloat radius = 0.5f * CGRectGetHeight(bounds);


// Create the "visible" path, which will be the shape that gets the inner shadow
// In this case it's just a rounded rect, but could be as complex as your want
CGMutablePathRef visiblePath = CGPathCreateMutable();
CGRect innerRect = CGRectInset(bounds, radius, radius);
CGPathMoveToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y);
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x + innerRect.size.width, bounds.origin.y);
CGPathAddArcToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, bounds.origin.y, bounds.origin.x + bounds.size.width, innerRect.origin.y, radius);
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x + bounds.size.width, innerRect.origin.y + innerRect.size.height);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x + bounds.size.width, bounds.origin.y + bounds.size.height, innerRect.origin.x + innerRect.size.width, bounds.origin.y + bounds.size.height, radius);
CGPathAddLineToPoint(visiblePath, NULL, innerRect.origin.x, bounds.origin.y + bounds.size.height);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x, bounds.origin.y + bounds.size.height, bounds.origin.x, innerRect.origin.y + innerRect.size.height, radius);
CGPathAddLineToPoint(visiblePath, NULL, bounds.origin.x, innerRect.origin.y);
CGPathAddArcToPoint(visiblePath, NULL,  bounds.origin.x, bounds.origin.y, innerRect.origin.x, bounds.origin.y, radius);
CGPathCloseSubpath(visiblePath);

// Fill this path
UIColor *aColor = [UIColor redColor];
[aColor setFill];
CGContextAddPath(context, visiblePath);
CGContextFillPath(context);


// Now create a larger rectangle, which we're going to subtract the visible path from
// and apply a shadow
CGMutablePathRef path = CGPathCreateMutable();
//(when drawing the shadow for a path whichs bounding box is not known pass "CGPathGetPathBoundingBox(visiblePath)" instead of "bounds" in the following line:)
//-42 cuould just be any offset > 0
CGPathAddRect(path, NULL, CGRectInset(bounds, -42, -42));
    
// Add the visible path (so that it gets subtracted for the shadow)
CGPathAddPath(path, NULL, visiblePath);
CGPathCloseSubpath(path);

// Add the visible paths as the clipping path to the context
CGContextAddPath(context, visiblePath); 
CGContextClip(context);         


// Now setup the shadow properties on the context
aColor = [UIColor colorWithRed:0.0f green:0.0f blue:0.0f alpha:0.5f];
CGContextSaveGState(context);
CGContextSetShadowWithColor(context, CGSizeMake(0.0f, 1.0f), 3.0f, [aColor CGColor]);   

// Now fill the rectangle, so the shadow gets drawn
[aColor setFill];   
CGContextSaveGState(context);   
CGContextAddPath(context, path);
CGContextEOFillPath(context);

// Release the paths
CGPathRelease(path);    
CGPathRelease(visiblePath);

つまり、基本的には次のような手順があります。

  1. パスを作成する
  2. 好きな塗りつぶし色を設定し、このパスをコンテキストに追加して、コンテキストを塗りつぶす
  3. ここで、可視のパスを束ねることができるより大きな矩形を作成します。このパスを閉じる前に、可視のパスを追加します。その後、パスを閉じると、可視のパスが差し引かれた形状が作成されます。これらのパスの作成方法に応じて、塗りつぶし方法(偶数/奇数の非ゼロ巻)を調査するとよいでしょう。要するに、サブパスを足したときにquot;subtract;するようにするには、一方は時計回り、他方は反時計回りと反対方向に描く(というか組み立てる)必要があるのです。
  4. それから、コンテキスト上で可視パスをクリッピングパスとして設定し、その外側にあるものを画面に描画しないようにする必要があります。
  5. 次に、オフセット、ぼかし、および色を含む、コンテキスト上の影を設定します。
  6. 次に、穴の開いた大きな図形を塗りつぶします。色は重要ではありません。なぜなら、すべてが正しく行われた場合、この色は表示されず、影だけが表示されるからです。