Основная графика: рисование по траектории с нормальным градиентом - PullRequest
Новая
       43

Основная графика: рисование по траектории с нормальным градиентом

7 голосов
/ 07 февраля 2011

Существует множество ресурсов здесь и в других местах в Интернете о том, как рисовать с градиентом - заливка или обводка.

Однако, AFAICT, ни один из них не отвечает следующему требованию: как нарисовать путь с нормальный градиент, при этом нормальный означает ортогональность пути.Чистый эффект может быть чем-то вроде зубной пасты или тюбика при нанесении с темным -> светлым -> темным линейным градиентом.Вот эта идея в случае круглого прямоугольника:

трубка с круглыми прямоугольниками http://muys.net/cadre_blanc.png

(это было нарисовано от руки, а углы не очень хороши).

В конкретном случае круглого прямоугольника, я думаю, я могу добиться этого эффекта с 4 линейными градиентами (стороны) и 4 радиальными градиентами (углы).Но есть ли лучше?

Есть ли простое решение для любого пути?

1 Ответ

6 голосов
/ 08 февраля 2011

Единственное «простое» решение, которое я могу придумать, - это многократно обводить траекторию, уменьшая ширину обводки и слегка меняя цвет каждый раз, чтобы имитировать градиент.

Очевидно, что это может быть дорогостоящей операцией для сложных путей, поэтому вы можете кэшировать результат, если это возможно. 

#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

sample output

...