核心图形：沿着具有正常渐变的路径绘制答案

【问题标题】：Core Graphics: Drawing along a path with a normal gradient核心图形：沿着具有正常渐变的路径绘制
【发布时间】：2011-02-07 12:57:19
【问题描述】：

这里和网络上的其他地方有许多关于如何使用渐变绘制的资源 - 填充或描边。

但是，AFAICT，没有解决以下要求：如何绘制具有 normal 渐变的路径，其中 normal 表示与路径正交。当使用深色->浅色->深色线性渐变时，最终效果可能类似于牙膏或管子。这是圆矩形的情况下的这个想法：

round-rect tube http://muys.net/cadre_blanc.png

（这是手绘的，边角不是很好）。

在圆形矩形的具体情况下，我想我可以用 4 个线性渐变（边）和 4 个径向渐变（角）来实现这个效果。但是还有更好的吗？

任何路径都有简单的解决方案吗？

【问题讨论】：

标签： cocoa core-graphics gradient quartz-graphics

【解决方案1】：

我能想到的唯一“简单”的解决方案是多次描边路径，减少描边宽度并每次稍微改变颜色，以模拟渐变。

显然，对于复杂路径，这可能是一项昂贵的操作，因此您可能希望缓存结果。

#define RKRandom(x) (arc4random() % ((NSUInteger)(x) + 1))

@implementation StrokeView

- (void)drawRect:(NSRect)rect 
{
    NSRect bounds = self.bounds;

    //first draw using Core Graphics calls
    CGContextRef c = [[NSGraphicsContext currentContext] graphicsPort];

    CGMutablePathRef path = CGPathCreateMutable();

    CGPathMoveToPoint(path, NULL, NSMidX(bounds), NSMidY(bounds));
    CGContextSetMiterLimit(c,90.0);
    CGContextSetLineJoin(c, kCGLineJoinRound);
    CGContextSetLineCap(c, kCGLineCapRound);

    for(NSUInteger f = 0; f < 20; f++)
    {
        CGPathAddCurveToPoint(
                              path,
                              NULL,
                              (CGFloat)RKRandom((NSInteger)NSWidth(bounds)) + NSMinX(bounds), 
                              (CGFloat)RKRandom((NSInteger)NSHeight(bounds)) + NSMinY(bounds),
                              (CGFloat)RKRandom((NSInteger)NSWidth(bounds)) + NSMinX(bounds), 
                              (CGFloat)RKRandom((NSInteger)NSHeight(bounds)) + NSMinY(bounds),
                              (CGFloat)RKRandom((NSInteger)NSWidth(bounds)) + NSMinX(bounds), 
                              (CGFloat)RKRandom((NSInteger)NSHeight(bounds)) + NSMinY(bounds)
                              );
    }

    for(NSInteger i = 0; i < 8; i+=2)
    {
        CGContextSetLineWidth(c, 8.0 - (CGFloat)i);
        CGFloat tint = (CGFloat)i * 0.15;

        CGContextSetRGBStrokeColor (
                                    c,
                                    1.0,
                                    tint,
                                    tint,
                                    1.0
                                    );
        CGContextAddPath(c, path);
        CGContextStrokePath(c);
    }

    CGPathRelease(path);

    //now draw using Cocoa drawing
    NSBezierPath* cocoaPath = [NSBezierPath bezierPathWithRoundedRect:NSInsetRect(self.bounds, 20.0, 20.0) xRadius:10.0 yRadius:10.0];
    for(NSInteger i = 0; i < 8; i+=2)
    {
        [cocoaPath setLineWidth:8.0 - (CGFloat)i];
        CGFloat tint = (CGFloat)i * 0.15;
        NSColor* color = [NSColor colorWithCalibratedRed:tint green:tint blue:1.0 alpha:1.0];
        [color set];
        [cocoaPath stroke];
    }
}

@end

【讨论】：