CoreGraphics Quartz 在透明 alpha 路径上绘制阴影

Question

在网上搜索了大约 4 个小时没有得到答案，所以：
如何在透明路径上绘制阴影？

- (void)drawRect:(CGRect)rect
{
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(c, 2);
    CGContextSetStrokeColorWithColor(c, [[UIColor whiteColor] CGColor]);
    CGContextSetShadowWithColor(c, CGSizeMake(0, 5), 5.0, [[UIColor blackColor]CGColor]);
    CGContextSetFillColorWithColor(c, [[UIColor colorWithWhite:1.0 alpha:0.8] CGColor]);

    // Sample Path
    CGContextMoveToPoint(c, 20.0, 10.0);
    CGContextAddLineToPoint(c, 100.0, 40.0);
    CGContextAddLineToPoint(c, 40.0, 70.0);
    CGContextClosePath(c);

    CGContextDrawPath(c, kCGPathFillStroke);
}

我注意到的第一件事是，阴影仅存在于笔划周围。但到目前为止这还不是问题。路径/矩形后面的阴影仍然可见，这意味着：阴影颜色正在影响路径的填充颜色。填充颜​​色应为白色，但改为灰色。如何解决这个问题？

Answer 1

您必须剪切上下文并绘制两次。

首先，您创建对路径的引用，因为您必须使用它几次并保存图形上下文，以便您可以返回它。

然后，将图形上下文剪切到路径之外的唯一绘图。这是通过将您的路径添加到覆盖整个视图的路径来完成的。剪裁完成后，您可以用阴影绘制路径，以便将其绘制在外侧。

接下来，将图形上下文恢复到剪切之前的状态，并再次绘制没有阴影的路径。

它在橙色背景上看起来像这样（白色背景不是很明显）

完成上面绘制的代码是这样的：

- (void)drawRect:(CGRect)rect
{
    CGContextRef c = UIGraphicsGetCurrentContext();
    CGContextSetLineWidth(c, 2);
    CGContextSetStrokeColorWithColor(c, [[UIColor whiteColor] CGColor]);
    CGContextSetFillColorWithColor(c, [[UIColor colorWithWhite:1.0 alpha:0.5] CGColor]);

    // Sample Path
    CGMutablePathRef path = CGPathCreateMutable();
    CGPathMoveToPoint(path, NULL, 20.0, 10.0);
    CGPathAddLineToPoint(path, NULL, 40.0, 70.0); 
    CGPathAddLineToPoint(path, NULL, 100.0, 40.0);
    CGPathCloseSubpath(path);

    // Save the state so we can undo the shadow and clipping later
    CGContextSaveGState(c);
    { // Only for readability (so we know what are inside the save/restore scope
        CGContextSetShadowWithColor(c, CGSizeMake(0, 5), 5.0, [[UIColor blackColor]CGColor]);
        CGFloat width = CGRectGetWidth(self.frame);
        CGFloat height = CGRectGetHeight(self.frame);

        // Create a mask that covers the entire frame
        CGContextMoveToPoint(c, 0, 0);
        CGContextAddLineToPoint(c, width, 0);
        CGContextAddLineToPoint(c, width, height);
        CGContextAddLineToPoint(c, 0, height);
        CGContextClosePath(c);

        // Add the path (which by even-odd rule will remove it)
        CGContextAddPath(c, path);

        // Clip to that path (drawing will only happen outside our path)
        CGContextClip(c);

        // Now draw the path in the clipped context
        CGContextAddPath(c, path);
        CGContextDrawPath(c, kCGPathFillStroke);
    }
    CGContextRestoreGState(c); // Go back to before the clipping and before the shadow

    // Draw the path without the shadow to get the transparent fill
    CGContextAddPath(c, path);
    CGContextDrawPath(c, kCGPathFillStroke);
}

如果你希望整个阴影一样强，并且不希望填充颜色的透明度使阴影变弱，那么你可以在第一次填充时使用完全不透明的颜色。它将被剪切，因此无论如何它都不会在路径内可见。它只会影响阴影。

Answer 2

根据您在评论中的要求，这里有更深入的探索。考虑以下屏幕截图（StackOverflow 为我缩小了它 - 它有助于查看完整尺寸。）：

您在这里看到的是三种不同背景（从左到右）上的 5 种不同的绘图方法（从上到下）。 （我还将填充 alpha 从 0.8 降低到 0.5，以使效果更容易看到。）三种不同的绘制方法是（从上到下）：

1. 仅描边，而不是填充，带有阴影
2. 您在中发布的方式原始问题中的代码
3. 描边和填充，没有应用阴影
4. 只是阴影本身
5. @DavidRönnqvist 在他的答案中提出的方式。

这三种不同的背景应该是不言自明的。

你在原来的问题中说：

我注意到的第一件事是，阴影仅在笔划周围。

这就是为什么我采用了第一种绘图方法。这就是只有笔划而没有填充并且（因此）只有笔划被遮蔽时的实际情况。

然后，你说：

但到目前为止这还不是问题。路径/矩形后面的阴影是
仍然可见，这意味着：阴影颜色正在影响填充
我的道路的颜色。填充颜​​色应为白色，但改为灰色。

您的原始代码是下一个版本（#2）。您看到的是，描边的阴影比填充的阴影更暗。这是因为描边颜色的 Alpha 为 1.0，而填充的 Alpha 小于 1.0。这在版本 #4 中可能更容易看到，它只是阴影——笔画边缘的颜色更暗。版本 #3 显示了没有阴影的绘图。看到了吗，您可以看到红色和图像在形状的填充中半遮蔽吗？因此，在您的原始绘图中，您可以通过对象本身看到对象自己的阴影。

如果这没有意义，请尝试考虑一块带有色调的玻璃（如果您喜欢摄影，请考虑中性密度滤镜）。如果您将玻璃放在光源和另一个表面之间，然后从侧面观察并仅观察下表面，您就会知道半透明玻璃会投射一些阴影，但不会像其他东西那样暗完全不透明（就像一块纸板）。这就是你所看到的——你透过物体看到它的影子。

版本#5 是@DavidRönnqvist 的方法。通过查看图像背景上绘制的形状，我在评论中谈论的欺骗眼睛的效果最容易欣赏（无论如何，对我来说）。它最终看起来像（在版本＃5中）是形状是图像的带边框的复制部分，上面覆盖着某种半透明的白色蒙版。如果您回顾一下版本#3，在没有阴影的情况下，很清楚发生了什么：您正在透过半透明形状查看下面的图像。然后，如果您查看版本#4，您会发现眼睛/相机后面的物体投射了阴影。从那里开始，我认为，当在图像上查看版本 #2 时，这也是很清楚的（即使在纯色上不太清楚）。乍一看，我的眼睛/大脑不知道它在版本 #5 中看到的是什么——在我建立“复制、屏蔽、漂浮在原始图像之上的部分图像”的心理模型之前，有一个“视觉不和谐”的时刻图像。”

因此，如果您想要这种效果（#5），那么大卫的解决方案将会非常有效。我只是想指出这是一种非直观的效果。

希望这有帮助。我已将用于生成此屏幕截图的完整示例项目放在 GitHub。

Answer 3

CGFloat lineWidth = 2.0f;
CGContextRef c = UIGraphicsGetCurrentContext();
CGContextSaveGState(c);
CGContextSetLineWidth(c, lineWidth);
CGContextSetStrokeColorWithColor(c, [[UIColor whiteColor] CGColor]);
CGContextSetShadowWithColor(c, CGSizeMake(0, 5), 5.0, [[UIColor blackColor]CGColor]);
CGContextAddRect(c, someRect);
CGContextDrawPath(c, kCGPathStroke);
CGContextRestoreGState(c);
someRect.origin.x += lineWidth/2;
someRect.origin.y += lineWidth/2;
someRect.size.width -= lineWidth;
someRect.size.height -= lineWidth;
CGContextClearRect(c, someRect);
CGContextSetFillColorWithColor(c, [[[UIColor whiteColor] colorWithAlphaComponent:0.8] CGColor]);
CGContextAddRect(c, someRect);  
CGContextDrawPath(c, kCGPathFill);

Answer 4

NSShadow* shadow = [[NSShadow alloc] init];
[shadow setShadowColor: [NSColor blackColor]];
[shadow setShadowOffset: NSMakeSize(2.1, -3.1)];
[shadow setShadowBlurRadius: 5];

NSBezierPath* bezierPath = [NSBezierPath bezierPath];
[bezierPath moveToPoint: NSMakePoint(12.5, 6.5)];
[bezierPath curveToPoint: NSMakePoint(52.5, 8.5) controlPoint1: NSMakePoint(40.5, 13.5) controlPoint2: NSMakePoint(52.5, 8.5)];
[bezierPath lineToPoint: NSMakePoint(115.5, 13.5)];
[bezierPath lineToPoint: NSMakePoint(150.5, 6.5)];
[bezierPath lineToPoint: NSMakePoint(201.5, 13.5)];
[bezierPath lineToPoint: NSMakePoint(222.5, 8.5)];
[NSGraphicsContext saveGraphicsState];
[shadow set];
[[NSColor blackColor] setStroke];
[bezierPath setLineWidth: 1];
[bezierPath stroke];
[NSGraphicsContext restoreGraphicsState];