Question

如何在Cocoa中绘制模糊的形状？想象一个带有blurRadius的阴影伴随着一条填充的路径，但没有锐利的前景路径形状。

我尝试使用带阴影的填充路径，并将填充颜色设置为透明（alpha 0.0）。但这也使得阴影也不可见，因为它显然将阴影投射“对象”的alpha考虑在内。

Answer 1

这实际上相当棘手。我挣扎了一段时间，直到我在NSShadow上找到了这个类别：

@implementation NSShadow (Extras)

//draw a shadow using a bezier path but do not draw the bezier path
- (void)drawUsingBezierPath:(NSBezierPath*) path alpha:(CGFloat) alpha
{
    [NSGraphicsContext saveGraphicsState];
    //get the bounds of the path
    NSRect bounds = [path bounds];

    //create a rectangle that outsets the size of the path bounds by the blur radius amount
    CGFloat blurRadius = [self shadowBlurRadius];
    NSRect shadowBounds = NSInsetRect(bounds, -blurRadius, -blurRadius);

    //create an image to hold the shadow
    NSImage* shadowImage = [[NSImage alloc] initWithSize:shadowBounds.size];

    //make a copy of the shadow and set its offset so that when the path is drawn, the shadow is drawn in the middle of the image
    NSShadow* aShadow = [self copy];
    [aShadow setShadowOffset:NSMakeSize(0, -NSHeight(shadowBounds))];

    //lock focus on the image
    [shadowImage lockFocus];

    //we want to draw the path directly above the shadow image and offset the shadow so it is drawn in the image rect
    //to do this we must translate the drawing into the correct location
    NSAffineTransform* transform=[NSAffineTransform transform];
    //first get it to the zero point
    [transform translateXBy:-shadowBounds.origin.x yBy:-shadowBounds.origin.y];

    //now translate it by the height of the image so that it draws outside the image bounds
    [transform translateXBy:0.0 yBy:NSHeight(shadowBounds)];
    NSBezierPath* translatedPath = [transform transformBezierPath:path];

    //apply the shadow
    [aShadow set];

    //fill the path with an arbitrary black color
    [[NSColor blackColor] set];
    [translatedPath fill];
    [aShadow release];
    [shadowImage unlockFocus];

    //draw the image at the correct location relative to the original path
    NSPoint imageOrigin = bounds.origin;
    imageOrigin.x = (imageOrigin.x - blurRadius) + [self shadowOffset].width;
    imageOrigin.y = (imageOrigin.y - blurRadius) - [self shadowOffset].height;

    [shadowImage drawAtPoint:imageOrigin fromRect:NSZeroRect operation:NSCompositeSourceOver fraction:alpha];
    [shadowImage release];
    [NSGraphicsContext restoreGraphicsState];
}

@end

Answer 2

我找到了一个完全符合网络意思的实现。由Sean Patrick O'Brien撰写。它是NSBezierPath上的一个类别，如下所示：

@interface NSBezierPath (MCAdditions)

- (void)drawBlurWithColor:(NSColor *)color radius:(CGFloat)radius;

@end

@implementation NSBezierPath (MCAdditions)

- (void)drawBlurWithColor:(NSColor *)color radius:(CGFloat)radius
{
    NSRect bounds = NSInsetRect(self.bounds, -radius, -radius);
    NSShadow *shadow = [[NSShadow alloc] init];
    shadow.shadowOffset = NSMakeSize(0, bounds.size.height);
    shadow.shadowBlurRadius = radius;
    shadow.shadowColor = color;
    NSBezierPath *path = [self copy];
    NSAffineTransform *transform = [NSAffineTransform transform];
    if ([[NSGraphicsContext currentContext] isFlipped])
        [transform translateXBy:0 yBy:bounds.size.height];
    else
        [transform translateXBy:0 yBy:-bounds.size.height];
    [path transformUsingAffineTransform:transform];

    [NSGraphicsContext saveGraphicsState];

    [shadow set];
    [[NSColor blackColor] set];
    NSRectClip(bounds);
    [path fill];

    [NSGraphicsContext restoreGraphicsState];

    [path release];
    [shadow release];
}

@end

此代码可从此blog post下载。我没有在网上任何地方单独找到它。

如何画出模糊的形状？

2 个答案: