我怎樣畫出彎曲的陰影？

Question

像這樣：

我知道這不適用於NSShadow ，在drawRect:繪制它drawRect:將工作得很好。

Answer 1

您可以使用Core Animations圖層和shadowPath屬性執行此操作和許多其他類型的陰影。 您正在描述的陰影可以使用橢圓陰影路徑。

產生這個陰影的代碼如下。 您可以調整橢圓的大小，使其具有更圓的陰影形狀。 您還可以使用圖層上的陰影屬性調整位置，不透明度，顏色和模糊半徑。

self.wantsLayer = YES;

NSView *viewWithRoundShadow = [[NSView alloc] initWithFrame:NSMakeRect(30, 30, 200, 100)];
[self addSubview:viewWithRoundShadow];

CALayer *backingLayer = viewWithRoundShadow.layer;
backingLayer.backgroundColor = [NSColor orangeColor].CGColor;

// Configure shadow
backingLayer.shadowColor   = [NSColor blackColor].CGColor;
backingLayer.shadowOffset  = CGSizeMake(0, -1.);
backingLayer.shadowRadius  = 5.0;
backingLayer.shadowOpacity = 0.75;

CGRect shadowRect = backingLayer.bounds;
CGFloat shadowRectHeight = 25.;
shadowRect.size.height = shadowRectHeight;
// make narrow
shadowRect = CGRectInset(shadowRect, 5, 0);

backingLayer.shadowPath = CGPathCreateWithEllipseInRect(shadowRect, NULL);

---

只是為了展示使用相同技術創建的其他陰影的一些示例; 像這樣的道路

會產生這樣的影子

Answer 2

它遠非完美，但我認為它確實吸引了你正在尋找的那種陰影。 請記住，我已經從一個完整的黑色到一個清晰的顏色留下了一個簡單的線性漸變。 如此黑暗，這不會給你一個超逼真的陰影，除非你稍微調整一下這些值。 您可能希望通過添加具有不同alpha值的更多位置來播放漸變，以獲得您喜歡的任何步進。 可能需要進行一些實驗，但值得一試。

根據你的建議，它是一個drawRect:(CGRect)rect東西。 只需創建自定義視圖並僅覆蓋它：

- (void)drawRect:(CGRect)rect {
    // Get the context
    CGContextRef context = UIGraphicsGetCurrentContext();

    // Setup the gradient locations. We just want 0 and 1 as in the start and end of the gradient.
    CGFloat locations[2] = { 0.0, 1.0 };

    // Setup the two colors for the locations. A plain black and a plain black with alpha 0.0 ;-)
    CGFloat colors[8] = { 0.0f, 0.0f, 0.0f, 1.0f,   // Start color
                          0.0f, 0.0f, 0.0f, 0.0f }; // End color

    // Build the gradient
    CGGradientRef gradient = CGGradientCreateWithColorComponents(CGColorSpaceCreateDeviceRGB(),
                                                                 colors,
                                                                 locations,
                                                                 2);

    // Load a transformation matrix that will squash the gradient in the current context
    CGContextScaleCTM(context,1.0f,0.1f);

    // Draw the gradient
    CGContextDrawRadialGradient(context,                                    // The context
                                gradient,                                   // The gradient
                                CGPointMake(self.bounds.size.width/2,0.0f), // Starting point
                                0.0f,                                       // Starting redius
                                CGPointMake(self.bounds.size.width/2,0.0f), // Ending point
                                self.bounds.size.width/2,                   // Ending radius
                                kCGGradientDrawsBeforeStartLocation);       // Options

    // Release it an pray that everything was well written
    CGGradientRelease(gradient);
}

這就是我在屏幕上的樣子......

我只是在陰影上方放置一個圖像，但是如果你繼承UIImageView並覆蓋它的drawRect方法，你可以輕松地將陰影與圖像合並。

正如您所看到的，我所做的只是簡單地設置一個圓形漸變，但我在將其繪制到上下文之前加載了一個縮放矩陣來壓縮它。 如果您計划在該方法中執行任何其他操作，請記住您已准備好矩陣，並且您所做的一切都將因此而變形。 您可能希望在加載矩陣之前使用CGContextSaveGState()保存CTM，然后使用CGContextRestoreGState()恢復原始狀態

希望這是你在尋找的地方。

干杯。

Answer 3

我可以解釋如何在代碼中執行此操作，或者解釋如何使用為您生成此代碼的工具。 我選擇后者。

使用PaintCode （免費演示可用，每個會話限制1小時）。

1. 畫一個橢圓形
2. 繪制一個與橢圓形底部相交的矩形。
3. CMD在左上角的“對象”列表中單擊矩形和橢圓。
4. 按工具欄中的“相交”按鈕。
5. 從“對象”列表中選擇“貝塞爾曲線”。
6. 將其筆划設為“無中風”
7. 單擊“漸變”按鈕（位於選擇檢查器下方的左側）
8. 按“+”按鈕
9. 將漸變顏色更改為淺灰色。
10. 從“選擇”檢查器中，將“填充樣式”更改為“漸變”
11. 選擇漸變：線性

調整漸變直到你滿意為止。

Answer 4

- (void)viewDidLoad
{
UIImage *natureImage = [UIImage imageNamed:@"nature.jpg"];
CALayer *layer = [CALayer layer];
layer.bounds = CGRectMake(0, 0, 200, 200);
layer.position = CGPointMake(380, 200);
layer.contents = (id)natureImage.CGImage;

layer.shadowOffset = CGSizeMake(0,2);
layer.shadowOpacity = 0.70;
layer.shadowPath = (layer.shadowPath) ? nil : [self bezierPathWithCurvedShadowForRect:layer.bounds].CGPath;
[self.view.layer addSublayer:layer];
}

- (UIBezierPath*)bezierPathWithCurvedShadowForRect:(CGRect)rect {

    UIBezierPath *path = [UIBezierPath bezierPath];

    CGPoint topLeft      = rect.origin;
    CGPoint bottomLeft   = CGPointMake(0.0, CGRectGetHeight(rect) + offset);
    CGPoint bottomMiddle = CGPointMake(CGRectGetWidth(rect)/2, CGRectGetHeight(rect) - curve);
    CGPoint bottomRight  = CGPointMake(CGRectGetWidth(rect), CGRectGetHeight(rect) + offset);
    CGPoint topRight     = CGPointMake(CGRectGetWidth(rect), 0.0);

    [path moveToPoint:topLeft];
    [path addLineToPoint:bottomLeft];
    [path addQuadCurveToPoint:bottomRight controlPoint:bottomMiddle];
    [path addLineToPoint:topRight];
    [path addLineToPoint:topLeft];
    [path closePath];

    return path;
}

希望這會幫助你。